控制器不使用内部指令

Question

在下面的代码中，控制器不使用窗口小部件和过滤指令。

您能帮我解决这个问题吗？我无法弄清楚我到底做错了什么。： - (

预期输出：

小部件指令应打印"从窗口小部件控制器"。

过滤指令应打印"从过滤指令"。

我在这里复制了该问题，请检查。

html：

<div ng-app="myApp">
  <body-dir>
    <icon-dir>
      <filter-dir>
      </filter-dir>
    </icon-dir>
    <widget-dir>
    </widget-dir>
  </body-dir>
</div>

JS：

var myApp = angular.module('myApp', []);
myApp.controller('filterController', function filterController($scope) {
  var vm = this;
  vm.test = "From filter directive";
  alert("filter");
  return vm;
});
myApp.controller('widgetController', ['$scope', function widgetController($scope) {
  var oki = this;
  oki.widget = "From widget controller";
  alert("widget");
  return oki;
}])
myApp.directive('bodyDir', function() {
  return {
    restrict: 'E',
    link: function($scope) {
      alert('body-dir');
    }
  };
});
myApp.directive('widgetDir', function() {
  return {
    restrict: 'E',
    controller: 'widgetController',
    controllerAs: 'oki',
    template: "<span>{{oki.widget}}</span>",
    link: function($scope) {
      alert('widget-dir');
    }
  };
});
myApp.directive('filterDir', function() {
  return {
    controller: 'filterController',
    controllerAs: 'vm',
    restrict: 'E',
    template: "<span>{{vm.test}}</span>",
    link: function($scope) {
      alert('filter-dir');
    }
  };
});
myApp.directive('iconDir', function() {
  return {
    restrict: 'E',
    link: function($scope) {
      alert('icon-dir');
    }
  };
});

Answer 1

据我所知， controllerAs是在gangularjs v1.2 中引入的，但是在您的JSFiddle中，您正在使用 v1.0.1.1.1 。这就是为什么controllerAs不适用于小部件和过滤指令。