Сделать угловой Вручную перейти к фазе компиляции
Я использую ocLazyLoad для загрузки моих модулей по требованию в Angular. Эти модули совершенно разные, и мы должны проверить на сервере, какой модуль нам следует загрузить. Перед использованием ocLazyLoad я загружал все сцепленные js-файлы этих отдельных модулей в моем главном представлении. Так что все они мы загружаем.
Теперь, когда очевидно, что я загружаю эти файлы по требованию, это означает, что он должен прочитать данные с сервера и посмотреть, какие модули следует загрузить, загрузить файл мегабайта и, что наиболее важно, загрузить его до того, как angular начнет компилировать View.
Я использовал обещание ocLazyLoad для $ compile view (body), но так как это делалось дважды или даже чаще, иногда мои директивы не работали.
Поэтому я думаю, что у меня есть два варианта:
Сделайте угловую вручную, скомпилируйте представление (которое я много искал и не мог найти как!!) после того, как модули были введены и загружены ocLazyLoad!
Прочитайте список необходимых модулей с сервера и используйте LazyLoad на этапе запуска приложения или даже до angular.bootstrap. (Я уже сделал это, но так как запрос $http выполняется асинхронно, он иногда работает и загружается до угловой компиляции, а иногда нет)
Буду признателен, если вы поможете мне с этим.
spa.run(['$rootScope', '$location', '$route', '$localStore', '$templateCache', 'Analytics', 'preflightValue', '$ocLazyLoad', '$http',
'$compile', function($rootScope, $location, $route, $localStore, $templateCache, Analytics, preflightValue, $ocLazyLoad, $http, $compile ) {
$rootScope.$on('cfpLoadingBar:completed', function(event, args) {
angular.element($('body')).addClass('cfp-done');
});
$http({
method: 'POST',
url: url,
data: {
route: "/dashboard"
},
headers: {
// My Headers
}
}).success(function (data, status, header, config) {
var currentModules = $ocLazyLoad.getModules();
for (var i = 0; i < data.data.cloudwares.length; i++) {
var moduleName = data.data.cloudwares[i];
if (currentModules.indexOf(moduleName) === -1 && moduleName !== 'bot-manager') {
preflightValue.addModule(moduleName);
}
}
$ocLazyLoad.load(preflightValue.modulesList()).then(function () {
preflightValue.emptyList();
});
});
}]);
// Обновить
Обратите внимание, что мы не используем ui-router или ngRouter. Мы получаем состояние нашего маршрута с сервера каждый раз, используя $resource.
2 ответа
Я на самом деле решил эту проблему, задав еще один вопрос! Все, что мне нужно было сделать, это вернуть два обещания!
Найдите решение здесь: используйте функцию разрешения $routeProvider внутри другой
В вашем конфигурационном файле попробуйте указать маршрут с помощью события lazyload.
app
.config(function ($stateProvider, $urlRouterProvider,ParseProvider){
.state ('home', {
url: '/home',
// templateUrl: 'views/home.html',
templateUrl: 'views/home.html',
resolve: {
loadPlugin: function($ocLazyLoad) {
return $ocLazyLoad.load ([
{
name: 'css',
insertBefore: '#app-level',
files: [
'vendors/bower_components/fullcalendar/dist/fullcalendar.min.css',
],
},
{
name: 'vendors',
insertBefore: '#app-level-js',
files: [
'vendors/sparklines/jquery.sparkline.min.js',
'vendors/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js',
'vendors/bower_components/simpleWeather/jquery.simpleWeather.min.js'
]
}
])
}
}
})
})
из этого вы можете загрузить любые скрипты на ваш взгляд.