Question

尽管我已经阅读了SO中的所有问题，但我仍然对控制器AS的问题很少，使用下面的通用小部件指令作为示例

var app = angular.module('test')
app.directive('genericDirective', function(){
  return {
      restrict:'E',
      templateUrl: someUrlHere,
      scope: { someScopeHere },
      controllerAs: 'vm',
      bindToController: true,
      controller: function(){
         someControllerHere
      }
  }
})

上面指令的模板是

<div>{{info1}} {{info2}} {{info3}}</div>

并说上面有几个指令（genericDirective2，genericDirective3等）使用与上面相同的设置。我的想法是拥有一个通用指令，可以插入到任何视图中，并与处理上述指令所在视图的任何控制器一起工作。

所以说如果我有一个布局

<div id="someId" ng-controller="thisController">
    <!-- Widget one -->
    <generic-directive1></generic-directive1>
    <!-- Widget two -->
    <generic-directive2></generic-directive2>
    <!-- Widget three -->
    <generic-directive3></generic-directive3>
</div>

假设thisController获取一个json，其中包含相应呈现每个指令所需的所有数据

{
    "generic-directive-1": {
        "id": "someId1",
        "class": "someClass1",
        "data": {
            "info1":"someInfo1-1",
            "info2":"someInfo1-2",
            "info3":"someInfo1-3"
        }
    },
    "generic-directive-2": {
        "id": "someId2",
        "class": "someClass2",
        "data": {
            "info1":"someInfo2-1",
            "info2":"someInfo2-2",
            "info3":"someInfo2-3"
        }
    },
    "generic-directive-3": {
        "id": "someId3",
        "class": "someClass3",
        "data": {
            "info1":"someInfo3-1",
            "info2":"someInfo3-2",
            "info3":"someInfo3-3"
        }
    }
}

我怎样才能做到这一点

thisController可以使用controllerAs访问特定的genericDirective（在本例中使用controllerAs：'vm'），如果我想将thisController中的特定参数传递给generic-directive-3，我该怎么办？
正确的指令将从thisController获取正确的数据？因为我用controllerAs设置所有指令：'vm'。
我是否需要为每个指令使用不同的控制器名称？由于可能在页面中使用2-3个具有相同控制器的指令，并且页面控制器可能引用了错误的指令？

Answer 1

我如何才能使thisController可以访问特定的使用控制器的genericDirective（在这种情况下使用 controllerAs：＆＃39; vm＆＃39;），如果我想传递特定的参数 thisController到generic-directive-3，我该怎么做？

由于您不使用组件，因此在控制器之间共享数据的最简洁方法是使用服务。 You also have other choices

对于指令，您可以/应该通过属性传递数据：

<div id="someId" ng-controller="thisController">
    <generic-directive1 data="obj.generic-directive-1"></generic-directive1>
    <generic-directive2 data="obj.generic-directive-2"></generic-directive2>
    ...
</div>

此数据将绑定到指令的范围或指令的控制器。我不会将这些人一起使用，因为它可能会让人感到困惑：

  return {
      restrict:'E',
      template: '<p>{{data.id}}</p>',
      scope: { data: '=' }
  }

或

  return {
      restrict:'E',
      template: '<p>{{vm.data.id}}</p>',
      bindToController: { 'data: '=' },
      controllerAs: 'vm',
      controller: function() {
         console.log(this.data); //data is bound to the controller
      }
  }

正确的指令将从thisController获取正确的数据？以来我用controllerAs设置所有指令：＆＃39; vm＆＃39;。

如果使用隔离范围，指令将通过范围获取数据，如果使用bindToController，则直接通过控制器获取数据。

我是否需要为每个指令使用不同的controllerAs名称？如可以在其中使用2-3个具有相同控制器的指令一个页面，页面控制器可能指的是错误的指令？

您不必为controllerAs属性使用不同的名称，因为它只在指令中使用。

但是为了避免重复控制器代码，你不能在指令中将它声明为n匿名函数，而是这样：

function UniqueController() {
  console.log("hello");
}

function myDirective1() {
  return {
      restrict:'E',
      template: '<p>{{vm.data.id}}</p>',
      bindToController: { 'data: '=' },
      controllerAs: 'vm',
      controller: UniqueController
  }
}

angular.module('mymodule', []);
angular.module('mymodule')
    .directive('myDirective1', myDirective1)
    .directive('myDirective2', myDirective2)
    .controller('UniqueController', UniqueController);

关于controllerAs

1 个答案: