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

时间:2015-12-20 03:20:40

标签: angularjs

我对AngularJS相对较新,并致力于在页面中创建标签。直到现在我已经通过在互联网上搜索了很多来解决了我对angularjs的问题,但我无法解决这个问题。希望任何人都可以帮助我提出想法和更好的angularjs知识。

我有两个自定义指令tabset和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");
    }
  }
});

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

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

但是,当我运行代码时,tab指令的链接功能没有运行。 &#39;要求:^ tabset&#39;选项从tabset获取控制器,但tab指令的链接功能不起作用。

0 个答案:

没有答案