我正处于Angular项目开发的中间,并且在一个Angular模板调用的函数上有一个断点,并发现该函数执行了14次。
我检查了每个调用的堆栈跟踪,尝试发现为什么函数被多次调用,尽管它不在ng-repeat
块或任何内容中,并且发现它已经发现它主要是在xhr json打电话之后。
我理解angular在xhr.json调用之后应用了scope.apply和digest,但是其中一些调用与所涉及的模板并不真正相关并且更新了其他DOM元素。我认为这里的模板是一个模板,渲染了14次,带有编译和DOM操作的所有开销,这感觉不对,我的选择是什么?
模板:
<ion-view title="Checkout">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-bag righthd-icon"></button>
<button class="button button-icon icon ion-person righthd-icon" ng-click="showUserOptions();"></button>
</ion-nav-buttons>
<ion-content class="has-header ourbgcol">
<div>
<div class="row responsive-sm ourprod">
<div class="col col67 ourcolno">
<ion-scroll class="product-details-images-container">
<div class="lfgtp">
<div class="row ourrow">
<div class="col ourbxcol" ng-repeat="product in cart.products">
<img ng-src="{{product.img}}">
<div class="prdlistinfo">
<h3>{{product.name}}}</h3>
<h4>$ {{product.price}}</h4>
</div>
</div>
</div>
</div>
</ion-scroll>
</div>
<div class="col col-33 checkoutrgt rghbg">
<ion-scroll>
<div class="whitebg">
<h3 class="totalhd">TOTAL ${{ cart.getTotal() }}</h3>
</div>
</ion-scroll>
</div>
</div>
</div>
</ion-content>
</ion-view>
控制器:
angular.module('tailorapp.controllers').controller('ShoppingCtrl',
['$scope', '$stateParams', '$http', '$log', '$ionicLoading', '$ionicPopup', '$ionicActionSheet', '$resource', 'localStorageService', 'settings', 'utils', 'api',
function($scope, $stateParams, $http, $log , $ionicLoading, $ionicPopup, $ionicActionSheet , $resource,localStorageService, settings, utils, api) {
$log.info('Entering ShoppingCtrl scope');
$scope.cart = utils.getCart();
...
utils factory:
.factory('utils', ['api', '$log', '$q',
function(api, $log, $q) {
var utils = {};
var currentUser;
var cart = {
products: new Array(),
payment: 'cash',
getTotal: function(){
var total = 0;
for(var i = 0; i < this.products.length; i++){
var product = this.products[i];
total += (product.price * product.quantity);
}
$log.info("getTotal Executed");
return total;
}
};
...