Ленивая загрузка: Нужна JS Перед HTML визуализации

Question

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

1. Начать загрузку JS
2. Рендер HTML (ж/директив)
3. Finish JS затем определяют директивы (к сожалению слишком поздно, уже оказанные HTML)

я позволяю «плагинов» в моем SPA, которые позволяют мне отказаться от новых лиц (HTML + JS). HTML загружается через контроллер (в этом случае «$ templateFactory.fromUrl()» внутри ссылки директивы), а соответствующий JS включен из частичного частичного HTML.

function inputFrequencyDirective($templateFactory, $compile) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     bindToController: { 
      frequency: '=ngmodelFrequency', 
     }, 
     compile: function CompilingFunction(element, attrs) { 
      return function LinkingFunction($scope, $element, $attrs) { 
       var frequency = $scope.vm.frequency; 
       var type = frequency.type; 
       var promise = $templateFactory.fromUrl(type + ".html"); 
       promise.then(function (template) { 
        var e = $compile(template)($scope); 
        $element.replaceWith(e); 
       }); 
      }; 
     }, 

HTML, частичная (Weekly.html):

<script type="text/javascript"> 
    // Async load "weekly.js" 
    require(['angular', 'weekly'], function (angular) { 
     console.log("weekly.html require complete"); 
    }); 
</script> 
<h1>Weekly</h1> 
<div> 
    <frequency-type-selector ngmodel-type="vm.frequency.type"></frequency-type-selector> 
    <div><label>Every <frequency-weekly-input-day ngmodel-day="vm.frequency.day"></frequency-weekly-input-day> (day of week)</label></div> 
</div> 

JS включен (weekly.js):

function (angular) { 
    var app = angular.module('myApp'); 
    app.lazy.directiveRegister('frequencyWeeklyInputDay', [function() { 
    [...] 

Решение простое и отлично работает со стандартными рамками , но используя async RequireJS, у меня есть проблема секвенирования. Если я переключу свой тип частоты на «ежедневно», а затем вернусь к «еженедельному», HTML будет корректно отображаться, потому что директива еженедельно зарегистрирована в файле weekly.js DID, но слишком поздно для первого рендеринга Weekly.html.

Я по существу хочу «дождаться завершения», прежде чем скрипт завершится (таким образом, задержка визуализации HTML). Лучший способ может заключаться в том, чтобы окружить HTML элементом utlizing «ng-if» и включить HTML, «пропустив ng-if» из сценария Weekly.html «require». Это должно заставить элемент отображаться должным образом, когда загрузка будет завершена.

Хотелось бы узнать, разумна ли идея «ng-if» и как это сделать изнутри блока неагрессивного скрипта. Я не знаю, как получить ссылку на предлагаемый элемент с помощью ng-if или как сделать это безопасно из других экземпляров этого потенциально общего элемента управления.

Предлагаемая "понятие":

<script type="text/javascript"> 
    var someflag = false; 
    require(['angular', 'weekly'], function (angular) { 
     someflag = true; 
    }); 
</script> 
<h1>Weekly</h1> 
<div ng-if="someflag"> 
    <frequency-type-selector ngmodel-type="vm.frequency.type"></frequency-type-selector> 
    <div><label>Every <frequency-weekly-input-day ngmodel-day="vm.frequency.day"></frequency-weekly-input-day> (day of week)</label></div> 
</div> 

Я использую текущие версии: угловые 1.4.8, 0.2.17 uiRouter, requireJS 2.2.0

Answer 1

Я пробовал много вещей, для блокировки/события/семафора при асинхронной загрузке RequireJS, но не может заставить его работать.

Затем я сделал целое решение синхронным, поставив IIFE в включенный частичный. Я получил все, чтобы работать, приняв некоторые другие изменения (например: упрощенная директива include, чтобы использовать ng-include, удалила мою директиву по обработке скриптов, чтобы позволить jquery сделать это, ...).

Вот окончательный Plunk, который работает синхронно лениво погрузочные партиалы HTML/скрипт: https://plnkr.co/edit/76feCbf15aJhYeJkS8VZ

Я надеюсь, что вы найдете этот пример полезен.