Как директивы могут лениться загружаться в angularjs?

Я работаю с angularjs, и я хочу иметь возможность загружать директивы как и когда они нужны, а не загружать все из них в начале страницы. Я пытаюсь создать директивы для моих наиболее часто используемых плагинов.

Таким образом, один прямой может использовать yepnope для загрузки всех необходимых директив, прежде чем компилировать html.

Если директива загружается в начале страницы с другими, все работает отлично. Однако, если директива 'child' загружается позже (внутри родителя), она не вступает в силу. Ниже приведен код для поля pre в поле компиляции директивы 'parent'.

    ...
    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. Часть кода для "дочерней" директивы выглядит следующим образом:

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

Является ли то, что я делаю, даже возможно в первую очередь?

Если да, то что я делаю неправильно?

Ответ 1

После долгого поиска и ответов не получилось, я получил следующее

Создайте приложение angular. Это также модуль angular.
Вы можете добавить любую директиву в модуль в любое время, используя app.directive(имя, функция). Это могут быть директивы, загружаемые асинхронно.
Вы можете загружать любой элемент. При загрузке укажите приложение в списке модулей на angular.

Проблема заключалась в том, что yepnope не стрелял в полную функцию, как мне было нужно. В конце концов, я создаю небольшую обертку поверх вершины yepnope, которая, как представляется, гарантирует, что полная функция будет запущена.

Конечный код выглядит примерно так:

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

Ответ 2

Если вы хотите зарегистрировать директивы, после того, как приложение было загружено, вам придется использовать $compileProvider вместо API модуля. Например...

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

Затем вы можете использовать функцию "разрешить" при определении маршрута с помощью $routeProvider для загрузки ленивой директивы с помощью загрузчика script. Для этого позвольте функции вернуть обещание, которое будет разрешено после загрузки вашей директивы и других ленивых зависимостей. AngularJS будет ожидать, что обещание будет разрешено до предоставления маршрута, таким образом гарантируя, что ваши директивы будут готовы до того, как это понравится. Я написал сообщение в блоге, в котором подробно описывается, как достичь ленивой загрузки в AngularJS. Он более подробно описывает то, что я сказал здесь, и его можно найти на http://ify.io/lazy-loading-in-angularjs/

Ответ 3

Вот то, что я сделал, используя поставщика компиляции, подключенного к приложению, сделав его доступным из любого места, у вас есть фактическая ссылка на модуль.

var app = angular.module('app');
app.config(function ($compileProvider) {
    app.compileProvider = $compileProvider;
});

Затем, после загрузки, вы можете лениво загрузить директиву, которая скомпилируется и связана:

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

Ответ 4

Я не уверен, что использование директивы angularJS будет подходящим ответом

Я сделал следующее и работает безупречно

Используйте список усов для выбора шаблона элемента списка. (https://github.com/janl/mustache.js/)
При загрузке вашего приложения apis должен загружать только 10 -50 записей, в зависимости от вашего контента.
При прокрутке списка, как только вы собираетесь достичь цели, выполните следующую следующую процедуру: введите следующий 20 элементов и т.д.
Если ваши данные не изменяются, вы можете сохранить их локально и повторно заполнить.
сохранять последние записи и локально.