我创建了下面的角度指令, ChildDirective ,在 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); } }
这正常工作,并且出现了几个子指令。
我想更新 ParentDirective ,以从服务器获取 childDirective 的列表。因此,我更新了 ParentDirective 代码以进行Ajax调用,然后绘制 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
您必须将已编译的元素链接到作用域。由于不再修改模板元素,因此应将新元素附加到链接的元素。你可以这样做:
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); }); } } } } });