在另一个指令中使用角度指令 [英] Use an angular directive inside another directive

问题描述

我创建了以下角度指令，ChildDirective，用于 ParentDirective

I have created the below angular directives, ChildDirective that is used inside ParentDirective

var wizardModule = angular.module('Wizard', []);

wizardModule.directive('childDirective', function ($http, $templateCache, $compile, $parse) {
return {
    restrict: 'E',
    scope: [],
    compile: function (iElement, iAttrs, transclude) {
        iElement.append('child directive<br />');
    }
}
})

wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var x = '<child-directive></child-directive><child-directive></child-directive>';
        element.append(x);
    }
}

这正常工作，并且出现了几个子指令.

This was working normally and several child directives appeared.

我想更新 ParentDirective，以从服务器获取 childDirectives 的列表.因此，我更新了 ParentDirective 代码以进行 ajax 调用，然后绘制 ChildDirectives

I wanted to update the ParentDirective, to get the list of childDirectives from the server. Hence I updated the ParentDirective code to do an ajax call and then draw the ChildDirectives

var elem;
wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var controllerurl = attrs.controllerurl;
        elem = element;

        if (controllerurl) {
            $http.get(controllerurl + '/GetWizardItems').
            success(function (data, status, headers, config) {
                var x = '<child-directive></child-directive><child-directive></child-directive>';
                elem.append(x);
                $compile(x);
            });
        }
    }
}
});

问题是 childDirectives 不再出现，尽管在 debeggur 中它正在进入 childDirective

The problem is that the childDirectives does not appear any more, although in the debeggur it is entering to the compile method of the childDirective

推荐答案

您必须将编译的元素链接到作用域.并且由于您不再修改模板元素，您应该将新元素附加到链接元素.你可以这样做:

You have to link the compiled element to the scope. And since you're no longer modifying the template element you should append the new elements to the linked element. YOu can do it like this:

var elem;
wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var controllerurl = attrs.controllerurl;
        elem = element;

        if (controllerurl) {
          return function(scope,element){
            $http.get(controllerurl + '/GetWizardItems').
            success(function (data, status, headers, config) {
                var x = angular.element('<child-directive></child-directive><child-directive></child-directive>');
                element.append(x);
                $compile(x)(scope);
            });
          }
        }
    }
}
});

这篇关于在另一个指令中使用角度指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！