在angularJS中的自定义指令之间进行通信

我对AngularJS相对较新，正在页面中创建选项卡。到目前为止，我已经通过在互联网上搜索很多来解决我与angularjs的问题，但我无法解决这个问题。希望任何人能帮助我的想法和更好的知识angularjs

我有两个自定义指令tabset和tabTabset'是维护选项卡的指令，“tab”用于单个选项卡

  app.directive('tabset', function() {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'tabset.html',
    bindToController: true,
    scope: {},
    controller: function($scope){
      $scope.tabs = [];
      this.addTab = function(tab) {
        $scope.tabs.push(tab);
      }
       console.log("In tabset controller");
    },
    link : function(scope){
      console.log("In the tabset link");
    }
  } 
});

//Custom Directive for the tab controls
app.directive('tab', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<h2>Welcome to Stackoverflow</h2> <div role="tabpanel" ng-transclude></div>',
    require : '^tabset',
    scope: {},
    link : function(scope, elem, attr, tabsetCntrl) {  
      tabsetCntrl.addTab(scope);
      console.log("In the tab link");
    }
  }
});

app.directive（'tabset'，function（）{
返回{
限制：'E'，
是的，
templateUrl:'tabset.html'，
bindToController：对，
作用域：{}，
控制器：功能（$scope）{
$scope.tabs=[]；
this.addTab=函数（tab）{
$scope.tabs.push（tab）；
}
log（“在tabset控制器中”）；
},
链接：功能（范围）{
log（“在tabset链接中”）；
}
} 
});
//选项卡控件的自定义指令
应用程序指令（'tab'，函数（）{
返回{
限制：'E'，
是的，
模板：“欢迎使用Stackoverflow”，
要求：“^tabset”，
作用域：{}，
链接：函数（作用域、元素、属性、tabsetCntrl）{
tabsetCntrl.addTab（范围）；
console.log（“在选项卡链接中”）；
}
}
});

我在HTML页面中调用这些指令，如下所示：

<tabset>
     <tab>
        This is one tab
     </tab>
     <tab>
        This is another tab
     </tab>
</tabset>

这是一个标签
这是另一个标签

---

但是，当我运行代码时，tab指令的link函数没有运行。“require:^tabset”选项从tabset获取控制器，但tab指令的链接功能不起作用。

尝试将

controllerAs:'$ctrl'

添加到tabset指令中

比如：

angular.module('app').directive('tabset', function() {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'tabset.html',
    bindToController: true,
    controllerAs: '$ctrl', // <---- HERE
    scope: {},
    controller: function($scope){
      $scope.tabs = [];
      this.addTab = function(tab) {
        $scope.tabs.push(tab);
      }
       console.log("In tabset controller");
    },
    link : function(scope){
      console.log("In the tabset link");
    }
  } 
});

angular.module（'app'）。指令（'tabset'，function（）{
返回{
限制：'E'，
是的，
templateUrl:'tabset.html'，
bindToController：对，
controllerAs:“$ctrl”，//Prudhvee，看一下我做的这个演示，了解如何使用嵌套指令制作角度制表符

app.directive('tabset', function() {
 return {
  restrict: 'E',
  transclude: true,
  scope: {},
  controller: [ "$scope", function($scope) {
    var panes = $scope.panes = [];

    $scope.select = function(pane) {
      angular.forEach(panes, function(pane) {
        pane.selected = false;
      });
      pane.selected = true;
    }

    this.addPane = function(pane) {
      if (panes.length == 0) $scope.select(pane);
      panes.push(pane);
    }
  }],
  template:
    '<div class="tabbable">' +
      '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
          '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
        '</li>' +
      '</ul>' +
      '<div class="tab-content" ng-transclude></div>' +
    '</div>',
  replace: true
};
});
app.directive('tab', function() {
return {
  require: '^tabset',
  restrict: 'E',
  transclude: true,
  scope: { title: '@' },
  link: function(scope, element, attrs, tabsCtrl) {
    tabsCtrl.addPane(scope);
  },
  template:
    '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
    '</div>',
  replace: true
 };
})

app.directive（'tabset'，function（）{
返回{
限制：'E'，
是的，
作用域：{}，
控制器：[“$scope”，函数（$scope）{
变量窗格=$scope.panes=[]；
$scope.select=函数（窗格）{
角度.forEach（窗格、函数（窗格）{
pane.selected=false；
});
pane.selected=true；
}
this.addPane=函数（窗格）{
如果（panes.length==0）$scope.select（pane）；
窗格。推（窗格）；
}
}],
模板：
'' +
“
”+
“
”+
'' +
“
”+
“
”+
'' +
'',
替换：正确
};
});
应用程序指令（'tab'，函数（）{
返回{
要求：“^tabset”，
限制：'E'，
是的，
作用域：{title:'@'}，
链接：函数（范围、元素、属性、tabsCtrl）{
tabsCtrl.addPane（范围）；
},
模板：
'' +
'',
替换：正确
};
})

也许可以尝试在
选项卡集
指令定义中添加一个
controllerAs:'$ctrl'，
？你能把plunker放进去吗？明白了bro@Gary。事实上代码是正确的。版本有问题。angularJs的旧版本不支持ngTransclude作为元素。哎哟。真讨厌。酷，谢谢兄弟谢谢你的帮助，非常感谢你的帮助。