Question

我需要访问ngRoute指令中提供的控制器。有可能吗？

Answer 1

在您的指令中，您需要设置scope:true，然后父范围可用。例如，如果您将state配置为

$stateProvider
  .state('main', {
    url: '/main',
    controller: 'MainCtrl',
    templateUrl: 'main.html'
  });

MainCtrl

的位置

app.controller('MainCtrl', function ($scope) {
  $scope.data = { data: 'data' };
  $scope.fn = function () {
    alert('MainCtrl function');
  }
});

和main.html只是

<my-directive></my-directive>

myDirective

的位置

app.directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: true,
    template: '<div>MainCtrl data: {{ data | json }}' +
              '<button ng-click="fn()">alert</button></div>' 
  }; 
});

所有这些的HTML模板

<body>
  <div>
    <a ui-sref="main">Main state</a><hr>
  </div>
  <div ui-view></div>
</body>

然后你会看到如下所示的内容，显示控制器中的data以及控制器函数fn中的alert。

imgur

此处相关的plunker http://plnkr.co/edit/iSPDXp

Answer 2

注意：我不建议在生产代码上执行此操作，这些方法对于在控制台中调试Angular更有用。但是，它是一种从指令访问控制器的方法。

通过使用angular.element，我可以通过一种方式思考您可以在哪里实现这一目标。

...
.directive('example', function () {
    return {
        link: function () {
            // Get access to the controller itself.
            var ctrl = angular.element('[ng-view]').controller();

            // Get access to the controller's scope.
            var ctrlScope = angular.element('[ng-view]').scope();
        }
    };
})
...

除此之外，做任何你想做的事情可能要好得多。但是，如果你真的想知道如何去做，那就去吧。

Answer 3

在你的指令的链接功能中你真正需要的是

scope.$parent

这将使您可以访问使用该指令的控制器范围。虽然，这不是最好的方式，但它可能是最简单的方法。不推荐使用它，因为$ parent可能是任何控制器。

更好用

transclude: true

您的指令上的

选项用于共享控制器范围。

您还可以使用'='操作符从控制器设置指令范围内的单个项目

scope: {
  foo: '=bar'
}

其中bar是控制器范围上的var set。我不确定你认为哪一种最好。

Answer 4

没有特定的API，但如果您在当前范围内公开控制器，则始终可以从指令访问范围数据。

内部控制器

$scope.controller=this;

您现在可以直接在指令中访问此控制器或将其传递到隔离范围。

事实上，controller as语法也可以这样做。

如何从指令访问ngRoute的控制器？

4 个答案: