Updated Plunker

Question

Here is a plunkr showing what I am attempting

我有一个tabset，它被定义为单独的选项卡，每个选项卡都有自己的指令。

<div class="container" ng-controller='fruitController'>
        <tabset type="pills" class="tabs-left">
            <tab heading="Apple" class="hand_pointer">
                <br/>
                <div data-fruit-apple></div>
            </tab>

            <tab heading="Banana"class="hand_pointer">
                <br/>
                <div  data-fruit-banana></div>
            </tab>

            <tab heading="Cherry"class="hand_pointer">
                <br/>
                <div  data-fruit-cherry></div>
            </tab>
        </tabset>
</div>

这些指令中的每一个都可以访问$scope的{{1}}中创建的对象。

我希望能够使用ng-repeat来定义许多标签并天真地完成以下操作：

控制器

fruitController

模板

        $scope.tabs = [
                   { title:"Apple", directive: "data-fruit-apple" },
                   { title:"Banana", directive: "data-fruit-banana" },
                   { title:"Cherry", directive: "data-fruit-cherry" }
        ];

显然这会给每个标签提供不正确的（Apple）指令，我如何让Angular使用我在控制器中定义的指令？

我的指令定义如下：

        <tabset type="pills" class="tabs-left">
            <tab heading="{{tab.title}}" class="hand_pointer" active="tab.active" ng-repeat="tab in tabs">
                <br/>
                <div id="content" data-fruit-apple></div>
            </tab>
        </tabset>

我尝试过：

app.directive('fruitApple', function () {
    return {
        restrict: 'AEC',
        scope: true,
        templateUrl: 'app/fruit/appleTemplate.html'
    }
}

Answer 1

在模板中，使用指令变量将指令添加为属性或类。确保在指令声明中允许属性和类（限制）。尝试

    <tabset type="pills" class="tabs-left" ng-repeat="tab in tabs">
        <tab heading="{{tab.title}}" class="hand_pointer" active="tab.active">
            <br/>
            <div class="content" {{tab.directive}} ></div>
        </tab>
    </tabset>

或者

<tabset type="pills" class="tabs-left" ng-repeat="tab in tabs">
            <tab heading="{{tab.title}}" class="hand_pointer" active="tab.active">
                <br/>
                <div class="content {{tab.directive}}"></div>
            </tab>
        </tabset>

Answer 2

我不确定这是否可以解决您的问题，因为您表示您正在尝试做更多＆＃34;更多＆＃34;而不是问题代码和Plunker中代表的内容，但你真的没有详细说明那些＆＃34;更多＆＃34;是。

您可能不需要多个指令，或者使用require的多个单独子指令的单个指令可能会起作用。但是，对于它的价值，我在这里是如何做到的：

Updated Plunker

app.directive('fruit', function ($http, $compile) {
    return {
        restrict: 'AC',
        scope: {
          type: '@fruit'
        },
      link: function(scope, element, attrs){
        var template = scope.type+"Template.html";

        function loadTemplate(template) {
          $http.get(template)
            .success(function(templateContent) {
              element.replaceWith($compile(templateContent)(scope));                
            });    
        }

        loadTemplate(template);
      }
    };
});

在您的控制器中：

$scope.tabs = [
  { title:"Apple", type: 'apple' },
  { title:"Banana", type: 'banana' },
  { title:"Cherry", type: 'cherry' }
];

你的重复是：

<tabset type="pills">
  <tab heading="{{tab.title}}" class="hand_pointer" active="tab.active" ng-repeat="tab in tabs">
    <br />
    <div fruit="{{tab.type}}"></div>
  </tab>
</tabset>

AngularJS：如何在ng-repeat期间动态引用指令？

2 个答案:

Updated Plunker