更改控制器初始化中的作用域不适用于指令

debugcn 发表于 Dev

轰炸机

我有这个指令：

angular.module("app", [])
  .directive("myDirective", myDirective);

function myDirective() {
  return {
    template: '{{vm.numbers}}',
    scope: {
      numbers: '='
    },
    controller: MyController,
    controllerAs: 'vm',
    bindToController: true,
  };
}

function MyController($timeout) {
  var vm = this;
  vm.numbers.push(3);
  $timeout(function() {
     vm.numbers.push(4);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="app">
  <my-directive numbers="[1,2]"></my-directive>
</div>

为什么不将3推入数组？

那将是烧瓶

=和之间有明显的语法差异@。双向=绑定的功能之一是，当属性值不是作用域属性名称时，您应格外小心，因为它不是用于此目的的。

在您的示例中发生的是'[1,2]'字符串已解析为数组，并且vm.number在运行控制器功能时可用作范围属性。所做的更改vm.numbers.push(3)已应用于匿名数组的副本，并且在任何地方都未观察到。控制器功能完成后，第一个摘要循环启动，并再次vm.number被[1, 2]数组覆盖。之后，该$timeout函数启动并使用进行另一个更改vm.numbers.push(4)。vm.number此刻才观察到其中的变化。

这就是将匿名数组或对象馈送到双向指令绑定时发生的情况。您还会在分配vm.number其他内容时遇到问题。

由于@绑定仅适用于文本，因此也不是一种选择。您可以改为这样做

function myDirective() {
  return {
    template: '{{vm.numbers}}',
    scope: {},
    controller: MyController,
    controllerAs: 'vm',
    bindToController: true,
  };
}

function MyController($timeout, $parse, $attrs) {
  var vm = this;
  vm.numbers = $parse($attrs.numbers)() || [];
  vm.numbers.push(3);
  $timeout(function() {
     vm.numbers.push(4);
  });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。