Question

我有一个由指令组成的表格。此表单的两个部分在输入字段，选择和复选框中是相同的。我使用isolate scope和controllerAs语法（使用bindToController = true）制作了一个指令，其中控制器有一个方法可以从checkBox上的ngChange触发。我的问题是控制器别名我指定了这个＆＃39;在控制器中触发两次，每次指令一次。第二次通过该控制器别名，在我的示例中，ctrlVm＆＃39;被第二个范围覆盖。

复制此问题的更简单的指令和控制器是：

function myDirective() {
  var directive = {
    restrict: 'AE',
        priority: 100,
        require: 'ngModel',
    scope: {
      boundObject: '=boundObj',
      myArray: '='
    },
    templateUrl: 'myTemplate.html',
    controller: controller,
    controllerAs: 'ctrlVm',
    bindToController: true
  };
  return directive;

  function controller() {
    ctrlVm = this;
    ctrlVm.runTest = runTest;

    function runTest() {
      ctrlVm.myArray.push(ctrlVm.boundObject.first);
    }
  }
}

可以在以下网址找到包含上述代码和html的完整演示：

http://plnkr.co/edit/TdZgadsmVQiZhkQQYly1?p=preview

我基本上是在两次调用指令并期望它们导致一个＆＃34;一个＆＃34;或者一个＆＃34;两个＆＃34;，取决于你点击的是哪个框。但正如你所看到的，第一个控制器是＆＃34;被覆盖＆＃34;在第二个方面，无论你检查哪个方框，它都会触发第二个指令的功能并添加一个＆＃34;两个＆＃34;无论您单击哪个框，都可以访问数组。

我整天都进行了详尽的搜索，一路上学习了一些其他的东西，但是没有找到超过几个与这个问题相关的参考文献，这两个似乎暗示需要两个不同的指令，它们有不同的控制器别名或接受controllerAs名称的变量名的指令。这两个解决方案似乎都需要两个不同的视图，因为我的观点包括使用controllerAs别名（现在这两个指令会有所不同）。

有没有办法做到这一点，重用控制器和controllerAs语法，并为两个指令分别存在示例runTest（）函数？谢谢你的帮助。

Answer 1

在指令的控制器中，您没有声明变量ctrlVm。

所以改变：

  function controller() {
    ctrlVm = this;
    ctrlVm.runTest = runTest;

    function runTest() {
      ctrlVm.myArray.push(ctrlVm.boundObject.first);
    }
  }

要：

  function controller() {
    var ctrlVm = this;
    ctrlVm.runTest = runTest;

    function runTest() {
      ctrlVm.myArray.push(ctrlVm.boundObject.first);
    }
  }

http://plnkr.co/edit/Qab1lpgbrK8ZRLZiRdaQ?p=preview

AngularJS控制器在指令中，多个实例覆盖控制器方法

1 个答案: