Question

我正在使用$compile来动态编译指令。我想知道的是，是否有办法检测指令何时完成编译（promise？），以便我可以将它附加到DOM。我想做这样的事情：

function newMessage() {
    var directive = $compile("<div select-contacts message=\"newShare\"></div>");

    // Compile directive
    directive($scope).then(function(compiled) {
        // After compiling, append it somewhere in the DOM
        angular.element('#new_message').html(compiled);
    });
}

我搜索了$compile的文档，我仍然不清楚如何做这样的事情，或者甚至可能。

更新

这是我目前的情况。这适用于localhost，超时设置为0，但是在生产时它只在我引入大于50ms的延迟时才有效。我有250毫秒是安全的，但这似乎是随意的。

function newMessage() {
    angular.element('#new_message_container').html($compile("<div select-contacts message=\"newShare\"></div>")($scope));
    $timeout(function() {
        angular.element('#new_message').html(compiled);
            content: angular.element('#new_message'),
            elem: angular.element('#new_message_container'),
            width: '1024px',
            height: '480px'
        });
    });
}

基本上我有一个隐藏的容器元素。我编译指令并将其放在隐藏容器中。然后在超时块中，我打开一个模态，它将根指令元素从隐藏容器移动到模态元素。当我在localhost上运行它时，它工作。模态打开，指令已经编译。生产时，在调用超时块中的代码之前，该指令似乎没有完成编译。效果是模态打开但是为空。

Answer 1

要等待编译完成并将应用于dom ，$ timeout超时应足以满足您的所有需求：

function newMessage() {
    var directive = $compile("<div select-contacts message=\"newShare\"></div>");

   // Compile directive
   $timeout(function(){
       angular.element('#new_message').html(compiled);
   }, 0);
}

0的超时在下一个角度摘要周期执行你的内部函数：换句话说，在执行绑定之后立即执行（因此所有dom元素都被编译并在dom中注入）。

AngularJS检测$ compile HTML字符串何时完成

1 个答案: