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

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); 
    } 
}; 
}); 

我的HT ML标签：

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

那么，如何绑定标签前缀，标签ID，标签代码和列表属性与指令属性？

谢谢

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

我的首选方法SOLVIN您的问题是使用自定义过滤器包裹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-一次且只编译再加工重复指令。但是，这通常不是必需的。根据你的物品有多复杂，我建议完全放弃“追踪”（牺牲一些性能）或用“追踪$索引”替换它，从而消除这个问题。

更新2

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