Угловой на каждой странице загрузки с маршрутизацией получить данные о «нагрузке»

0

Я боюсь, что когда на стартовой странице с 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

Если что-то неясно, спросите, я подкрепляю любую помощь

  • 0
    Вы можете использовать ng-cookies или LocalStorageModule, чтобы установить / получить размер изображения или $ broadcast
Теги:
angularjs-routing

1 ответ

0

Надеюсь, мои исследования помогут людям здесь

Прежде всего, нам нужно получить массив 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 мс

Я знаю, что это может быть не идеальное решение, но это самое чистое, что я мог найти до сих пор :) Счастливые программисты

Ещё вопросы

Сообщество Overcoder
Наверх
Меню