Question

我有一些要显示的通知消息，它使用差异模板通过差异通知类型。

现在我已经将模板转换为指令，我使用ng-switch显示正确的指令，如下所示：

<ul>
<li ng-repeat="notify in notifies | orderBy: 'id'" >
    <div ng-switch on="notify.type">
        <div ng-switch-when="1">
            <span ng-notify-A ng-notify="notify"></span>
        </div>
        <div ng-switch-when="2">
            <span ng-notify-B ng-notify="notify"></span>
        </div>
        <div ng-switch-when="3">
            <span ng-notify-C ng-notify="notify"></span>
        </div>
    </div>
</li>
</ul>

然而我真的认为它可以更好，设置java脚本逻辑然后输出，而不是ng-switch。它应该与一些数组一起存储[type =＆gt;指令名称]像这样：

array[1]="ng-notify-A";
array[2]="ng-notify-B";
array[3]="ng-notify-C";

我接受了这个，并且不知道接下来我能做什么...... 就像我不知道我是否可以在指令上添加一些逻辑。

Answer 1

我不知道这个想法是否是最好的解决方案，但它至少会更干。

创建名为ng-notify-A.html，ng-notify-B.html等的三个模板。然后执行<ng-include src="notify.type + '.html'">。

Answer 2

你可以使用ngInclude这样做：

.constant('tpl_array', {
  '1': 'notify1.tpl.html',
  '2': 'notify2.tpl.html',
  '3': 'notify3.tpl.html'
});

.directive("myNotification", function(tpl_array) {
  return {
    template: '<ng-include src="getTemplateUrl()" />',
    scope: {
      notify: '='
    },
    restrict: 'E',
    controller: function(scope) {
      scope.getTemplateUrl = function() {
        return tpl_array[scope.notify.type];
      };
    }
  };
});

# some.tpl.html
<ul>
  <my-notification ng-repeat="notify in notifies | orderBy: 'id'" notify="notify">
</ul>

# notify1.tpl.html
<li><span ng-notify-A ng-notify="notify"></span></li>

# notify2.tpl.html
<li><span ng-notify-B ng-notify="notify"></span></li>

# notify3.tpl.html
<li><span ng-notify-C ng-notify="notify"></span></li>

在angularjs上调用Logic的指令

2 个答案: