AngularJS 1.4: Как создать двустороннюю привязку с использованием синтаксиса bindToController и controllerAs

Question

Хорошо, это действительно беспокоит меня. У меня есть директива с изолированной областью, используя controllerAs синтаксис и bindToController:

function exampleDirectiveFactory() {
    var bindings = {
        foo: '=',
        bar: '@'
    }

    return {
        bindToController: true,
        controller      : 'ExampleController',
        controllerAs    : 'vm',
        scope           : bindings,
        template        : 'foo = {{ vm.foo }}<br />bar = {{ vm.bar }}'
    };
}

Предполагая использование как это:

<example foo="FOO" bar="BAR"></example>

... я ожидаю ценность vm.foo быть в двухсторонней связи со значением foo приписывать. Вместо этого это undefined,

Значение vm.bar равно значению атрибута bar HTML-элемента, который я ожидаю.

Когда я пытаюсь изменить значение vm.bar при использовании фильтра изменения не сохраняются.

Когда я сохраняю отфильтрованное значение vm.bar в новую переменную, vm.baz, это работает, как ожидалось.

Вот скрипка

Итак, мой вопрос состоит из двух частей:

А) Почему стоимость vm.foo не определено при использовании '='?

Б) Почему я не могу изменить значение vm.bar в области действия контроллера, даже если это изменение не распространяется на атрибут элемента HTML (чего не должно быть, потому что я использую '@')?

Answer 1

1.4 изменил, как работает bindToController. Хотя кажется, что документация angular по-прежнему относится к области как true/false, Теперь он может принимать объект так же, как scope атрибут, где атрибуты указывают, что вы хотите связать и как связать это.

function exampleDirectiveFactory() {
    var bindings = {
        foo: '=',
        bar: '@'
    }

    return {
        bindToController: bindings, //<-- things that will be bound
        controller      : 'ExampleController',
        controllerAs    : 'vm',
        scope           : {}, //<-- isolated scope
        template        : 'foo = {{ vm.foo }}<br />bar = {{ vm.bar }}'
    };
}

Кроме того, в вашей скрипке, FOO является undefined на родительской области, поэтому, когда он связывает, он будет тянуть undefined в область действия контроллера, связанную с директивой.

Дальнейшее чтение: одна важная вещь, что этот новый bindToController синтаксис позволяет - это способность директивы не быть изолированной областью и все же определять, что связывать. Вы можете на самом деле установить область true по вашей директиве, чтобы иметь новую дочернюю область, которая будет наследовать от его предков.