Angular 指令 - 需要从指令控制器访问所需的控制器

Question

我正在编写一个 angular "tab" 指令，它需要通过将对自身的引用发送给父指令来与父 "tabs" 指令通信。

我试图将我的代码保存在指令的控制器中，而不是 link 函数中，因为我并没有真正对 DOM.

做任何事情

问题是，如果我使用 {require: '^tabs'}，我可以像这样获得所需指令控制器的副本..

link: function(scope, element, attr, ctrls) {
    var controller = ctrls[0];
}

但是我如何在指令的控制器函数中执行此操作？

Answer 1

这对我来说一直是个有趣的问题。我喜欢认为我对这种常见情况的解决方案是在疯狂地玩。

首先，我回到 angular 风格指南 (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-controller-syntax)

中建议的 controllerAs 视图语法

使用此语法，您可以将指令定义为：

    var directive = {
        require: '^myParentDirective',
        restrict: 'EA',
        controller: 'MyController as myCtrl',
        templateUrl: 'super/awesome/app/my/my.directive.html',
        scope: {
            myProp: '='
        }, // isolate scope
        link: link
    };

    function link(scope, element, attr, myParentCtrl) {

        scope.myCtrl.myParent = myParentCtrl;

    }

问题（总有问题）：

请记住，指令的控制器是在调用 link 函数之前构造的。所以你不能期望 myParent 属性在控制器构造期间执行的代码中得到解析。

function MyController($scope) {

    var _self = this;

    _self.myParent.register(_self); // myParent is not defined

}

而是等到您确定 myParent 已解决

function MyController(scope) {

    var _self = this;

    _self.initialize = initialize;

    return;

    function initialize() {

        _self.myParent.register(_self); // myParent might be defined

    }

}

然后做类似的事情

function link(scope, element, attr, myParentCtrl) {

    scope.myCtrl.myParent = myParentCtrl;

    scope.myCtrl.initialize();

}

让我知道这是否有帮助，是否有偏差，或者您是否需要更多说明。

(另外，语法错误请见谅)

Answer 2

一般来说，如果你需要在控制器之间共享数据，你可以创建一个factory/service来存储数据，并在那些控制器中注入服务。服务中的数据集将是单例的。

angular.module('myApp', [])
  .factory('myService', function() {
    var myData;
    return {
      getData: function () {
        return this.myData;
      },
      setData: function (data) {
        this.myData = data;
      }
    }
  .controller('controller1', function(myService) {
  })
  .controller('controller2', function(myService) {
  })
});

如果子指令没有范围数据，也可以将指令范围设置为false，它会继承父控制器的范围。

angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: false,
    controller: 'controller1'
  };
});

Angular 指令 - 需要从指令控制器访问所需的控制器

Angular directive - need to access required controller from directive controller

javascript

angularjs

angular-directive