AngularJS 1.4: How to create two-way binding using bindToController and controllerAs syntax

Question

Well, that really bothers me. I have a directive with a selection scope using the syntax controllerAsand bindToController:

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

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

Assuming use as follows:

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

... I expect the value to vm.foobe two-way, bound to the attribute value foo. Instead it is undefined.

The value vm.baris equal to the attribute value of the barHTML element that I expect.

When I try to change a value vm.barusing a filter, the changes are not saved.

When I save the filtered value vm.barto a new variable, vm.bazit works as expected.

Here is the fiddle

So my question has two parts:

A) vm.foo undefined '='?

B) 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 , , .