Как выполнить фундаментальный вызов js после загрузки изображений в AngularJS ngview?

Question

Я создаю веб-приложение с AngularJS и Foundation.

Проблема возникает, когда я использую слайдер содержимого Orbit, упакованный с Foundation. Требуется вызов инициализирующей функции Foundation $(document).foundation(). Поскольку я использую ng-view и функции маршрутизации AngularJS, я должен вызывать эту функцию каждый раз при загрузке нового представления. Я попытался добиться этого, поместив вызов в функцию контроллера, загруженную каждым маршрутом. Но я думаю, что это приводит к слишком быстрому запуску сценария (непосредственно перед загрузкой изображений или фактического представления), поскольку он не отображает ползунок орбиты, пока я не перезагружу представление или страницу (полагаю, изображения кэшированы затем в фоновом режиме и может быть загружен достаточно скоро). Я также пытался использовать событие $routeChangeSuccess для вызова основной функции, но это дает мне тот же результат.

Я также создал директиву, которая связывается с событием загрузки изображения, теперь даже если это действительно работает, и ползунок показывает правильно с первой загрузки представления, базовый вызов должен быть сделан на страницах без изображений, плюс есть некоторые содержимое мигает при использовании этого подхода (на самом деле я вижу, как пули элементов UL появляются и исчезают при использовании Orbit)

Я только начал работать с AngularJS, поэтому я не уверен, что то, что я делаю / говорю, совершенно правильно.:)

Я провел некоторое исследование и прочитал кое-что об обещаниях и решениях, которые могут помочь мне найти решение этой проблемы, но я не смог понять, как это можно сделать.

Заранее спасибо!

Answer 1

Я забыл об этом вопросе!

Даже если арт-джитсу его ответ, вероятно, также работает, я думаю, что есть лучшее решение.

Некоторые люди делали полную переписку плагинов Foundation на основе Angular.

http://pineconellc.github.io/angular-foundation/

Answer 2

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

angular.module('exampleAppApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
})
// initialize foundation here...
.run(function($rootScope) {
 $rootScope.$on('$viewContentLoaded', function () {
   $(document).foundation();
});
});