代码之家 › 专栏 › 技术社区 › ihunter2839

angularjs-ng repeat不更新

angularjs-service angularjs-ng-repeat angularjs

ihunter2839 · 技术社区 · 6 年前

我正在使用angular开发一个web商店,并试图使用服务清理代码。我希望该服务从rest api加载一个项列表,并在各种控制器上对这些项执行函数。当我试图用rest调用返回的数据填充ng repeat语句时,我的问题就出现了——这个列表从来没有填充过所提取的项。以前,我使用$scope和$apply来确保在返回数据时更新了我的dom——在服务中我可以做类似的事情吗?

服务

'use strict';
var serv = angular.module('serv', []);
serv.factory('shopService', function() {
    //create the shop client as service varible
    var client = window.ShopifyBuy.buildClient({
        domain: 'xxxxxxx.myshopify.com',
        storefrontAccessToken: 'xxxxxxxxxxxxxxxxx'
    });
    var products = [];
    client.product.fetchAll().then((products_complete) => {
        //do things and get the products ready
        products.push(item);
    });

    return {
        products: products
    }
});

控制器

'use strict';
var serviceApp = angular.module('serviceApp', ['serv']);
serviceApp.controller('CartController', ['shopService', function CartController(shopService) {
    //create a reference to the service variable
    this.products = shopService.products;
}]);

以及HTML

<body>
    <div ng-app="serviceApp" ng-controller="CartController as cart">
        <ul>
            <li ng-repeat="product in cart.products">
                <div> {{ product.title }} </div>
            </li>
        </ul>
    </div>
</body>

如有任何帮助,我们将不胜感激。

3 回复 | 直到 6 年前

BShaps 6 年前

在分配控制器中的产品之前,您可以确保Promise完成运行,并避免运行 fetchAll 不止一次。您可以更改服务:

serv.factory('shopService', function($q) {
    //create the shop client as service varible
    var client = window.ShopifyBuy.buildClient({
        domain: 'xxxxxxx.myshopify.com',
        storefrontAccessToken: 'xxxxxxxxxxxxxxxxx'
    });
    var products = [];
    var fetchAllCompleted = false;

    function getProducts() {
        var deferred = $q.defer();

        if (fetchAllCompleted) {
            deferred.resolve(products);
        } else {
            client.product.fetchAll().then((products_complete) => {
                //do things and get the products ready
                products.push(item);
                fetchAllCompleted = true;
                deferred.resolve(products);
            });
        }

        return deferred.promise;
    }


    return {
        getProducts: getProducts
    }
});

然后在控制器中

serviceApp.controller('CartController', ['shopService', function CartController(shopService) {
    //create a reference to the service variable
    shopService.getProducts().then(function(products) {
        this.products = products;
    });
}]);

这应该能解决你的问题。

ahsan ayub 6 年前

如果我正确地理解了你的问题,那么你就没有什么解决办法了。一是利用 $apply() 在您的ajax调用中,它将做什么?有时,当一个承诺被返回时,这些值不会被角度更新。它将返回一个空的obj。通过打电话 $APPLY() 您可以更新作用域。第二个解决方法是首先调用service并发送请求,然后生成一个返回函数,返回刚才在上面的service中调用的obj。setter和getter的概念,我使用这种方法,一个函数获取数据,另一个函数获取数据。最后一件事,你可以尝试是等到数据提取到你的obj,然后返回它。当您使用您的ng repeat时,如果每次调用服务, ng-repeat 不起作用,首先获取单个obj中的所有数据,然后调用该obj,记住在controller中只调用一次服务。服务会在ng重复之前返回您的数据。

-1

Mo Sa 6 年前

请尝试确保服务已启动并正在运行/返回后端数据.. 然后检查以下示例:

https://plnkr.co/edit/l7lGPRIs0ZuDWpVK2pX8?p=preview

角js

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="animations.css" rel="stylesheet" type="text/css">
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>
  <script src="script.js"></script>
    </head>
    <body ng-app="ngRepeat">
      <div ng-controller="repeatController">
      I have {{friends.length}} friends. They are:
      <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
      <ul class="example-animate-container">
        <li class="animate-repeat"
        ng-repeat="friend in friends">
          [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </li>
        <li class="animate-repeat" ng-if="results.length === 0">
          <strong>No results found...</strong>
        </li>
      </ul>
    </div>
    </body>
    </html>

JS对象:

(function(angular) {
  'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
  ];
});
})(window.angular);