如何将指令动态加载到页面中
我有一个带有控制器的html文件和带有模板url的指令。我想有条件地在控制器中加载/编译指令：
控制器：
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中编译代码，动态加载指令，最后加载内容并将内容附加到范围中？
问题答案：
这是一个抽象的通用模板，供您参考，并演示了一些Angular概念：
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>
请注意，没有控制器代码。这是因为 控制器永远不要操纵DOM-
原因之一是它将使您的代码成为要测试的PITA。因此，我将所有内容都放入了指令中，在您的情况下也应该放在其中。
我还将$
http服务移到了工厂。与状态/模型相关的任何内容都应该在服务中。除其他原因外，通过执行此操作，您可以将其注入几乎任何位置（包括指令内部）以访问数据，而不必担心控制器卸载时数据会消失。
编辑
您还应该在公认的动态添加Angular指令的答案中考虑动态加载方法的不同观点。
-
问题内容： 我正在使用angularjs，并且希望能够在需要时加载指令，而不是在页面开始时加载所有指令。我正在尝试为最常用的插件创建指令。 这样，一个direct可以在最终编译html之前用于加载所有需要的指令。 如果该指令与其他指令一起在页面开始加载，则一切正常。但是，如果稍后加载“子”指令（在“父”中），则该指令无效。以下是“ parent”指令的compile字段中pre字段的代码。 使用y
-
问题内容： 我正在构建Java Web应用程序，并且我讨厌传统的“代码-编译-部署-测试”周期。我想输入一个微小的更改，然后立即查看结果，而无需编译和部署。 幸运的是，码头很适合这样做。这是一个纯Java Web服务器。它带有一个非常不错的maven插件，可让您直接从构建树中启动Jetty阅读- 无需打包war文件或部署。它甚至具有scanInterval设置：将其设置为非零值，它将监视您的Jav
-
问题内容： 我试图做到这一点，所以当我单击HTML页面中的链接时，它会动态地将请求的页面加载到jQuery的div中。 我怎样才能做到这一点？ 问题答案： 那里有一个叫做pjax的jQuery插件，它指出：“它是带有真正的永久链接，页面标题和完全退化的后退按钮的ajax。” 该插件使用HTML5 pushState和AJAX来动态更改页面，而无需完全加载。如果不支持pushState，则PJAX将
-
问题内容： 我有一个PHP include，它需要一段时间才能加载，因为PHP必须获取很多数据。我不想放慢整个网页的加载，以等待包含此内容，那么如何使用ajax加载该包含内容呢？我不希望通过单击按钮来触发Ajax，而只是希望它在页面加载时加载包含，因此，如果您查看下面的示例，则会在显示内含代码的同时显示“更多HTML内容”。 php仍在加载中。 问题答案： 如果您使用的是jQuery，则可以使用他
-
问题内容： 我有一个网页，当向下滚动页面直到每个项目都被加载时，它会不断加载新项目。 我正在使用Java中的Selenium，需要向下滚动到页面底部才能加载所有内容。 我尝试了几种不同的选项，例如滚动到页面底部的元素： 不过，这只会向下滚动一次，然后网页会继续加载。 我也尝试过这种方法，该方法也只能向下滚动一次，因为它只考虑了浏览器的高度。 非常感谢您的帮助。 问题答案： 我将为此提供Python
-
我有一个网页，不断加载新项目时，向下滚动页面，直到每个项目都加载。 我正在使用Java中的Selenium，需要向下滚动到页面底部才能加载所有内容。 我尝试了几种不同的选项，比如滚动到页面底部的某个元素： 这只是向下滚动一次，然后网页继续加载。 我也尝试过这种方法，它也只向下滚动一次，因为它只考虑了浏览器的高度。 任何帮助都非常感谢。