动态自定义 Angular 指令/$compile 不适用于 .innerHTML()

Question

我有一个计时器应用程序。当倒数计时器达到一定数量时，计时器将停止，并且将使用 .innerHTML() 在另一个 div 标签内创建一个 div 标签。此 div 标签包含一个名为 dynamic 的自定义 Angular 指令。该指令应该 $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>

什么给了？

我似乎无法在 Stack Overflow 上找到任何告诉您如何在 $scope 之后或之前将 link 一个 HTML 元素附加到 [=] 27=] 使用 .innerHTML().

Answer 1

当您手动添加标记时，例如

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

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

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

动态自定义 Angular 指令/$compile 不适用于 .innerHTML()

Dynamic custom Angular directive/$compile not working with .innerHTML()

html

javascript

innerhtml

angularjs

angularjs-directive