Question

我正在尝试为Angular创建一个多选指令，类似于'select'，但可以选择多个选项。

基本结构有效，但我希望/需要能够指定用于显示字符串的可选模板。例如，用户可以从选项列表中进行选择，但显示的文本将通过翻译过滤器传递。

我无法弄清楚如何让模板发挥作用，我已经与compile而不是link混淆了，但没有到达任何地方，我怀疑使用$compile可能有所帮助，但我是Angular的新手并且也遇到了一些麻烦。

Here is the current progress in Plnkr

我想更改模板中的{{item}}行，以包含display-template属性中指定的字符串，例如{{item | simpleFilter}}但不会对其进行评估。

非常感谢任何帮助。

西蒙

Answer 1

您无法在视图中使用displayTemplate: '='，因为您要在指令模板中评估此值，我建议您不要在隔离范围内传递它。写下你需要在属性和范围内评估的表达式。使用attrs.displayTemplate

创建模板

<强>标记

<multi-select ng-model="output" source="input" display-template="item | simpleFilter">
    </multi-select>

<强>指令

return {
    restrict: 'E',
    template:function(element, attrs){
      return '    <div dropdown class="form-control" tabindex="0"' +
        '     style="position:relative; padding: 0; min-height:66px; max-height:66px;">' +
        '    <div class="input-group-addon pull-right btn btn-default" type="button" dropdown-toggle style="width:33px; height:100%; border-top-width: 0; border-bottom-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;">' +
        '         <span class="caret"></span>' +
        '    </div>' +
        '    <div style="min-height:66px; max-height:66px; overflow-y: auto;">' +
        '        <div style="display: inline-block; padding: 2px; margin: 2px; border-width:1px; border-style:solid;"' +
        '              data-ng-repeat="item in ngModel">' +
        '              <span>{{item}}</span>' +
        '             <button type="button" class="close"' +
        '                 ng-click="removeItem(item)"' +
        '                 style="padding-left: 2px; padding-right: 2px;">' +
        '                 &times;' +
        '            </button>' +
        '        </div>' +
        '    </div>' +
        '    <ul class="dropdown-menu" style="top:initial; left:initial; width:100%; position:absolute; margin: 0;">' +
        '        <li ng-repeat="item in source">' +
        '            <a  ng-click="addItem(item)">{{'+ attrs.displayTemplate +'}}</a>' +
        '        </li>' +
        '    </ul>' +
        '    </div>'},


    scope: {
        source: '=',
        ngModel: '='
    },
    require: 'ngModel',
    replace: true,
    link: function(scope, element, attrs) {
        scope.addItem = function(item) {
            if (scope.ngModel === undefined) {
                scope.ngModel = [];
            }

            if (scope.ngModel.indexOf(item) === -1) {
                scope.ngModel.push(item);
            }
        };

        scope.removeItem = function(item) {
            var index = scope.ngModel.indexOf(item);
            scope.ngModel.splice(index, 1);
            if (scope.ngModel.length === 0) {
                scope.ngModel = undefined;
            }
        };
    }

};

Working Plunkr

如何在Angular指令中嵌入内容（$ compile？）

1 个答案: