Angular 模型在资源承诺中为空

Question

我正在尝试在资源承诺中实现一个 angular 模型，但问题是该模型未定义。

基本上我有页面上显示的产品列表，并且我对所有产品都有删除操作。我想在成功删除商品后，在页面上实现商品列表。

我的资源定义：

angular.module('bookshop').factory('productsFactory', function($resource, serverUrlValue) {
  return $resource(serverUrlValue + '/bookshop/products/:id', {
    id: '@id',
    query: '@query'
  }, {
    update: {method: 'PUT'},
    search: {method: 'GET', params: '@query', url: serverUrlValue + '/bookshop/products/search', isArray: true}
  });
});

我的控制器定义：

angular.module('bookshop').controller('cmsProductsController', function($state, $stateParams, utilService, productsFactory, categoriesFactory) {
  this.products = productsFactory.query();
  //skipped methods
  this.remove = function(productId) {
    //here object looks good
    console.log(this.products);
    this.result = productsFactory.delete({id: productId}).$promise.then(function() {
        //here object is undefined
        console.log(this.products);
        this.products = productsFactory.query();
    })
  }
});

我的HTML:

<tr ng-repeat="product in cmsProductsCtrl.products track by $index">
  <td>{{product.name}}</td>
  <td>{{product.price | currency}}</td>
  <td>
    <a ng-click="cmsProductsCtrl.remove(product.id)" href="">
      <span class="glyphicon glyphicon-trash icon-sm"></span>
    </a>
  </td>
</tr>

我还使用 ui-router 来管理控制器和视图。

我的路线定义：

angular.module('bookshop').config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider.state('cms.products', {
    url: '/products',
    controller: 'cmsProductsController',
    controllerAs: 'cmsProductsCtrl',
    templateUrl: 'core/cms/products/cms-products.tpl.html'
  });
});

来自调试器的屏幕：

更新

感谢@Jesus Carrasco，我通过控制器中的这些更改解决了我的问题

解决方案：

angular.module('bookshop').controller('cmsProductsController', function($state, $stateParams, utilService, productsFactory, categoriesFactory) {
  this.products = productsFactory.query();
  //skipped methods
  this.remove = function(productId) {
    var model = this;
    //object looks good
    console.log(model.products);
    productsFactory.delete({id: productId}).$promise.then(function() {
      //object also looks good
      console.log(model.products);
      model.products = productsFactory.query();
    });
  }
});

Answer 1

问题是 this 的范围，最好使用 $scope 或更好的别名，如 vmSomething = this;以避免此类问题。试试这个例子。

状态配置阶段

$stateProvider.
state('yourstate',{
 url:'yoururl',
 controller:'cmsProductsController',
 controllerAs:'vm',
 templateUrl:'yourhtmlroute'
});

控制器 避免使用这个。尝试更好地使用 controllerAs

angular.module('bookshop').controller('cmsProductsController', 
function($state, $stateParams, utilService, productsFactory, 
categoriesFactory) {
  //skipped methods
  var vm = this;
  vm.remove = function(productId) {
//here object looks good
console.log(vm.products);
    vm.result = productsFactory.delete({id: productId}).$promise.then(function() {
    //here object is undefined
    console.log(vm.products);
    vm.products = productsFactory.query();
    })
  }
});

HTML

<tr ng-repeat="product in vm.products track by $index">
  <td>{{product.name}}</td>
  <td>{{product.price | currency}}</td>
  <td>
    <a ng-click="vm.remove(product.id)" href="">
      <span class="glyphicon glyphicon-trash icon-sm"></span>
    </a>
  </td>
</tr>

如果你在状态下使用 ui-router 使用 controllerAs:'vm' 如果不在你的 ng-controller 中添加 'controllerName as vm'

Angular 模型在资源承诺中为空

Angular model is null inside resource promise

javascript

angularjs

angular-resource