javascript - AngularJS 1.4 指令 : scope, 两种方式绑定(bind)和 bindToController

Question

Update: It must have been something stupid in another part of the code. It works now, so the bindToController syntax is fine.

我们正在使用 AngularJS 1.4，它引入了一个 new way to use bindToController在指令中。

经过相当多的阅读(也许还没有完全理解)，我们这样定义了我们的指令:

  .directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {},
      bindToController: {
        address: '='
      },
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };

像这样从另一个 View 调用它:

  <md-address address="vm.address"></md-address>

之前在 View Controller 中定义过:

  vm.address = {
    street: null,
    countryCode: null,
    cityCode: null,
    postalCode: null
  };

像这样引用指令模板中的变量:

  <md-input-container>
    <label>{{'ADDRESSNUMBER' | translate}}</label>
    <input type="number" ng-model="dir.address.streetNumber">
  </md-input-container>

我们花了 4 小时试图弄清楚为什么我们的指令不起作用。好吧，它工作正常，但 Controller 和指令之间的双向绑定(bind)不起作用，vm.address.street 被无可救药地设置为 null。

一段时间后，我们只是尝试了老办法:

  .directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {
        address: '='
      },
      bindToController: true,
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };

它神奇地起作用了。知道为什么吗？

Answer 1

更新:

感谢 reference to this blog post ，我需要更新我的答案。从 AngularJS 1.4 开始，您似乎真的可以使用

scope: {},
bindToController: {
  variable: '='
}

它将做与旧语法(完全)相同的事情:

scope: {
  variable: '='
},
bindToController: true

AngularJS 源代码中解释此行为的有用行:

if (isObject(directive.scope)) {
  if (directive.bindToController === true) {
    bindings.bindToController = parseIsolateBindings(directive.scope,
                                                     directiveName, true);
    bindings.isolateScope = {};
  } else {
    bindings.isolateScope = parseIsolateBindings(directive.scope,
                                                 directiveName, false);
  }
}
if (isObject(directive.bindToController)) {
  bindings.bindToController =
      parseIsolateBindings(directive.bindToController, directiveName, true);
}

来源:AngularJS 1.4.0

原答案:

希望我能向您解释为什么您遇到的这种行为是正确的，以及您在哪里误解了范围绑定(bind)的概念。

让我解释一下，您在第一个代码片段中做了什么:

.directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {},
      bindToController: {
        address: '='
      },
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };

使用 scope:{}，您为 mdAddress 指令创建了一个独立的范围(没有任何继承)。这意味着:父 Controller 和您的指令之间没有数据传递。

考虑到这一点，关于您的第二个代码片段:

<md-address address="vm.address"></md-address>

vm.address 来自您的父 Controller / View 将作为表达式分配给指令的 address 属性，但是由于您之前定义了一个独立的范围，因此数据不会传递到 AddressController，因此在 bindToController 值中不可用。

让我们将 scope 对象定义视为“将传入哪些数据”，将 bindToController 视为“哪些数据将在我的 View 的 controllerAs 对象中可用” ".

那么，现在让我们看一下最后一个(和工作代码片段):

.directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {
        address: '='
      },
      bindToController: true,
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };

您也在那里创建了一个独立的作用域，但这次您添加了 address 属性以作为表达式传入。所以现在您从第二个代码段中的 View 传入的 address 将在 Controller 的范围内可用。现在设置 bindToController: true 会将所有当前作用域的属性绑定(bind)到 Controller (或者更可能是 controllerAs 对象)。现在，它按您预期的方式工作，因为数据将传入范围，数据将传出到 Controller 的模板范围。

这个简短的概述是否有助于您更好地理解 scope 和 bindToController 定义对象的概念？