角度表现和应用范围

时间:2014-09-13 19:17:39

标签: angularjs

我正处于Angular项目开发的中间,并且在一个Angular模板调用的函数上有一个断点,并发现该函数执行了14次。

我检查了每个调用的堆栈跟踪,尝试发现为什么函数被多次调用,尽管它不在ng-repeat块或任何内容中,并且发现它已经发现它主要是在xhr json打电话之后。

我理解angular在xhr.json调用之后应用了scope.apply和digest,但是其中一些调用与所涉及的模板并不真正相关并且更新了其他DOM元素。我认为这里的模板是一个模板,渲染了14次,带有编译和DOM操作的所有开销,这感觉不对,我的选择是什么?

enter image description here

模板:

<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;
        }
    };
...

0 个答案:

没有答案