如何动态地加载指令到页 [英] How to dynamically load directive into page
问题描述
我有一个控制器，一个HTML文件和模板URL的指令。我想加载/控制器条件编译指令：
I have an html file with a controller and a directive with a template url. I want to load/compile the directive conditionally in the controller:
app.controller('TestController', function TestController($http, $scope, $compile) {
$scope.loadData = function (pageId) {
var pUrl = <some url>
$http({
method: 'GET',
url: pUrl
}).success(function (data, status) {
$scope.pData = data;
var htm = '<test-directive></test-directive>';
var elm = angular.element("#id").append(htm);
$compile(elm)($scope);
}).error(function (data, status) {
alert('error');
});
};
$scope.loadData();
});
指令：
'use strict';
app.directive('testdirective', function ($http) {
var uDirective = {};
uDirective.restrict = 'E';
uDirective.templateUrl = 'js/directives/testdirective.html';
uDirective.controller = function ($scope, $element, $attrs) {
$scope.showDirectiveData();
$scope.showDirectiveData = function () {
$scope.directiveDataCollection = <get data>;
};
};
uDirective.compile = function (element, attributes) {
// do one-time configuration of element.
var linkFunction = function ($scope, element, atttributes) {
};
return linkFunction;
};
return uDirective;
});
模板中使用的指令
<div>
<div ng-repeat="directiveData in directiveDataCollection">
<span><h4>{{directiveData.Title}}</h4></span>
</div>
</div>
我怎么编译在中的TestController code，动态加载指令，最终加载的内容和范围追加的内容？
How do i get to compile the code in the TestController, load the directive dynamically, and finally load the content and append the content in scope?
推荐答案
下面是一个通用模板，为您引用摘要，同时也表明了几角的概念：
Here is a general template for you to reference that abstracts and also demonstrates a few Angular concepts:
JS
.directive('parentDirective', function(Resource, $compile){
return {
restrict: 'E',
link: function(scope, elem, attrs){
Resource.loadData().then(function(result){
scope.data = result.data;
var htm = '<child-directive></child-directive>';
var compiled = $compile(htm)(scope);
elem.append(compiled);
});
}
}
})
.directive('childDirective', function(){
return {
restrict: 'E',
template: '<div>Content: {{data.key}}</div>'
}
})
.factory('Resource', function($http){
var Resource = {};
Resource.loadData = function(){
return $http.get('test.json');
}
return Resource;
})
HTML
<body ng-app="myApp">
<parent-directive></parent-directive>
</body>
请注意，没有控制器code。这是因为控制器不应该操作DOM 的 - 其中一个原因是，它会让你的code皮塔进行测试。所以，我把一切都放在指令，它也许应该是在你的情况也是如此。
Notice that there is no controller code. This is because controllers should never manipulate the DOM - one reason is that it will make your code a PITA to test. So, I put everything in directives, where it should probably be in your case as well.
我也感动了$ HTTP服务为一体的工厂。任何国家/模型相关的应该是一种服务。除了其他原因，这样做，你可以注入它几乎任何地方（包括指令内）不用担心，当控制器卸载它消失访问您的数据。
I also moved the $http service into a factory. Anything state/model related should be in a service. Among other reasons, by doing this, you can inject it almost anywhere (including inside of directives) to access your data without worrying about it disappearing when a controller unloads.
修改
您也应该考虑在
这篇关于如何动态地加载指令到页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
