動態自定義Angular指令/ $ compile無法與.innerHTML（）一起使用

Question

我有一個計時器應用程序。 當倒數計時器到達一定數量后，計時器將停止和div標簽將另一內創建div標簽使用.innerHTML() 該div標簽包含一個名為dynamic的自定義Angular指令。 此指令應$compile帶有button標簽的模板$compile ，該button標簽在單擊時將調用Angular控制器timerControl的函數。

當前發生的情況是計時器啟動並在我的timerControl控制器中觸發以下if語句...

if(time_until_break-- < 0){  
    document.getElementById('test').innerHTML= '<div dynamic></div>'
}  

它應通過以下指令運行，並在以下指令的每個指令后向html附加一個button ...

grindModule.directive("dynamic", function($compile){
return{
    link: function(scope, element){
        var template = "<button ng-click='timerControl.resetTimer()'>Keep Working</button>";
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);
    }
}

}）;

但是相反，它僅將以下內容附加到HTML ...

<div dynamic></div>

是什么賦予了？

我似乎無法找到堆棧溢出任何東西，告訴你如何將一個鏈接HTML元素到$scope之后，或者說元素附加到前DOM使用.innerHTML()

Answer 1

當您手動添加標記時，例如

document.getElementById('test').innerHTML= '<div dynamic></div>'

您將繞過所有AngularJS代碼。 您應該這樣做：

angular.element("#test").html('<div dynamic></div>');