资源承诺内角模型为null

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路由器。

我的路由定义：

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' 
    }); 
}); 

从调试屏幕：

UPDATE

得益于@Jesus卡拉斯科我解决我的问题，通过这些变化控制器

解决方案：

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的范围，其更好使用$范围或甚至更好像vmSomething别名=此;以避免这种问题。试试这个例子。

国家配置相

$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> 

，如果你AR使用UI路由器状态使用controllerAs： '虚拟机'，如果不是在你的NG-控制器添加 'controllerName为VM'