AngularJS:如何在数据库源的新数据上更新ng-repeat

AngularJS: how to update a ng-repeat on new data form a db source

本文关键字：数据 ng-repeat 更新 新数据 数据库 AngularJS      更新时间：2023-09-26

我的页面上有一个ng-repeat:

  <div class="store-listing-wrapper" ng-repeat="store in stores | filter:storesearch" ng-cloak>
    <div class="store-listing" style="background: url('storeassets/[[ store.folder ]]/Stores_Poster.jpg') center no-repeat;">
        <a class="title" href="store/[[ store.id ]]">[[ store.name ]] <span class="typcn typcn-chevron-right"></span></a>
    </div>
</div>
{{-- Preloader --}}
<div class="content-preloader" ng-hide="stores.length > 0"></div>

这是链接到我的storelistingCtrl，它使用工厂从数据库中检索商店列表。

  .controller('storelistingCtrl',function($scope, Store, $state, $log){
       //-- init the stores list to display
       $scope.getStoreList();
       //-- set listen for a new store adddition then regenerate data
       $scope.$on('newStore', function(e) { $scope.getStoreList();});
       //-- get the store data
       $scope.getStoreList = function(){
            Store.getStores().then(
                 function(stores){$scope.stores = stores; },
                 function(statusCode){debug(statusCode)}
            );
       };
    })

一切正常，一切正常。

但是在这个页面上，我有一个弹出式/模态表单，用于创建一个新的商店。一旦这已经完成，我关闭弹出/模式。

我现在使用$broadcast到storelistingCtrl来让应用程序知道db有新的数据，然后调用$scope.getStoreList来重新填充html页面上的ng-repeat/store列表。

这个$broadcast位于我的createStoreCtrl下面:

.controller('createStoreCtrl',function($scope, $state, $log, Store, $http, $rootScope){
   $scope.submitForm = function(store){
    Store.addStore(store).then(
       function(res){
          if(res == 'true'){...
           $rootScope.$broadcast("newStore", "");
           ....

一旦弹出窗口/模式关闭，事件被触发，商店列表页面被重新加载新的数据。

我的问题是这似乎太容易了，我想知道这是否是一个好方法，是否有更好的方法来执行同样的事情，但更干净

angularJS的乐趣在于有很多方法可以实现这一点，但你的方法肯定没有错，而且你发现它很容易实现。

有些人不喜欢使用$broadcast和$emit，因为他们认为这在其他语言中是可以理解的jump to语句。有时候使用它们是有意义的

你做这件事的方法很有效。另一种方法是让服务有一个新方法，模态调用它来触发刷新，然后广播它完成了新数据，这样你的控制器就不必调用更新本身。然后，您可以将该数据存储在服务中，以便在需要时其他控制器可以访问它。

在一天结束的时候，没有错误的方法。也许有必要看看angularJS自己的代码、文档和谷歌小组，看看他们是如何建议处理这种事情的，但它确实是优先的。

我经常使用$广播，因为我试图避免使用$watch，因为性能损失(一个或两个没有伤害，但数百个会开始减慢速度)，但这只是个人选择。

只要使代码可读，并且更好地可重用，都是一个好方法

您不需要事件来共享添加到数组中的新元素的信息。

考虑如何在服务和工厂之间共享数据:

<<p> 视图/strong> 
<div ng-app="myApp">
  <div ng-controller="myApp">
    <ul>
      <li ng-repeat="item in getElements()">
        {{ item }}
      </li>
    </ul>
  </div>
</div>

控制器,工厂

angular.module('myApp', [])
.controller('myApp', function($scope, list) {    
  $scope.getElements = function() {
    return list.elements;
  };
}).factory('list', function($interval) {
  var elements = [];
  var elementsAdded = 0;
  var interval = $interval(function() {
    ++elementsAdded;
    elements.push(elementsAdded);
    if(elementsAdded >= 5) {
        $interval.cancel(interval);
    }        
  }, 500);
  return {
    elements: elements
  };
});
http://jsfiddle.net/krzysztof_safjanowski/ybzLs/

相关文章：