Question

我有以下控制器，当我调用$scope.remove()时，它向usercart发出请求，向user发出请求。 api返回json对象，该对象具有带有购物车项目数组的对象。

页面上的html使用ng-repeat来遍历项目，但由于某种原因页面没有更新，我无法弄清楚原因。

// Main controller
app.controller('Checkout', function($scope, usercart){

    $scope.cart = [];

    $scope.$watch(function(){
        return usercart.cart;
    }, function(newVal, oldVal){
        if(newVal !== oldVal){
            $scope.cart = newVal;
        }
    }, true);

    $scope.remove = function(domain){
        usercart.remove(domain);
    };

});

此服务向api发出请求并保存购物车数据。

// User cart service
app.service('usercart', function(cart){
    this.remove = function(domain){
        // cart is an api service to make http requests
        cart.removeDomain(domain).success(function(data){
            this.cart = data.cart;
        });
    };
});

这是一个json响应示例：

{
    "message":"Success",
    "cart":[{
        "domain":"asdfsadfsadf.org",
        "years":2,
        "amount":9
    },{
        "domain":"asdsmembers.cc",
        "years":2,
        "amount":24.95
    },{
        "domain":"asdsmembers.tv",
        "years":2,
        "amount":39.95
    }]
}

这是html：

<tr ng-repeat="i in cart">
    <td data-th="Product">
        {{i.domain}}
    </td>
    <td data-th="Price">${{i.amount|number:2}}</td>
    <td data-th="Quantity">
        <select ng-model="i.years" ng-options="y.value as y.name for y in selYears" ng-disable="isInCart(i.domain)" ng-class="{disabled: isInCart(i.domain)}" ng-change="update(i.domain, 'years', i.years)"></select>
    </td>
    <td class="actions" data-th="" align="center">
        <button class="btn btn-default btn-sm" style="background: #333;" ng-click="remove(i.domain)"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true" style="color:#fff;"></span></button>
    </td>
    <td data-th="Subtotal" class="text-center">${{i.years * i.amount|number:2}}</td>
</tr>

当页面加载表时显示正常。就在我运行删除功能时。

Answer 1

我没有尝试，但我相信这是问题

cart.removeDomain(domain).success(function(data){
        this.cart = data.cart;
    });

由于this是指向回调函数调用者的指针，因此您将在cart api服务上创建cart属性。为了避免这个问题，您应该创建一个名为（按惯例）self的变量并为其分配this（在usercart服务的开头）：

var self = this;

之后，将您的代码更改为：

cart.removeDomain(domain).success(function(data){
        self.cart = data.cart;
    });

为了更好地理解，您可以浏览post

Answer 2

在您的单身$scope中查看您所知道的值的本地usercart肯定是行不通的，除非您明确地传入了该局部范围。我们可以通过消除$watch并解决我们可以从服务中返回的承诺来简化这一过程。这允许通用的重复使用并减轻观察者污染我们的控制器。请注意以下更改......

app.service('usercart', function(cart) {
    this.remove = function(domain) {
        return cart.removeDomain(domain) // return promise
    };
});

app.controller('Checkout', function($scope, usercart) {
    $scope.remove = function(domain) {
        usercart.remove(domain).then(function(data) { // resolve promise
            $scope.cart = data.cart;
        });
    };
});

$ watch（）没有更新$ scope

2 个答案: