使用AngularJs动态指令进行自定义视图

Question

我正在使用服务器端生成的JSON来使用Angular 1.2.29的不同指令填充自定义视图。考虑到性能和良好实践，我有几个问题是关于这样做的正确方法。

• 大约30个项目涉及5种不同类型的指令
• JSON将保持相同的约90％，并且在用户选项卡切换之间重新生成所有DOM元素有点不好。
• 我想避免创建手表，但因为我使用的是1.2.X我应该考虑使用angular-once
• 由于我要考虑cloneAttachFn
，我将重复使用相同的指令

function processItems(items) { angular.forEach(items, function(item) { switch(item.type) { case 'directive1': var newDirective = angular.element('<directive-one></directive-one>'); newDirective.attr('value', item.value); var compiledHtml = $compile(newDirective)(scope); element.append(compiledHtml); break; case 'directive2': var newDirective = angular.element('<directive-two></directive-two>'); newDirective.attr('value', item.value); var compiledHtml = $compile(newDirective)(scope); element.append(compiledHtml); break; } }) }

我创建了一个Plunker来向你们展示我目前的做法。非常欢迎评论和回答！ https://plnkr.co/edit/Za4ANluUkXYP5RCcnuAb?p=preview

Answer 1

在生成动态过滤器类型功能时，我多次遇到此问题。你的代码有效，但我认为它过于设计而且不太可读。不需要GenericItems指令。我会尝试将功能移动到视图中，并清楚地说明类型更改时会发生什么。 Here is my solution as a Plunker

<强>控制器

<div ng-controller="appCtrl as app">
    <p>{{app.name}}</p>
    <button ng-click="app.add1()">Directive 1</button>
    <button ng-click="app.add2()">Directive 2</button>
    <button ng-click="app.remove()">Remove</button>
    <div ng-repeat="item in app.items">
      <directive-one value="item.value" ng-if="item.type==='directive1'"></directive-one>
      <directive-two value="item.value" ng-if="item.type==='directive2'"></directive-two>
    </div>
</div>

<强> app.js

app.controller('appCtrl', function() {

  var vm = this;
  vm.items = [];

  vm.name = 'Dynamic directive test';
  vm.add1 = function() {
    vm.items.push({type: 'directive1', value: Math.random()})
  };

  vm.add2 = function() {
    vm.items.push({type: 'directive2', value: Math.random()})
  };

  vm.remove = function() {
    vm.items.pop();
  };
});

app.directive('directiveOne', function() {
  return {
    scope: {
      value: '='
    },
    restrict: 'E',
    template: '<p>d1: {{value}}</p>'
  }
});

app.directive('directiveTwo', function() {
  return {
    scope: {
      value: '='
    },
    restrict: 'E',
    template: '<p>d2: {{value}}</p>'
  }
});