如何在 Angular 指令 ($compile?) 中嵌入内容

Question

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

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

我不知道如何让模板工作，我用 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?) 中嵌入内容

How to embed content inside an Angular directive ($compile?)

angularjs

angularjs-directive