Question

我在使用angularjs开始页面时遇到了这样的事实：我不能得到例如图像尺寸，因为我们知道它可以在图像存在时在$（window）.load上完成。所以在这种情况下，我可以使用angular.element(window).load(function () {但仍然在＆＃34;后退按钮＆＃34;内部的功能不会被触发

这是我的代码

         '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中的例子：EXAMPLE - 不幸的是，我甚至无法在窗口加载时重现获取图像尺寸，因为它在plunker中

如果某些事情不清楚，请询问，我会提供任何帮助

Answer 1

希望我的研究能够帮助这里的人们

首先，我们需要让数组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);
    });

编辑：还取决于使用例如ng-animate的视图动画，即超时（例如1毫秒），因此如果您有动画持续时间持续300毫秒，则超时将花费300毫秒

我知道这可能不是完美的解决方案，但它是迄今为止我能找到的最干净的:) 快乐的编码家伙

带有路由的每个加载页面上的Angular可以获得数据＆＃34; load＆＃34;

1 个答案: