Question

我有一个计时器应用程序。当倒计时器达到一定数量时，计时器将停止，并使用div在另一个div标签内创建.innerHTML()标签。此div标记包含名为dynamic的自定义Angular指令。该指令应$compile带有button标记的模板，该标记在单击时调用Angular控制器timerControl中的函数。

当前发生的事情是计时器启动并触发我的if控制器中的以下timerControl声明......

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

它应该运行以下指令并将button附加到以下指令的html中......

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>

是什么给出了？

我无法在Stack Overflow上找到任何内容，告诉您如何在将所述元素附加到HTML之后或之前将$scope元素链接到DOM .innerHTML()。

Answer 1

手动添加标记时，例如

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

您绕过了所有AngularJS代码。你应该这样做：

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

动态自定义Angular指令/ $ compile不能与.innerHTML（）一起使用

1 个答案: