Javascript 如何在angularjs中延迟加载指令？

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

通过这种方式，direct可以在最终编译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.loadDirections

使用yepnope加载指令。“儿童”指令的部分代码如下：

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

我现在做的一开始可能吗

---

如果是这样的话，我做错了什么？

在搜索了这么长时间却没有得到任何答案后，我得出了以下结论

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

您可以随时使用app.directive（名称、函数）向模块添加任何指令。这些指令可以异步加载

您可以引导任何元素。启动时，在要启动的模块列表中指定应用程序

问题是yepnope没有按照我的需要启动完整的函数。最后，我在yepnope上构建了一个小包装器，似乎可以保证触发完整的函数

最终代码类似于：

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

---

如果要注册指令，则在应用程序启动后，必须使用$compileProvider而不是模块API。例如

$compileProvider.directive('SomeLazyDirective', function()
{
    return {
        restrict: 'A',
        templateUrl: 'templates/some-lazy-directive.html'
    }
})

---

然后，在使用$routeProvider定义路由时，可以使用'resolve'函数使用脚本加载器加载lazy指令。为此，让函数返回一个承诺，该承诺在加载指令和其他惰性依赖项后得到解决。AngularJS将在呈现路由之前等待承诺得到解决，从而确保您的指令在视图需要之前准备就绪。我写了一篇博客文章，详细介绍了如何在AngularJS中实现延迟加载。它更详细地描述了我在这里所说的内容，可以在

中找到。下面是我所做的，使用附加到应用程序的编译提供程序，使您可以从实际模块引用的任何地方访问它

var-app=角度。模块（“app”）； app.config（函数（$compileProvider）{ app.compileProvider=$compileProvider； }); 然后，在引导之后，您可以延迟加载一个指令，该指令将被编译和链接：

app.compileProvider.directive（'SomeLazyDirective'，function（） { 返回{ 限制：“A”， templateUrl:'templates/some lazy directive.html' } })

---

我不确定如何使用angularJS指令将是一个合适的答案

我已经做了以下工作，它的工作完美无瑕

• 使用小胡子列表确定列表项模板。（）
• 加载应用程序时，API应仅加载10-50条记录，具体取决于您的内容
• 在列表的滚动条上，当您即将到达末尾时，启动下一个API调用表单next 20项，以此类推
• 如果您的数据没有更改，您可以将其存储在本地并重新填充

• 不断获取最新记录并在本地发布广告

---

在孩子身上使用引导的有趣方法。但这意味着，多个引导。这样行吗？另外，你能解释一下你在ang.loadDirectives中做了什么吗？要解决你的yepnope问题，你可以按照这个评论的第一个例子：这对我很有用，这里也有一篇有用的帖子：如何调用这个指令来显示在视图中？你能提供$routeProvider解析函数吗？谢谢