AngularJS'de bir çağrı ile aynı veriyi birden çok denetleyiciye ($ kapsam) nasıl eklerim?

Aynı sayfada bulunan iki denetleyicide aramak üzere bir fabrika kullanıyorum, ancak bu AJAX çağrısının iki kez olmasını istemiyorum. Ben $q.defer() kullanmayı deneyin, ama işe yaramıyor!

kodu:

(function() { 
 
    'use strict'; 
 

 
    var app = angular.module('globalApp', []).config([ 
 
     '$interpolateProvider', '$httpProvider', 
 
     function ($interpolateProvider, $httpProvider) { 
 
      delete $httpProvider.defaults.headers.common['X-Requested-With']; 
 
      $interpolateProvider.startSymbol('<%'); 
 
      $interpolateProvider.endSymbol('%>'); 
 
     } 
 
    ]); 
 

 
    // Index Store List 
 
    app.controller('IndexController', ['$scope', '$storeList', 
 
     function ($scope, $storeList) { 
 
      $scope.stores = []; 
 
      $storeList.getStoreList().then(function (stores) { 
 
       $scope.stores = stores; 
 
      }); 
 
     }]); 
 

 
    // Footer Store List 
 
    app.controller('StoreListController', [ 
 
     '$scope', '$storeList', 
 
     function ($scope, $storeList) { 
 
      $scope.stores = []; 
 
      $storeList.getStoreList().then(function (stores) { 
 
       $scope.stores = stores; 
 
      }); 
 
     } 
 
    ]); 
 
    
 
    // Factory call list os stores 
 
    app.factory('$storeList', function ($http, $q) { 
 
     var stores = []; 
 
     return { 
 
      getStoreList: function() { 
 
       //is a request needed? 
 
       if (stores.length > 0) { 
 
        var deferred = $q.defer(); 
 
        deferred.resolve(stores); 
 
        return deferred.promise; 
 
       } 
 
       var uri = rootUrl + 'getStoreList'; 
 
       var responsePromise = $http.get(uri); 
 
       return responsePromise.then(function (result) { 
 
        var data = result.data; 
 
        //modify collection of stores... 
 
        if (data.status) { 
 
         var stores = data.stores; 
 
         return stores; 
 
        } 
 
       }); 
 
      } 
 
     }; 
 
    }); 
 
}());

<body ng-app="globalApp"> 
 

 
    <section> \t 
 
    <div ng-controller="IndexController"> 
 
     <nav> 
 
     <a ng-repeat="store in stores" href="<%store.link%>"><%store.name%></a> 
 
     </nav> 
 
    </div> 
 
    </section> 
 
    <footer> 
 
    <div> 
 
     <ul ng-controller="StoreListController"> 
 
      <li ng-repeat="store in stores"> 
 
       <h3><a href="<%store.link%>"><%store.name%></a></h3> 
 
       <p> 
 
        <%store.street%>, <%store.number%> 
 
        <%store.neighborhood%>, <%store.cityName%> 
 
        <a><%store.phone%></a> 
 
        <a><%store.email%></a> 
 
       </p> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </footer> 
 
</body>

kaynak

2016-03-24 Mateus Pastori

Çözümümün:

(function() { 
 
    'use strict'; 
 

 
    // My configs (optional) 
 
    var app = angular.module('globalApp', []).config([ 
 
     '$interpolateProvider', '$httpProvider', 
 
     function ($interpolateProvider, $httpProvider) { 
 
      delete $httpProvider.defaults.headers.common['X-Requested-With']; 
 
      $interpolateProvider.startSymbol('<%'); 
 
      $interpolateProvider.endSymbol('%>'); 
 
     } 
 
    ]); 
 

 
    // Index Store List 
 
    app.controller('IndexController', [ 
 
     '$scope', '$storeList', 'StoreService', 
 
     function ($scope, $storeList, StoreService) { 
 
      $scope.stores = []; 
 
      $storeList.getStoreList().then(function (stores) { 
 
       $scope.stores = stores; 
 
       StoreService.setStores(stores); 
 
      }); 
 

 
     }]); 
 
    
 
    // Footer Store List 
 
    app.controller('StoreListController', [ 
 
     '$scope', 'StoreService', 
 
     function ($scope, StoreService) { 
 
      $scope.stores = []; 
 
      $scope.$watch(function() { 
 
       return StoreService.getStores(); 
 
      }, function (stores) { 
 
       $scope.stores = stores; 
 
      }, true); 
 

 
     } 
 
    ]); 
 
    
 
    // StoreService to share vars between the controllers 
 
    app.service('StoreService', function() { 
 
     var stores = []; 
 
     return { 
 
      setStores: function (_stores) { 
 
       stores = _stores; 
 
      }, 
 
      getStores: function() { 
 
       return stores; 
 
      } 
 
     }; 
 
    }); 
 
    
 
    // Factory make ajax call to get list of stores 
 
    app.factory('$storeList', function ($http) { 
 
     return { 
 
      getStoreList: function() { 
 
       var uri = rootUrl + 'getStoreList'; 
 
       var responsePromise = $http.get(uri); 
 
       return responsePromise.then(function (result) { 
 
        var data = result.data; 
 
        if (data.status) { 
 
         return data.stores; 
 
        } 
 
        return []; 
 
       }); 
 
      } 
 
     }; 
 
    }); 
 
    
 
}());

<body ng-app="globalApp"> 
 

 
    <section> \t 
 
    <div ng-controller="IndexController"> 
 
     <nav> 
 
     <a ng-repeat="store in stores" href="<%store.link%>"><%store.name%></a> 
 
     </nav> 
 
    </div> 
 
    </section> 
 
    <footer> 
 
    <div> 
 
     <ul ng-controller="StoreListController"> 
 
      <li ng-repeat="store in stores"> 
 
       <h3><a href="<%store.link%>"><%store.name%></a></h3> 
 
       <p> 
 
        <%store.street%>, <%store.number%> 
 
        <%store.neighborhood%>, <%store.cityName%> 
 
        <a><%store.phone%></a> 
 
        <a><%store.email%></a> 
 
       </p> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </footer> 
 
</body>

kaynak

2016-03-29 18:15:37

o yüzden ikisini aynı anda kontrolörleri yük ve işlevini çağırmak, mağazalar hiçbir veri içermez Eğer uzunluk 0'a

değerlendirecek

Eğer sayfanın üzerine yüklemeniz gerekiyorsa, neden bir hizmetten işlev çağırmıyorsunuz ve sonuçları saklamıyorsunuz. Ayardaki değişiklikleri dinlemek için denetimlerde gözlemci desenini kullanabilir ve söz konusu değişiklikleri giderdikten sonra bu kapsamda $ scope.stores değerini ayarlamak için her iki denetleyicide bu değişiklikleri devam ettirebilirsiniz.

kaynak

2016-03-24 18:22:18 Kyle

Teşekkürler, denetleyiciler arasında veri paylaşmak için 'services' kullanıyorum. –

Burada ertelenmene gerek yoktur.

  //is a request needed? 
      if (stores.length > 0) { 
       var deferred = $q.defer(); 
       deferred.resolve(stores); 
       return deferred.promise; 
      }

Ve IndexController ve StoreListController hem Storelist yüklüyorsunuz ve dolayısıyla 2 AJAX çağrıları: Bu yığın çıkarın. Daha önce fark etmemiştim

2 kontrolörleri

 $scope.stores = []; 
     $storeList.getStoreList().then(function (stores) { 
      $scope.stores = stores; 
     });

DÜZENLEME birinden yığın çıkarın, ancak StoreController kapsamı dışında Storelist kullanıyorsanız beri, Sen den .getStoreList() çağrıyı kaldırmalısınız StoreController sadece

kaynak

2016-03-24 18:27:40

Teşekkürler, denetleyiciler arasında veri paylaşmak için 'services' kullanıyorum. –

AngularJS'de bir çağrı ile aynı veriyi birden çok denetleyiciye ($ kapsam) nasıl eklerim?

cevap

İlgili konular