Question

我用bindToController语法创建了一个最简单的指令，由于我所看到的结果，导致了信仰的孤立：

function foobar() {
    return {
        restrict: 'E',
        scope: {
            foo: '='
        },
        template: "<div>foo = {{ vm.foo }}</div>",
        bindToController: true,
        controllerAs: "vm",
        controller: ["$scope", function($scope) {
            console.log(this); // print controller
            console.log(this.foo); // print controller attribute
        }]
    };
}

现在，在html中我说：

<foobar foo="1"></foobar>

在生成的html中，我按预期看到了div的内容：

foo = 1

但是在控制台中我看到了：

controller
    foo: 1
    __proto__: Object

undefined

呃，什么？因此，不知何故，foo被视为控制器的属性，但它不像普通对象属性那样可用this.foo。我如何访问和修改它？那些双向绑定数据会发生什么？

JSBin ：https://jsbin.com/xidepewofe/edit?html,js,output

Answer 1

双向绑定期望变量不值，应该是：

<div ng-init="myvarname = 1">
  <foobar foo="myvarname"></foobar>
</div>

另一种选择是将绑定类型更改为“@”。

1.6引入了更改 - 默认情况下，绑定不是立即解决，而是在$ onInit之前解决。所以将你的代码包装在$ onInit：

中

var vm = this;
vm.$onInit = function() {
  console.log(vm.foo);
}

或更改设置：

.config(function($compileProvider){
  $compileProvider.preAssignBindingsEnabled(true)
});

指令中的Angular.js bindToController：绑定到控制器的数据不可用作this.foo?

1 个答案: