Question

我正在编写一个有角度的“tab”指令，该指令需要通过向父级发送对它自己的引用来与父“tabs”指令进行通信。

我试图将我的代码保存在指令的控制器中，而不是链接函数中，因为我实际上并没有对DOM做任何事情。

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

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

但是如何在指令的控制器功能中执行此操作？

Answer 1

这对我来说总是一个有趣的问题。我喜欢认为我在解决这个常见案例的过程中扮演着狂野的角色。

首先，我按照角度样式指南（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;

    }

捕获（总是有一个捕获）：

请记住，在调用链接函数之前构造指令的控制器。因此，您不能指望在控制器构造期间执行的代码中解析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

通常，如果需要在控制器之间共享数据，可以创建工厂/服务来存储数据，并将服务注入这些控制器。服务中的数据集将是单例。

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

如果child指令没有作用域数据，您还可以将指令作用域设置为false，它将继承父控制器的作用域。

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

Angular指令 - 需要从指令控制器

2 个答案: