角度模型在资源承诺内为空

Question

我正在尝试在资源承诺中实现角度模型，但问题是此模型未定义。

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

我的资源定义：

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-routerAs：＆＃39; vm＆＃39;如果不在您的控制器中，请将控制器名称添加为vm＆＃39;