如何在指令中綁定表達式的一部分

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]，你應該很好去。