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的值等于HTML元素的属性值bar，符合我的预期。

当我尝试使用过滤器更改 vm.bar 的值时，没有任何更改持续存在。

当我将 vm.bar 的过滤值存储到新变量 vm.baz 时，它按预期工作。

Here is a fiddle

所以我的问题分为两部分：

A) 为什么在使用 '=' 时 vm.foo 的值未定义？

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 }}'
    };
}

此外，在您的 fiddle 中，FOO 在父作用域上 undefined，因此当它绑定时，它会将 undefined 拉入指令的绑定控制器作用域。

延伸阅读：这个新的 bindToController 语法允许的一件主要事情是指令能够不是一个孤立的范围，并且仍然可以识别要绑定的内容。实际上，您可以在指令中将作用域设置为 true，以获得一个新的子作用域，该子作用域将从它的祖先那里继承。

AngularJS 1.4：如何使用 bindToController 和 controllerAs 语法创建双向绑定

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

javascript

angularjs

angularjs-directive

controlleras