Question

我正在做一个简单的网络项目，但我遇到了Angular指令的问题。它不能重新渲染html，它只在第一次渲染。这是我的代码： http://plnkr.co/edit/Jc9wNoMrMlwAbRDsoviU?p=preview

app.directive('dyTemplate', ['$compile',function($compile) {
    var getTemplate = function(contentType) {
      templateMap = {
        1: '<div><a href="" ng-click="changeTemplate(2)"> Change to Template 2</a></div>',
        2: '<div><a href="" ng-click="changeTemplate(3)"> Change to Template 3</a></div>',
        3: '<div><a href="" ng-click="changeTemplate(1)"> Change to Template 1</a></div>'
      };
      return templateMap[contentType];
    }
    return {
      restrict: 'EA',
      link: function(scope, element, attrs) {
        // default load template
        element.html(getTemplate(1));
        element.replaceWith($compile(element.html())(scope));
        scope.changeTemplate = function(templateId) {
          element.html(getTemplate(templateId));
          element.replaceWith($compile(element.html())(scope));
        }
      }
    }
  }
]);

Answer 1

您正在使用element.replaceWith()，这是第一次从DOM中删除该元素，但之后的调用并未更改DOM，因为element不是{\ n}在它里面。

我还怀疑你使用$compile过度复杂化了。在大多数情况下，只使用指令中的template选项会更好（因为它更简单）。然后Angular为您处理编译。在模板中，您可以使用{{}}插值，调用函数，并根据需要更改使用ngIf显示的内容，就像任何已编译的模板一样，并且不存在通常需要手动编译或修改DOM。

可以在http://plnkr.co/edit/17empWUlkfR904qtI2Oe?p=preview

看到这方面的一个例子

var app = angular.module('myapp',[]); 
app.directive('dyTemplate', function() {
  return {
    restrict: 'EA',
    scope:{},
    template: '<div><a href="" ng-click="showNextTemplate()"> Change to Template {{nextTemplateId()}}</a></div>',
    link: function(scope, element, attrs) {
      scope.templateId = 1;

      scope.nextTemplateId = function() {
        var templateMap = {
          1: 2,
          2: 3,
          3: 1
        };
        return templateMap[scope.templateId];
      };

      scope.showNextTemplate = function() {
        scope.templateId = scope.nextTemplateId();
      };
    }
  };
});

如何在Angularjs中使用新模板重新渲染指令？

1 个答案: