angularjs - 绑定(bind)到 Controller 的指令 : data, 中的 Angular.js bindToController 不能用作 this.foo？

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 被视为 Controller 的一个属性，但它不像普通对象属性那样作为 this.foo 可用。那我如何访问和修改它呢？那些双向绑定(bind)数据发生了什么？

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

Answer 1

双向绑定(bind)期望变量不是值，应该是:

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

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

在 1.6 中引入了更改 - 默认情况下，绑定(bind)不是立即解析而是在 $onInit 之前解析。所以将您的代码包装在 $onInit 中:

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

或更改设置:

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