Question

说我有一个指令“foo”：

app.directive("foo", function($compile) {
    var innerTemplate = $compile('<div class="foo"></div>');
    return {
        restrict: "E";
    };
}));

为什么$ compile调用会失败，抱怨fooDirective取决于fooDirective，即使该指令被声明限制为“E”？

编辑：添加了示例小提琴：https://jsfiddle.net/n4bvkbp7/1/

Answer 1

在编译之前必须完全定义指令“foo”。尝试将您的compile语句放在指令链接函数中：

app.directive("foo", function($compile) {
    return {
        restrict: "E",
        link: function() {
              var linkFn = $compile('<div class="foo"></div>');
         }
    };
}));

Answer 2

我不明白为什么你需要一个$ compile服务：

    ngModule.directive('foo', ['$compile', function($compile) {
        return {
            restrict: 'E',
            template: '<div class="foo">foo</div>',
            link: function(scope, element, attrs){

              //TODO:
            }

        }

}]);

Answer 3

您在return语句之外使用$compile函数，这意味着它将在编译时执行，您只能编译元素postLink函数。

<强>指令

var app = angular.module("app", []);
app.directive("foo", function($compile) {

    return {
        restrict: "E",
        link: function(scope, element, attrs){
            var innerTemplate = $compile('<div class="foo">HELLO WORLD</div>');
            element.append(innerTemplate(scope));
            //do other logic here
        }
    };
});

JsFiddle

即使指令声明为限制“E”，也不能使用与指令相同的类编译模板

3 个答案: