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

Question

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

javascriptangularjsangularjs-directivecontrolleras

4

好的，这真的很让我烦恼。我有一个带有隔离作用域的指令，使用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 中，它能够按预期工作。

这里是一个演示

因此我的问题有两个部分：

A）为什么在使用 '=' 时 vm.foo 的值为 undefined？

B）为什么我不能在控制器的作用域内更改 vm.bar 的值，即使该更改不会传播到 HTML 元素属性（因为我使用的是 '@'）？

- Shaun Scovil

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheSharpieOne · Accepted Answer

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在父作用域上是未定义的，因此当它绑定时，它将把该“未定义”值传递到指令的绑定控制器作用域中。

进一步阅读：这种新的bindToController语法允许指令不是具有隔离作用域，但仍然可以确定要绑定的内容。您实际上可以在指令上将scope设置为true，这样就会创建一个从其祖先继承的新子作用域。