AngularJS 1.4指令:scope、双向绑定和bindToController

AngularJS 1.4 directives: scope, two way binding and bindToController

本文关键字：绑定 bindToController 4指令 scope AngularJS      更新时间：2023-09-26

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

我们使用的是AngularJS 1.4，它引入了一种在指令中使用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'
    };

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

更新：

感谢对这篇博客文章的引用，我需要更新我的答案。由于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

原始答案：

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

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

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

使用scope: {}，您为mdAddress指令创建了一个独立的作用域(没有任何继承(。这意味着：在父控制器和指令之间不传递任何数据。

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

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

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

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

所以，现在让我们来看看最后一个(也是正在工作的代码片段(：

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

在那里，您也创建了一个独立的作用域，但这次添加了要作为表达式传入的address属性。因此，现在您从第二个代码段中的视图传入的address将在控制器的作用域中可用。现在设置bindToController: true，将把当前作用域的所有属性绑定到控制器(或者更可能是控制器的对象(。现在，它正如您所期望的那样工作，因为数据将传递到作用域，而数据将传递给控制器的模板作用域。

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

相关文章：