javascript - 如何指定指令使用哪个 $scope？

Question

我有一个指令正在监视 $scope 上的某些内容，但它得到了错误的 $scope。

所以我有一个指定 Controller 的状态设置:

.state('app.mystate', {
    url: 'search/:searchText',
    views: {
        'mainPane@': {
            templateUrl: 'views/content/search.html',
            controller: 'ABCController'
        }
    },
    resolve: {
        searchPromise: ['$http', '$stateParams', function ($http, $stateParams) {
            console.log($stateParams.searchText);
            return $http.get(...blah...blah).then(blahblah);
        }]
    }
})

当这个状态被激活时，它会进入这个 View :

<ul ...>
    <div ng-repeat="...">
        <li ...>
            <div ng-include="'views/widgets/somewidget.html'"></div>
        </li>
    </div>
</ul>

ng-include 加载它，它指定了一个特定的 Controller 。和指令。

<div ng-controller="XYZController">    
    <my-chart chart="chart" ...></my-chart>
</div>

这是我的指令:

angular.module('app.directive')
  .directive('myChart', function () {
    return {
      template: '<div></div>',
      scope: {
        chart: '='
      },
    // wrong scope!
   scope.$watch('chart', function (chart) { }

我认为 <div>包含 my-chart 指令，该指令将获取进入 XYZController 的 $scope。

但是指令正在获取注入(inject) ABCController 的范围，而不是我想要/预期的 XYZController。我可以看到 XYZContoller 被激活。

如何让注入(inject) XYZController 的 $scope 与 my-chart 指令看到的范围相同？

Answer 1

您指令的示例代码似乎在复制/粘贴过程中被 chop/损坏，因此很难看出 scope.$watch 调用的位置。如果它在指令定义中，在返回 block 之后，那么它永远不会被调用，但我希望它在 Controller 中。

话虽如此，您可以在指令属性中指定指令使用的 Controller ，这在这里似乎很合适，除非您想在不同的范围内使用该指令。

<div>
  <my-chart chart="chart"></my-chart>
</div>

angular.module('app.directive')
.directive('myChart', function () {
  return {
    controller: "XYZController",
    bindToController: true
    template: '<div></div>',
    scope: {
      chart: '='
    }
  })
.controller('XYZController', function($scope){
  $scope.$watch('chart', function (chart) { });
});