如何在angularjs中延迟加载指令？
我正在使用angularjs，我希望能够在需要的时候加载指令，而不是在页面开始时加载所有的指令。我正在尝试为我最常用的插件创建指令。
这样，在最终编译html之前，可以直接使用yepnope加载所有需要的指令。
如果指令与其他指令一起在页面开始时加载，那么一切都会正常工作。但是，如果稍后加载'child‘指令(在’parent‘中)，它就不会生效。下面是'parent‘指令的编译字段中的pre字段的代码。
...
var pre = function (scope, element, attrs) {
element.html('Please wait. Loading...');
ang.loadDirectives('caiDatePicker', function () {
console.log('loaded');
scope.data.raw = scope.rawData;
var html = createObjUi(scope, scope.data, scope.defn);
element.html(html); //data
$compile(element.contents())(scope.$new());
scope.$apply();
});
};
return { restrict:'A', compile: {pre:pre,post:function(){...}};ang.loadDirectives使用yepnope加载指令。“child”指令的部分代码如下所示：
angular.module('mycomponents') //PS: I'm assuming this will fetch the already created module in the 'parent' directive
.directive('caiDatePicker', function ($parse) {
return {
scope: {},
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch('this.$parent.editing', function (v) {
scope.editing = v;
});
yepnope({
test: $().datePicker,
nope: [
'/content/plugins/datepicker/datepicker.js', //todo: use the loader
'/content/plugins/datepicker/datepicker.css'
],
complete: function () {
if (scope.model && scope.model.value) {
var date = scope.model.value;
element.val(date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear());
}
element.datepicker({ weekStart: 1, format: 'dd/mm/yyyy' })
.on('changeDate', function (ev) {
scope.model.value = ev.date;
scope.$apply();
});
}
});
attrs.$observe('path', function (v) {
var fn = $parse(v);
var model = fn(scope.$parent);
scope.model = model;
});
}
}
});我正在做的事情有可能发生吗？
如果是这样，我做错了什么？
回答 2
Stack Overflow用户
发布于 2013-04-21 18:45:30
如果您想要注册指令，那么在应用程序引导之后，您将不得不使用$compileProvider而不是module API。例如..。
$compileProvider.directive('SomeLazyDirective', function()
{
return {
restrict: 'A',
templateUrl: 'templates/some-lazy-directive.html'
}
})然后，您可以在使用$routeProvider定义路由时使用'resolve‘函数，以便使用脚本加载器加载lazy指令。为此，让函数返回一个promise，一旦加载了您的指令和其他惰性依赖项，该promise就会被解析。在呈现路由之前，AngularJS将等待promise被解析，从而确保您的指令在视图需要它之前就准备好了。我写了一篇博客文章，详细介绍了如何在AngularJS中实现延迟加载。它更详细地描述了我在这里所说的内容，可以在http://ify.io/lazy-loading-in-angularjs/上找到
Stack Overflow用户
发布于 2014-02-05 19:14:10
下面是我所做的，使用附加到应用程序的编译提供程序，使其可以从具有实际模块引用的任何位置访问。
var app = angular.module('app');
app.config(function ($compileProvider) {
app.compileProvider = $compileProvider;
});然后，在bootstrap之后，您可以懒惰地加载编译和链接的指令：
app.compileProvider.directive('SomeLazyDirective', function()
{
return {
restrict: 'A',
templateUrl: 'templates/some-lazy-directive.html'
}
})https://stackoverflow.com/questions/12538665
复制相似问题