angularjs - Angular JS - 识别子指令中隔离类别的类型

Question

我有一个自定义指令，其类别范围独立:

'use strict';

angular.module('myModule').directive('myContent', function() {
  return {
    restrict: 'E',
    templateUrl: 'myContent.html',
    scope: {
        category: '='
    },
    controller: function($scope){
      // private methods
    },
    controllerAs: 'myContentCtrl'
  };
});

在我的主要指令中，我调用相同的指令:

<div>
      <my-content category = "category1"></my-content>
</div>

<div>
     <my-content category = "category2"></my-content>
</div>

<div>
     <my-content category = "category3"></my-content>
</div>

并且 myContent.html 有:

<div class="form-group">
        <div class="col-lg-10 navbar">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active itemFirst"><a href="#link1" role="tab"
                                                data-toggle="tab">Link 1 </a>
                </li>
                <li><a href="#link2" role="tab" data-toggle="tab">Link 2 </a></li>
                <li><a href="#link3" role="tab" data-toggle="tab">Link 3 </a></li>
            </ul>
        </div>
    </div>
    <div class="form-group">
        <div class="tab-content col-lg-10">
            <div class="tab-pane active" id="link1">
                // contents here for link 1
            </div>
            <div class="tab-pane" id="link2">
                // contents here for link 2
            </div>
            <div class="tab-pane" id="link3">
                // contents here for link 3
            </div>
        </div>
    </div>

这里我的问题是，id 正在复制，因为相同的直接填充每个链接。 因此 UI 没有正确填充不同的指令和选项卡。

如何通过识别发送给每个指令的类别值来分隔每个指令的 ID。

我的要求是使 id 动态为:

id = "link1_{{category}}"

但它没有反射(reflect)。我怎样才能实现这个目标？

更新类别对象。

我的类别对象有一些数据，例如:

$scope.category1 = [
     {obj1},
     {obj2},
     {obj3},
     {obj4}
];
$scope.category2 = [
     {obj1},
     {obj2},
     {obj3},
     {obj4}
];

所以我不能使用category1对象作为ID。相反，我如何使用分隔每个类别的字符串“category1”。我希望现在代码已经清楚了。

Answer 1

我只是用一种复杂的方法解决了这个问题，但不确定是否完美。

我在类别对象中又添加了一个数据作为“类型” 现在我的类别对象是:

$scope.category1 = {
       type : "category1",
       data : [
              {obj1},
              {obj2},
              {obj3},
              {obj4}
       ]
};
$scope.category2 = {
       type : "category2",
       data : [
              {obj1},
              {obj2},
              {obj3},
              {obj4}
       ]
};

所以在 HTML 中，id 是:

    <div class="form-group">
            <div class="col-lg-10 navbar">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active itemFirst"><a href="#{{category.type}}" role="tab"
                                                    data-toggle="tab">Link 1 </a>
                    </li>
                    <li><a href="#{{category.type}}" role="tab" data-toggle="tab">Link 2 </a></li>
                    <li><a href="#{{category.type}}" role="tab" data-toggle="tab">Link 3 </a></li>
                </ul>
            </div>
        </div>
        <div class="form-group">
            <div class="tab-content col-lg-10">
                <div class="tab-pane active" id="{{category.type}}">
                    // contents here for link 1
                </div>
                <div class="tab-pane" id="{{category.type}}">
                    // contents here for link 2
                </div>
                <div class="tab-pane" id="{{category.type}}">
                    // contents here for link 3
                </div>
            </div>
        </div>
</div>