angularjs – 在另一个指令中使用角度指令

发布时间：2020-12-17 08:24:40 所属栏目：安全来源：网络整理

导读：我创建了以下的角度指令，ParentDirective在ParentDirective中使用 var wizardModule = angular.module('Wizard',[]);wizardModule.directive('childDirective',function ($http,$templateCache,$compile,$parse) {return { restrict: 'E',scope: [],compile

我创建了以下的角度指令，ParentDirective在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',$compile) {
return {
    restrict: 'E',compile: function (element,attrs) {
        var x = '<child-directive></child-directive><child-directive></child-directive>';
        element.append(x);
    }
}

这是正常工作，有几个儿童指令出现。

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

var elem;
wizardModule.directive('parentDirective',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的编译方法

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

var elem;
wizardModule.directive('parentDirective',attrs) {
        var controllerurl = attrs.controllerurl;
        elem = element;

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!