来自 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'link中直接更正，将不胜感激。

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 的自定义指令未正确加载

Custom directive from jQuery not loaded correctly

directive

angularjs