Angular指令 - 如何根据属性值选择模板？

Question

我正在开发一个小部件,我想一个接一个地呈现一些消息/文本.我想根据消息类型更改消息的模板.

我当前的指令设置如下

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>

现在我的问题是 - :

1. 是否可以根据属性的实际值从模板函数本身返回多个字符串(模板)中的一个 msg.我尝试访问attrs.msg模板功能,然后返回value.type.

2. 如果没有那么,操作下面的模板是好linker还是我需要将它移动到compile功能？

Answer 1

要基于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函数中.

ngSwitch的文档

编辑:给塞巴斯蒂安+1以了解你想要的东西.然而,他提出的建议主要是重新发明轮子,因为它基本上是手动编译和插入模板(这ngSwitch对你有用).此外,您可以通过函数的attrs参数访问您在指令上放置的属性link.