Question

我是Angular的新手，我想知道是否可以在指令中绑定表达式的一部分？

目前没有指令我这样做（它正在工作）：

<div>
    <ui-select ng-model="myModel" search-enabled="false">
        <ui-select-match>
            <span>{{'myLabelPrefix.' + $select.selected.myLabelCode | translate}}</span>
        </ui-select-match>
        <ui-select-choices repeat="item in (myList | filter: $select.search) track by item.myLabelId"
            position="down">
            <span>{{'myLabelPrefix.' + item.myLabelCode | translate}}</span>
        </ui-select-choices>
    </ui-select>
</div>

我想做什么：

我的模板：

<div>
<ui-select ng-model="ngModel" search-enabled="false">
    <ui-select-match>
        <span>{{labelPrefix + $select.selected.labelCode | translate}}</span>
    </ui-select-match>
    <ui-select-choices repeat="item in (list | filter: $select.search) track by item.labelId" position="down">
        <span>{{labelPrefix + item.labelCode | translate}}</span>
    </ui-select-choices>
</ui-select>
</div>

我的指示：

app.directive('selectField', function() {
return {
    replace: true,
    templateUrl: 'app/components/select-field/select-field-view.html',
    restrict: 'E',
    require : 'ngModel',
    scope: {
        ngModel: "=ngModel",
        labelPrefix: '=',
        labelId: '=',
        labelCode: '=',
        list: '='
    },
    link: function(scope, el, attr) {
        console.log(attr);
    }
};
});

我的HTML标记：

<select-field ng-model="myModel"
    label-prefix="'myLabelPrefix'"
    label-id="myLabelId"
    label-code="myLabelCode"
    list="myList">
</select-field>

那么，如何使用指令属性绑定label-prefix，label-id，label-code和list属性？

由于

Answer 1

是的，你可以做到。通过在指令中添加transclude选项，需要将ng-transclude添加到html指令

    angular.module('transcludeExample', [])
   .directive('pane', function(){
      return {
        restrict: 'E',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray">{{title}}</div>' +
                    '<ng-transclude></ng-transclude>' +
                  '</div>'
      };
  })

http://plnkr.co/edit/?p=preview

Answer 2

我解决您问题的首选方法是使用自定义过滤器包装translate功能并在其中传递前缀。实现将如下所示：

angular.module('xy').filter('translateWithPrefix, ['$filter', function($filter){
    return function(input, prefix) {
        if(!input) return null;
        if(!prefix) return $filter('translate')(input);
        return $filter('translate')(prefix + input);
    };
}]);

用法如下：

<ui-select-match>
    {{ $select.selected.labelCode | translateWithPrefix: labelPrefix }}
</ui-select-match>

替代：基于以下链接上的接受答案，您还可以使用建议的编译指令重新编译例如。 UI的选择匹配： angular ng-bind-html and directive within it

您的指令使用的模板应该类似于：

<ui-select-match>
    <span ng-bind="{{labelPrefix}} + $select.selected.labelCode | translate" compile></span>
</ui-select-match>

我没有尝试过这种方法。

更新

至于绑定labelId使用的track by表达式......我们正在寻找的是一个类似于此的表达式：需要编译一次，然后才由ng-处理重复指令。但是，这通常不是必需的。根据您的项目的复杂程度，我建议完全放弃“追踪”（牺牲一些性能）或者用“追踪$ index”替换它，从而摆脱这个问题。

更新2

至于labelCode - 我假设您想传递一些字符串键，例如。命令'name'然后使用此键查找每个项目的属性。首先，我将labelCode的绑定从'='更改为'@'。然后在你的指令中使用它作为item[labelCode]，你应该好好去。

如何在指令中绑定表达式的一部分

2 个答案: