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}}"

但是没有体现。我怎样才能做到这一点？

正在更新类别对象。

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

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

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

Answer 1

如果我没理解错的话，您可以在控制器内的函数中设置 Id...

<div class="tab-pane active" id="{{setId}}">

并且在您的自定义指令中具有类别的隔离范围：

controller: function($scope){
    // private methods
    $scope.setId = function(){...}
},

Answer 2

我认为对于指令的所有实例，每个 <div> 都需要不同的 ID。

<div class="tab-pane active" id={{'link1_'+category}}></div>

并在隔离范围内使用@获取属性值

app.directive('myContent', function() {
  return {
    restrict: 'E',
    templateUrl: 'myContent.html',
    scope: {
        category : '@'
    },
    controller: function($scope){
      // private methods
      console.log($scope.category)
    },
    controllerAs: 'myContentCtrl'
  };
});

这是工作 plunkr

Answer 3

我只是用复杂的方法解决了它，但不确定是否完美。

我在类别对象中添加了一个数据作为 "type" 现在我的类别对象是：

$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>

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

Angular JS - Identifying type of isolated category in child directive

tabs

scope

angularjs

angularjs-directive