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>

现在我的问题是 - ：

是否可以从中返回多个字符串（模板）中的一个模板函数本身基于属性的实际值 msg。我尝试在模板函数中访问attrs.msg 返回value.type。
如果没有，那么在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函数中。

Docs for ngSwitch

编辑：给塞巴斯蒂安+1以了解您想要的内容。然而，他提议的基本上是重新发明轮子，因为它实际上是手动编译和插入模板（这是ngSwitch为你做的）。此外，您可以通过attrs函数的link参数访问您在指令上放置的属性。

Answer 2

在template函数中，您无权访问指令的scope。如果要控制渲染的内容，可以使用条件逻辑（例如ng-switch）在全局模板中执行此操作，如simoned所建议的那样：或使用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));
    }
  };
});

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

2 个答案: