Question

我的网络应用程序有几个页面，他们有自己的控制器。在这些页面中，我使用了也有控制器的指令。所有控制器都使用controllerAs语法，它们都设置为vm。根据{{3}}文章，这应该有效。但是，我无法将其与指令结合使用。在这个codepen中，我重现了类似的情况：

this

在此示例中，由于嵌套指令，父作用域也被破坏。任何人都可以解释为什么会发生这种情况或者如何改变它以使其发挥作用？

Answer 1

您需要使用目录

隔离控制器

angular.module('app', []);

angular.module('app').controller("MainController", function(){
    var vm = this;
    vm.title = 'AngularJS Nested Controller Example';
});

angular
  .module('app')
  .directive('nestedDirective', function() {
  return {
    restrict: 'E',
    scope: {}, 
    controller: 'nestedDirectiveController',
    controllerAs: 'vm',
    template:'<div> {{vm.message}} </div>'
  };
});

angular
  .module('app')
  .controller('nestedDirectiveController', nestedDirectiveController);

function nestedDirectiveController() {
  var vm = this;
  this.message = "hoi";
}

如果您愿意，请检查您的代码： http://codepen.io/anon/pen/VeYxQg

查看此link以获取更多信息

Answer 2

在var vm = this;内定义nestedDirectiveController时，vm的范围仅限于nestedDirectiveController。

由于您的指令具有隔离范围，并且您的模板使用此nestedDirectiveController函数来评估表达式，因此它会获得标题值null，而我们看不到标题。

如果您想要共享范围，那么您可以在指令中提供scope : true配置。因此，该指令获得了自己的范围，该范围从父范围继承原型。

angular
  .module('app')
  .directive('nestedDirective', function() {
  return {
    restrict: 'E',
    scope: true, 
    controller: 'nestedDirectiveController',
    controllerAs: 'vm',
    template:'<div> {{vm.message}} </div>'
  };
});

<强> See Codepen

使用controllerAs嵌套指令时，为什么父作用域会中断

2 个答案: