如何将指令延迟加载到angularjs中？

Question

我正在使用angularjs，并且希望能够在需要时加载指令，而不是在页面开始时加载所有指令。我正在尝试为最常用的插件创建指令。

这样，一个direct可以yepnope在最终编译html之前用于加载所有需要的指令。

如果该指令与其他指令一起在页面开始加载，则一切正常。但是，如果稍后加载“子”指令（在“父”中），则该指令无效。以下是“
parent”指令的compile字段中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;
            });
        }
    }
});

首先，我在做什么？

如果是这样，我在做什么错？

Answer 1

搜索了这么长时间，但没有得到任何答案，我得到了以下结果

1. 创建一个角度应用程序。这也是一个角度模块。
2. 您可以随时使用app.directive（name，function）将任何指令添加到模块中。这些可以是异步加载的指令。
3. 您可以引导任何元素。引导时，在模块列表中指定应用程序为角度。

问题在于，yepnope并没有按照我的要求触发全部功能。最后，我在yepnope之上构建了一个小的包装程序，该包装程序似乎可以确保触发完整功能。

最终代码如下所示：

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