Question

我创建了一个嵌套指令（multitabbed form指令），这里简化了：

<outer>
  <inner heading="a" src="'a.html'" active="true"></inner>
  <inner heading="b" src="'b.html'"></inner>
</outer>

这个创建ul/li标签集，当我点击标签时，li将active，与该标签相关的div也会显示。

这是我的指示：

(function(){
  'use strict'

  angular 
    .module("testDirective", [])
    .directive("outer", outer)
    .directive("inner", inner);

  function outer(){
    return {
      templateUrl: 'outer.html', 
      transclude: true,
      controller: function($scope){
        var tabs = $scope.tabs = [];  
        this.addTab = function(_active, _name) {
          tabs.push({
            active : _active,  
            name : _name
          }); 
        }  

        $scope.toggle = function(ix){
          for (var i = 0; i <= tabs.length - 1; i++) {
                    tabs[i].active = false; 
                } 

                tabs[ix].active = true;
        }  
      } 
    }
  } 

  function inner(){
    return {
      require: '^outer',
      scope: {
        src : '=',
        active : '=',
      },
      templateUrl: 'inner.html',
      link : function(s, e, a, ctrl) {  
        ctrl.addTab(a.active, a.heading); 
      }
    }
  } 
})();

我成功实现了除了导致我头痛的一部分之外的所有内容：如何显示/隐藏内容？这是plunkr。

Answer 1

这是一个解决方案：

对index.html的修改：

<outer>
  <inner heading="a" src="'a.html'" index="0" active=true></inner>
  <inner heading="b" src="'b.html'" index="1"></inner>
</outer>

的innerHTML：

<ng-include ng-class="isActive()" src="src"></ng-include>

在外部功能中添加了以下功能：

this.isActive = function (index) {
      if(tabs[index] && tabs[index].active){
        return "ng-show";
      } else {
        return "ng-hide";
      }
};

添加了修改后的内部链接功能，如下所示：

link : function(s, e, a, ctrl) {  
    ctrl.addTab(a.active, a.heading);
    s.isActive = function () {
      return ctrl.isActive(a.index);
    };
}

http://plnkr.co/edit/c311iIKEGRGyBPMFbzi8?p=preview

同时添加两个元素

1 个答案: