AngularJS 1.4 指令：范围、双向绑定和 bindToController

Question

更新：在代码的另一部分一定是愚蠢的。它现在可以工作了，所以 bindToController 语法很好。

我们使用的是 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'
    };

像这样从另一个视图调用它：

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

已经在视图控制器中定义了：

  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 小时试图弄清楚为什么我们的指令不起作用。好吧，它可以工作，但是控制器和指令之间的双向绑定没有，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

原答案：

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

让我解释一下，你在第一个代码 sn-p 中做了什么：

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

使用scope: {}，您为mdAddress 指令创建了一个隔离范围（没有任何继承）。这意味着：父控制器和您的指令之间没有数据传递。

考虑到这一点，关于您的第二个代码 sn-p：

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

您的父控制器/视图中的vm.address 将作为表达式分配给指令的地址属性，但是由于您之前定义了一个隔离范围，数据不会传递到AddressController，因此在@ 中不可用987654332@值。

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

那么，现在让我们看看最后一个（和工作代码 sn-p）：

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

您还创建了一个隔离作用域，但这次您添加了address 属性以作为表达式传入。所以现在你从第二个 sn-p 的视图中传入的address 将在控制器的范围内可用。现在设置bindToController: true，会将所有当前范围的属性绑定到控制器（或者更可能是controllerAs 对象）。现在，它可以正常工作了，因为数据将被传递到作用域，而数据将被传递到控制器的模板作用域。

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