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

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 函数总是创建一个新的注入器，它需要依赖列表中的所有依赖项。