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

Question

我的网络应用程序有几个页面，它们都有自己的 Controller 。在这些页面中，我使用也有 Controller 的指令。所有 Controller 都使用 controllerAs 语法，它们都设置为 vm。根据this文章这应该有效。但是，我无法将其与指令结合使用。在此代码笔中，我重现了类似的情况:

http://codepen.io/csteur/pen/LGEdLy

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

Answer 1

您需要将您的 Controller 与目录隔离

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了解更多信息