I have a little problem developing a simple GUI for a game idea using AngularJS (v1.3.15) and Angular-Route. Anyway, for the registration, i want to pre-check the availability for the username while being typed. I set up a $watch, call the factory service to get an $http.post answer, but in my controller, I get the error "fwMainService.checkUsernameAvailability(...).then is not a function". I triple checked every spelling, the syntax and logic (btw I'm new to Angular). Every other factory function is working as it is supposed to.
我在使用AngularJS (v1.3.15)和Angular-Route开发一个简单的GUI时遇到了一个小问题。无论如何，对于注册，我想在键入时预先检查用户名的可用性。我设置了一个$watch，调用工厂服务获得$http。post answer，但是在我的控制器中，我得到了错误“fwMainService.checkUsernameAvailability(…)”。那就不是函数了。我对每一个拼写、语法和逻辑都进行了三次检查(顺便说一句，我对角度还不熟悉)。其他的工厂功能都在正常工作。
Is it because checkUsernameAvailability() should return a promise, not a string?
是因为checkUsernameAvailability()应该返回一个承诺，而不是字符串吗?
Any ideas? Thanks in advance!
什么好主意吗?提前谢谢!
My Factory:
我的工厂:
"use strict";
fwApp.factory('fwMainService', function ($http) {
var mFac = {};
mFac.checkUsernameAvailability = function (username) {
if(username != '') {
if(username.length >= 3) {
$http.post('api/user/usernameInUse.php', {newUser: username})
/* returns '1' if in use, '0' if free */
.success(function (res) {
if(res == '1') { // Username in use
return 'In Use!';
} else if(res == '0') {
return 'Free!';
}
})
.error(function (error) {
console.log("username check error: ", error);
});
} else {
return 'Username too short!';
}
} else {
return ''; // if empty, do not check
}
};
[...]
// Public API
return {
checkUsernameAvailability: function (username) {
return mFac.checkUsernameAvailability(username);
},
[...]
My Controller:
我的控制器:
"use strict";
fwApp.controller('IndexCtrl',
['$scope', '$http', '$timeout', '$location', 'fwMainService',
function ( $scope, $http, $timeout, $location, fwMainService) {
/* username input field model = newUser.username */
$scope.$watch("newUser.username", function (newValue, oldValue) {
if(angular.equals(newValue, oldValue)) {
return;
}
fwMainService.checkUsernameAvailability(newValue).then(function (res) {
console.log("return", res.data);
$scope.newUserMsg = res.data; // Setting infobox to "Free!" or "In Use!"
}, function (error) {
console.log("username check Error:", error);
});
});
[...]
Edit #1: I added a jsfiddle: http://jsfiddle.net/Kyrm/71kz617g/6/ Maybe someone gets it working...
编辑#1:我添加了一个jsfiddle: http://jsfiddle.net/Kyrm/71kz617g/6/也许有人可以使它正常工作……
1 个解决方案
#1
3
The jsFiddle needed some tweaking to work, but in general, what you need to do to make this work is:
jsFiddle需要进行一些调整才能工作，但是一般来说，您需要做的是:
- In the mFac.checkUsernameAvailability function you need to return the $http.post() result.
- mFac。checkUsernameAvailability函数，您需要返回$http.post()结果。
- You need to inject $q to the factory.
- 你需要给工厂注入$q。
- Instead of returning res.data, just return res
- 不是返回res.data，而是返回res
- In all occurrences in which you return a string, return $q.when(str) (where str is the string). This will make sure all exist paths of your function return a promise (and then you can call then in all cases).
- 在返回字符串的所有情况中，返回$ qwhen (str)(其中str是字符串)。这将确保函数的所有存在路径都返回一个承诺(然后在所有情况下都可以调用)。
#1
3
The jsFiddle needed some tweaking to work, but in general, what you need to do to make this work is:
jsFiddle需要进行一些调整才能工作，但是一般来说，您需要做的是:
- In the mFac.checkUsernameAvailability function you need to return the $http.post() result.
- mFac。checkUsernameAvailability函数，您需要返回$http.post()结果。
- You need to inject $q to the factory.
- 你需要给工厂注入$q。
- Instead of returning res.data, just return res
- 不是返回res.data，而是返回res
- In all occurrences in which you return a string, return $q.when(str) (where str is the string). This will make sure all exist paths of your function return a promise (and then you can call then in all cases).
- 在返回字符串的所有情况中，返回$ qwhen (str)(其中str是字符串)。这将确保函数的所有存在路径都返回一个承诺(然后在所有情况下都可以调用)。