Angular JS - 识别子指令中孤立类别的类型答案

【问题标题】：Angular JS - Identifying type of isolated category in child directiveAngular JS - 识别子指令中孤立类别的类型
【发布时间】：2015-07-14 10:22:15
【问题描述】：

我有一个自定义指令，该指令具有独立的类别范围：

'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”。我希望现在代码是清晰的。

【问题讨论】：

只是为了确定：category1, category2, ... 是范围变量，对吧？
是的。但我只需要我传递的字符串。 “类别1”
对于<my-content> 指令的所有实例，您是否需要为每个<div> 设置不同的ID。
你能拼出一个 jsfiddle 来重现这个问题吗？

标签： angularjs angularjs-directive tabs scope

【解决方案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>

【讨论】：

我打算提出同样的建议：改变你的对象的结构。不错的作品。但是，使用当前代码，您最终会得到三个具有相同 id 的 <div>，它们属于同一类别

【解决方案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

【讨论】：

我需要类别对象作为隔离范围，并且有一些数据。如何获取字符串“category1”，如果使用类别：'@'，模型对象没有反映。
myContent.html 中<div> 的ID 是否获取了相应category 的值（category1 用于第一个指令，category2 用于第二个指令等等..）？
请查看演示并检查各个元素。
要保留双向绑定吗？
是的，请查看问题中现在添加的类别对象。我希望它可能会更清楚一点。

【解决方案3】：

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

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

在您的自定义指令中，类别的范围是孤立的：

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

【讨论】：