Я боюсь, что когда на стартовой странице с angularjs я не могу получить, например, размеры изображения, поскольку мы знаем, что это можно сделать в $ (окне).load, когда изображение существует. Таким образом, в этом случае я могу использовать angular.element(window).load(function() {
но все же на кнопке "Назад" внутри не будет запущена
Здесь мой код
'use strict';
/* App Module */
var myApp = angular.module('myAplication', [
'ngRoute',
'portfolioAnimations',
'portfolioControllers',
'portfolioServices'
]);
myApp .config(['$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
title: 'Home Page',
templateUrl: 'partials/portfolio-view.html',
controller: 'PortfolioList'
}).when('/portfolio/:portfolioWorks', {
templateUrl: 'partials/portfolio-work-view.html',
controller: 'PortfolioWorkView'
}).otherwise({
redirectTo: '/'
});
}]);
/* Controllers */
var portfolioControllers = angular.module('portfolioControllers', []);
portfolioControllers.controller('PortfolioList', ['$scope', 'Work', 'scrollFunction',
function ($scope, Work, scrollFunction) {
$scope.worksList = Work.query();
$scope.orderProp = 'age';
angular.element(window).load(function () {
console.log($(".img img").width())
});
}]
);
portfolioControllers.controller('PortfolioWorkView', ['$scope', '$routeParams', 'Work',
function ($scope, $routeParams, Work) {
$scope.work = Work.get({portfolioWorks: $routeParams.portfolioWorks}, function (work) {
$scope.mainImageUrl = work.images[0];
});
}]);
/* Services */
var portfolioServices = angular.module('portfolioServices', ['ngResource']);
portfolioServices.factory('Work', ['$resource',
function ($resource) {
return $resource('portfolio/:portfolioWorks.json', {}, {
query: {method: 'GET', params: {portfolioWorks: 'portfolioWorks'}, isArray: true}
});
}]);
Таким образом, в этом случае при первой загрузке я получаю портфолио, когда изображение и нагрузка, я могу получить его размеры, НО когда вы направляетесь в другое представление, а затем нажимаете кнопку, я не могу найти способ получить размеры, поскольку страница уже загружена, но через Интернет не удалось найти решение для получения триггера функции загрузки ресурсов на конкретном представлении в контроллере.
Мой пример в plunker: ПРИМЕР - к сожалению, здесь я даже не могу воспроизвести размер изображения при загрузке окна, поскольку он находится в plunker
Если что-то неясно, спросите, я подкрепляю любую помощь
Надеюсь, мои исследования помогут людям здесь
Прежде всего, нам нужно получить массив json как завершенный не как обещание
$scope.worksList.$promise.then(function (result) {
$scope.worksList = result; // we have now full array so we can use it for example to get value from object for example
console.log($scope.workList[0].name) //will return 'work-one'
//now with ngRoute code is not append yet so I just did (I'm not sure if its proper way but it is working)
setTimeout(function () { //it takes only 1ms to append elements (tested with throating 250kb/s) so it works with weak user connection
console.log($(".img").width() // and now we can have dimensions of elements created dynamically
}, 1);
});
EDIT: также зависит от анимации просмотров, например, с помощью ng-animate, то есть таймаута (в примере 1 мс), поэтому, если продолжительность анимации длится 300 мс, потребуется 300 мс
Я знаю, что это может быть не идеальное решение, но это самое чистое, что я мог найти до сих пор :) Счастливые программисты