다른 지시문 안에 각도 지시문 사용

다른 지시문 안에 각도 지시문 사용

ParentDirective 내에서 사용되는 ChildDirective는 다음과 같습니다.

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);
    }
}

이것은 정상적으로 동작하고 있어, 몇개의 아동 지시가 표시되었습니다.

서버에서 child Directive 목록을 가져오기 위해 Parent Direct를 업데이트하고 싶었습니다.따라서 Ajax 콜을 실행하고 Child Directives를 그리도록 Parent Directive 코드를 업데이트했습니다.

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);
            });
        }
    }
}
});

문제는 child Direct가 debugur에서 child Direct의 컴파일 방식으로 이행하고 있는데 child Direct가 더 이상 표시되지 않는다는 것입니다.

컴파일된 요소를 스코프에 링크해야 합니다.템플릿 요소를 더 이상 수정하지 않으므로 링크된 요소에 새 요소를 추가해야 합니다.다음과 같이 할 수 있습니다.

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);
            });
          }
        }
    }
}
});

언급URL : https://stackoverflow.com/questions/16787276/use-an-angular-directive-inside-another-directive