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

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 的值双向绑定(bind)到 foo 属性的值。相反，它是 undefined。

vm.bar 的值等于我期望的 HTML 元素的属性值 bar。

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

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

Here is a fiddle

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

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

B) 为什么我不能在 Controller 范围内更改 vm.bar 的值，即使该更改不会传播到 HTML 元素属性(它不应该，因为我正在使用 '@')?

Answer 1

1.4 改变了 bindToController 的工作方式。虽然看起来 Angular 的文档仍然将该字段称为 true/false。现在它可以接受一个对象，就像 scope 属性一样，其中属性指示您想要绑定(bind)的内容以及如何绑定(bind)它。

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，因此当它绑定(bind)时，它会将 undefined 拉入指令的绑定(bind) Controller 作用域。

进一步阅读: 这种新的 bindToController 语法允许的一件主要事情是指令能够不是一个孤立的范围，并且仍然可以识别要绑定(bind)的内容。实际上，您可以在指令中将作用域设置为 true，以拥有一个将从其祖先继承的新子作用域。