将变量从工厂分配给控件不起作用

我的html是这样的：

<body ng-controller="MainCtrl as ctrl" class="bodyContainer">
<div ng-repeat="stuff in ctrl.stuffies">
here
</div>

这是我的控制器：

angular.module("AuthenticationApp", ["BaseApp"])
.controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {
var self = this;
BaseService.fetch.stuffs(function() {
self.stuffies = BaseService.stuffies;
console.log(self.stuffies);
self.cerrorMessages = BaseService.cerrorMessages;
});
}]);

这是我的BaseApp：

angular.module("BaseApp", [])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}])
.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true);
}])
.factory("BaseService", ["$http", "$window", function($http, $window) {
var self = this;

/* All functions which call fetch should have a callback function
* on the front-end which sets 
* 1) a variable (i.e. stuffies etc.)
* 2) and BaseService.cerrorMessages. */
self.fetch = {
stuff: function(callback) {
$http.get("/stuffs/")
.then(function(response) {
self.stuffies = response.data;
callback();
}, function(response) {
self.accessErrors(response.data);
callback();
});
}
};

问题是，即使它在self.stuffies中记录了一个项目(当运行此行时：console.log(self.stuffies);)，here也不会打印在 HTML 中。ctrl.stuffies里面似乎什么都没有.我尝试将console.log(self.stuffies);移动到BaseService.fetch.stuffs(function()之外，它记录了undefined.如何获得ctrl.stuffiesBaseService.stuffies？

无需对$http服务使用回调，因为它返回 promise：

//.factory("BaseService", ["$http", "$window", function($http, $window) {
app.service("BaseService", ["$http", "$window", function($http, $window) {
//var self = this;

/* All functions which call fetch should have a callback function
* on the front-end which sets 
* 1) a variable (i.e. stuffies etc.)
* 2) and BaseService.cerrorMessages. */
this.fetch = {
stuff: function() {
//vvvv RETURN the promise
return $http.get("/stuffs/")
.then(function(response) {
//vvvv RETURN the data
return response.data;
//self.stuffies = response.data;
//callback();
});//, function(response) {
//    self.accessErrors(response.data);
//    callback();
//});
}
};
});

无需对服务中的$http错误执行任何操作。错误将在承诺中自动结转。

然后在控制器中从承诺中提取数据(或错误)：

/* REPLACE
BaseService.fetch.stuffs(function() {
self.stuffies = BaseService.stuffies;
console.log(self.stuffies);
self.cerrorMessages = BaseService.cerrorMessages;
});
*/

BaseService.fetch.stuffs
.then(function(data) {
self.stuffies = data;
console.log(self.stuffies);
}).catch(function(errorResponse) {
self.cerrorMessages = errorResponse.data;
});

有关详细信息，请参阅

AngularJS $http Service API 参考。
MDN JavaScript 参考 -return语句

我把你的服务改成了工厂
~~，并把它变成了~~这样：并这样使用：
BaseService.fetch.stuffs() 
.then(function(data) {
self.stuffs = data;
console.log(self.stuffs);  
}).catch(function(errorResponse) { 
self.cerrorMessages = errorResponse.data; 
});
这很好吗(使用工厂，因为工厂内部还有其他功能，我不想将它们全部更改为服务)？
对不起，工厂是
self.fetch = { 
stuffs: function() { 
return $http.get("/stuffs/")
.then(function(response) {
return response.data; 
});
}
};

服务或工厂都可以工作。使用服务，可以通过向自动返回的this上下文添加属性来添加函数(除非被return语句重写)。对于工厂，return声明是强制性的。函数将添加到返回的对象中。选择是一个风格问题。它们都以相同的方式使用。

您正在使用像服务一样的工厂。

让工厂自调用(初始化)其self.fetch函数，然后在构建控制器时，将控制器的stuffies变量设置为等于工厂的stuffies变量。

编辑：

如果只想一次初始化某些数据，则可以仅自调用最初要检索数据的函数。

然后，您可以在路由中使用解析在命中特定路由时初始化更多数据。

相关内容

最新更新

热门标签：