Question

我有一个指令正在观察$ scope上的内容，而且它正在获得错误的$ scope。

所以我有一个指定控制器的状态设置：

.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);
        }]
    }
})

当此状态被激活时，它会转到此视图：

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

ng-include加载它，它具有指定的特定控制器。并指示。

<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) { }

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

但该指令正在获取注入ABCController的范围，而不是我希望/预期的XYZController。我可以看到XYZContoller被激活了。

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

Answer 1

您指示的示例代码似乎在复制/粘贴期间被截断/中断，因此很难看到该范围。$ watch call at at。如果它在指令定义中，在返回块之后，那么它永远不会被调用，但我希望它在控制器中。

话虽如此，您可以在指令属性中指定指令使用的控制器，这似乎是合适的，除非您想使用具有不同范围的指令。

<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) { });
});

Answer 2

scope: true将创建一个原型继承自父作用域的作用域，因此您应该能够$监视父作用域上的属性。

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

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

2 个答案: