angularjs .then() 不起作用（then 不是函数）

Question

我在使用 AngularJS (v1.3.15) 和 Angular-Route 为游戏创意开发简单的 GUI 时遇到了一些小问题。无论如何，对于注册，我想在输入时预先检查用户名的可用性。我设置了 $watch，调用工厂服务以获得 $http.post 答案，但在我的控制器中，我收到错误消息“fwMainService.checkUsernameAvailability(...)。然后是不是函数”。我对每个拼写、语法和逻辑都进行了三次检查（顺便说一句，我是 Angular 的新手）。所有其他工厂功能都按预期工作。

是否因为 checkUsernameAvailability() 应该 return 一个承诺，而不是一个字符串？

有什么想法吗？提前致谢！

我的工厂：

"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);
},
[...]

我的控制器：

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

});

[...]

编辑 #1：我添加了一个 jsfiddle：http://jsfiddle.net/Kyrm/71kz617g/6/ 也许有人让它工作...

Answer 1

jsFiddle 需要一些调整才能工作，但总的来说，您需要做的是：

在 mFac.checkUsernameAvailability 函数中，您需要 return $http.post() 结果。
你需要注入 $q 到工厂。
而不是 returning res.data，只是 return res
在所有出现 return 字符串的情况下，return $q.when(str)（其中 str 是字符串）。这将确保你的函数的所有存在路径 return 一个承诺（然后你可以在所有情况下调用 then）。

angularjs .then() 不起作用（then 不是函数）

angularjs .then() doesn't work (then is not a function)

javascript

angularjs

service

factory