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

Question

我在做一個簡單的web項目，但是我遇到了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是不是在任何更多。

我還懷疑你使用$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(); 
     }; 
    } 
    }; 
});