javascript - Angular Directive(指令) : switch between two templates dynamically

Question

我正在尝试创建一个名为 availableTo 的指令可以根据某些消息在两个不同的模板之间切换。例如，如果该字段是 input与 ng-model指令，我首先需要使用 <span> 将其更改为只读标签。到目前为止，我的代码可以将 View 切换为只读，但我似乎无法将其切换回 input :

var directive = {
      restrict: 'A',
      require: '?ngModel',
      link: linkerFn,
      replace: true
    };

function linkerFn(scope, element, attrs, ngModelCtrl) {

        var clonedElement = angular.copy(element);
        var preOuterHTML = clonedElement[0].outerHTML; //this can save the <input> field html code

        scope.$on('mode_changed', function() {
          var curUserRole = userservices.getUserRole();

          if (attrs.availableTo == curUserRole) {
                var e = $compile(preOuterHTML)(scope);
                element.replaceWith(e);
          } else {
                var template = '<span>' + ngModelCtrl.$viewValue + '</span>';
                var e = $compile(template)(scope);
                element.replaceWith(e);
          }

        }); //scope.$on
    } //linkerFn

对于 input字段:

  <input name="test1" class="form-control" ng-model="name" placeholder="Name 1" available-to="ADMIN"/>

我还注意到，一旦我更改了 else 中的模板，上面的 block ，元素重新渲染，并且 preOuterHTML不再包含原始元素 html 。这对我来说似乎是不可能完成的任务，但我想听听一些专家的意见。谢谢

Answer 1

element.replaceWith(e);不要那样做。在 Angular 中，如果您发现自己尝试直接修改 DOM，那么根据定义您就做错了。您必须坐下来，让 Angular 来完成工作。

如果您需要替换指令的整个模板，一种相当简单的方法是将 ng-include 与包含所需条件的范围变量一起使用 templateUrl ，例如

var directive = {
  // ...
  template: '<div ng-include="myTemplateUrl"></div>',
  link: function(scope, el) {
    if (/* whatever */) {
      scope.myTemplateUrl="templates/foo.html";
    } else {
      //...etc
    }
  },
};

(这确实会向树中添加一个额外的 DOM 节点，但这通常是无害的。)

不过，就您的情况而言，您可能不需要走那么远；一个简单的ng-if您的模板内可能足以在只读 <span> 之间进行交换和<input> .