$ watch() не обновляет $ scope

Question

У меня есть следующий контроллер, и когда я звоню $scope.remove(), он делает запрос к usercart, который делает запрос на api. 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> 

Кроме того, когда страница загружается таблица отображает хорошо. Это просто, когда я запускаю функцию remove.

Answer 1

Я не пробовал, но я считаю, что здесь проблема

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

Поскольку this является указателем на вызывающую функцию обратного вызова вы будете создавать cart собственности на вашей службу 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; 
     }); 
    }; 
});