角度在每个负载页面与路由获取“负载”数据

我很苦恼事实上，当在页面上使用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例如：EXAMPLE - 可惜的是这里我甚至不能重现的窗口负载获得的图像尺寸，因为它是在plunker

如果事情是不明确请问，我appreaciate任何帮助

来源

2016-04-26 Szymon Dziewoński

您可以使用ng-cookies或LocalStorageModule来设置/获取图像尺寸或$广播 – Sajal

希望我的研究将有助于在这里的人

所有我们需要得到作为成品而不是承诺阵列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-动画视图动画，这就是超时（例如1毫秒），所以如果你有动画的持续时间持续300ms的超时将采取300毫秒

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

来源

2016-05-12 18:32:21

角度在每个负载页面与路由获取“负载”数据

回答

相关问题