在 ng-repeat 中创建指令答案

【问题标题】：create directive in ng-repeat在 ng-repeat 中创建指令
【发布时间】：2014-04-29 20:59:23
【问题描述】：

我有一个指令，我想用它来生成其他指令。以下不起作用：

    <span ng-repeat="picker in pickers | filter:{type:'click'}">
      <span picker.name></span>
    </span>

如何使用 picker.name 在这个 ng-repeat 中创建更多指令？

-- 背景

我们有一个主要的“picker service”，它注入了几个服务“picker Local”、“picker Dropbox”、“picker Googledrive”。

function pickerService($filter, pickerDropboxService, pickerGoogledriveService, pickerLocalService){
    // list pickers
    this.pickers = [pickerDropboxService, pickerGoogledriveService, pickerLocalService];
}

我们有一个选择器指令，它基本上循环选择器并尝试为每个选择器创建一个自定义指令：

        <span ng-repeat="picker in pickers">
          {{picker.name}}
          <span {{picker.name}}></span>
        </span>

每个选择器（Local、Dropbox、Googledrive）都声明了一个指令，我想从我的主选择器指令中使用这个指令。

谢谢

【问题讨论】：

这是一个有效的属性名称吗？根据 AngularJS 约定，它应该是选择器名称。你有一个名为 pickerName 的指令吗？
是的，它是一个有效的属性名称。{{picker.name}} 打印正确的指令名称，但如果我这样做，选择器。 name 没有被正确的指令名称替换。
据我所知，您不能使用范围变量来动态形成 HTML 属性名称。请提供更多代码以更好地展示您要完成的工作。
谢谢，请查看更新后的问题
看来我应该利用指令 compile

标签： angularjs directive

【解决方案1】：

最好的解决方案似乎是在指令中使用“编译”：

directive.html：

<span id='pickerButtons'></span>

directive.js：

    'compile': function(element, attributes) {

        var pickerButtons = document.querySelector('#pickerButtons');
        var span = document.createElement('span');
        span.innerHTML = '';

        for (var i=0,  tot=pickerService.pickers.length; i < tot; i++) {
            if(pickerService.pickers[i].type === 'button'){
                span.innerHTML += '<span><span picker-' + pickerService.pickers[i].name + '></span></span>';
            }
        }

        pickerButtons.appendChild(span);

        var linkFunction = function($scope, element, attributes) {
            $scope['pickFrom'] = function(pickerObject){pickerService.pickFrom(pickerObject);};
            $scope['pickList'] = pickerService.getPickList();
        };

        return linkFunction;
    }

【讨论】：