如何從指令訪問ngRoute的控制器？

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 。

相關的插件在這里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是控制器作用域上的變量集。 我不確定您認為哪個最好。

Answer 4

沒有特定的API，但是如果您在當前作用域上公開控制器，則始終可以從指令訪問作用域數據。

內部控制器做

$scope.controller=this;

現在，您可以直接在指令中訪問此控制器，也可以將其傳遞給隔離的范圍。

實際上， controller as語法也可以這樣做。

如何從指令訪問ngRoute的控制器？

問題描述

4 個解決方案

解決方案1
2 已采納 2014-10-26 17:56:32

解決方案2
0 2014-10-24 17:45:56

解決方案3
0 2014-10-27 22:00:08

解決方案4
-2 2014-09-22 12:01:40

如何從指令訪問ngRoute的控制器？

問題描述

4 個解決方案

解決方案1 2 已采納 2014-10-26 17:56:32

解決方案2 0 2014-10-24 17:45:56

解決方案3 0 2014-10-27 22:00:08

解決方案4 -2 2014-09-22 12:01:40

解決方案1
2 已采納 2014-10-26 17:56:32

解決方案2
0 2014-10-24 17:45:56

解決方案3
0 2014-10-27 22:00:08

解決方案4
-2 2014-09-22 12:01:40