Angular指令 - 如何根據屬性值選擇模板？

我正在開發一個小部件，我想呈現一些消息/文本此起彼伏。我想根據消息的類型更改消息的模板。Angular指令 - 如何根據屬性值選擇模板？

我目前的指令設置如下

directive('cusMsgText', function(){ 
    return { 
    restrict: 'E', 
    template:function(elements, attrs){ 
     return '<div></div>'; 
    }, 
    link: function($scope, iElm, iAttrs, controller) { 
     //add children to iElm based on msg values in $scope 
    } 
    }; 
});

該指令的使用步驟如下

<div ng-repeat="(key, value) in chatUser.msg"> 
    <data-cus-msg-text msg="value.type"></data-cus-msg-text> 
</div>

現在我的問題是 - ：

是否有可能返回一個多個字符串（模板）從模板函數本身基於實現屬性 msg的AL值。我試着在模板函數訪問attrs.msg它返回value.type。
如果不是那麼操縱linker或我需要把它移動到compile函數是好的嗎？

來源

2014-05-02 Uday Sawant

爲了使基於value.type不同的模板，你可以使用ng-switch聲明：

<div ng-switch="value.type"> 
    <div ng-switch-when="type1"> 
     //...template for type 1 here... 
    </div> 
    <div ng-switch-when="type2"> 
     //...template for type 2 here... 
    </div> 
</div>

另外，如果我理解你的第二個問題：未編譯指令的操作應在compile函數來完成，編譯後發生的所有操作應該在link函數中進行。

Docs for ngSwitch

編輯：+1塞巴斯蒂安理解你想要的東西。然而，他所提出的基本上是重新發明了輪子，因爲它本質上是編譯和手動插入模板（這就是ngSwitch爲你所做的）。此外，您還可以通過link功能的attrs參數訪問您的指令，你把屬性。

來源

2014-05-02 10:10:28 link

我無法訪問實際值提供屬性的指令。在模板函數下，value.type是一個字符串。 –

在你提供的例子，你的指令有一個'msg'屬性。如果我明白了，可以通過該屬性將該類型傳遞給指令。您可以在該值上進行切換，但我沒有看到問題所在。另外，「模板函數」是什麼意思？ '鏈接'功能？ – link

在template功能，你不必訪問您的指令的scope。如果你想控制由simoned什麼得到渲染，你可以做到這一點使用條件邏輯（如ng-switch）在全球模板的建議或使用link功能：

.directive('cusMsgText', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     msg: '=', 
     item: '=' 
    }, 
    link: function(scope, element, attrs) { 
     templates = { 
     x: '<div>template x {{item.name}}</div>', 
     y: '<div>template y {{item.name}}</div>' 
     }; 

     var html = templates[scope.msg]; 
     element.replaceWith($compile(html)(scope)); 
    } 
    }; 
});

來源

2014-05-02 10:47:14 Sebastian

是不是可以解析模板函數中的屬性值？ +1。 –

Angular指令 - 如何根據屬性值選擇模板？

回答

相關問題