Question

我正在尝试加载-outside angular - 动态自定义指令但是尽管我使用了$compile，但仍未加载自定义指令如下：自定义指令是：

app.directive('mydirective',function (){
  return {
     template: '<div>Succeeded !</div>',
  }
})

这里是我动态加载指令的地方：

function showresultcust() {
angular.injector(['ng']).invoke(['$compile',
    function ($compile) {
        var scope = angular.element(document.getElementById("test1")).scope();
        var _html = '<div>{{name}}-</div><div mydirective >Not Succeed</div>';
        //var _html='<div >{{loaded}}</div>';
        var obj = $('#content');
        $('#content').html($compile(_html)(scope));
        // compile!!!
        $compile(obj.contents())(scope);
        scope.$digest();
        setTimeout(function () {
            scope.$apply();
        });
    }
]);
}

请注意，动态HTML中的{{name}}已正确加载，但未加载自定义指令。完整演示位于this 'plnkr.co' link

如果您可以直接在上面的'plnkr'链接中进行更正，我将不胜感激。

Answer 1

代码未编译mydirective指令，因为它不是ng模块的一部分。将包含该指令的模块添加到新注入器的依赖关系列表中。

//NOT this   
//angular.injector(['ng']).invoke(['$compile',

//Do this
angular.injector(['ng','tumblr']).invoke(['$compile',
    function ($compile) {
        var scope = angular.element(document.getElementById("test1")).scope();
        var _html='<div>{{name}}-</div><div mydirective >Not Succeed</div>';
        $('#content').html($compile(_html)(scope));
        scope.$apply();
    }
]);
}

angular.injector函数总是创建一个新的注入器，它需要依赖列表中的所有依赖项。

来自jQuery的自定义指令未正确加载

1 个答案: