指令怎么可以偷懒装在angularjs？ [英] How can directives be lazy loaded in angularjs?

问题描述

我与angularjs工作，我希望能够加载指令作为和需要，而不是让它们都在页面开始加载时他们。我试图创建我最常用的插件指令。

I'm working with angularjs and I want to be able to load directives as and when they are needed instead of having all of them loaded at the start of the page. I'm trying to create directives for my most frequently used plugins.

在这种方式，一是直接可以使用 yepnope 终于编译HTML前装入所有需要的指令。

In this way, one direct can use yepnope to load all needed directives before finally compiling the html.

如果该指令在页面开始加载有别人，一切工作就好了。但是，如果'孩子'指令以后加载（以下简称母公司内），它不生效。下面是code在父指令的编译领域的pre领域。

If the directive is loaded at start of page with the others, everything works just fine. However if the 'child' directive is loaded later (within the 'parent'), it does not take effect. Below is the code for the pre field in the compile field of the 'parent' directive.

    ...
    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加载指令。对于孩子指令的code的部分如下：

ang.loadDirectives loads the directive using yepnope. Part of the code for the 'child' directive is as follows:

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;
            });
        }
    }
});

就是我在第一时间做甚至可能吗？

Is what I'm doing even possible in the first place?

如果是这样，我究竟做错了什么？

If so, what am I doing wrong?

推荐答案

寻找这么久，没有得到任何答复后，我结束了以下

After searching for so long and not getting any answers, I ended up with the following

1. 创建一个角度应用程序。这也是一个角模块。


2. 您可以在任何指令在任何时间使用app.directive（名称，功能）添加到模块。这些可以异步加载指令。


3. 您可以引导任何元素。自举时，指定模块的角度列表中的应用程序。

但问题是，yepnope不发射完整的功能，我需要他们是。最后，我建立在yepnope的顶部有一个小包装，似乎保证完整的功能被激发。

The problem was that yepnope was not firing the complete function as I needed them to be. In the end, I build a small wrapper on top of yepnope that appears to guarantee that the complete function is fired.

最后code看起来是这样的：

Final code looks something like:

var app3 = new Cai.AngApp('app3');
app3.loadControllers('app1.controller3', function () {
        app3.loadDirectives('jsonEditor', 'datePicker', function () {
            app3.bootstrap($('#d3'));
    });
});

这篇关于指令怎么可以偷懒装在angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！