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

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

本文关键字：语法 controllerAs 创建 绑定 bindToController 何使用 AngularJS      更新时间：2023-09-26

好吧，这真的让我很困扰。我有一个具有隔离范围的指令，使用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元素属性(它不应该，因为我使用'@')?

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语法允许的一个主要功能是，指令不是一个孤立的作用域，并且仍然可以识别要绑定的内容。你可以在指令中设置scope为true，这样就可以有一个新的子作用域，它将继承它的祖先。

相关文章：