2015-05-22 23 views
2

我有一个小问题,使用AngularJS(v1.3.15)和Angular-Route开发一个简单的GUI游戏创意。 无论如何,对于注册,我想在输入时预先检查用户名的可用性。我设置了一个$ watch,调用工厂服务来获得一个$ http.post答案,但在我的控制器中,出现错误“fwMainService.checkUsernameAvailability(...)。那么它不是函数”。 我三重检查每一个拼写,语法和逻辑(顺便说一句,我是新来的Angular)。 其他每个工厂功能都按其应有的工作。angularjs .then()不起作用(然后不是函数)

是否因为checkUsernameAvailability()应该返回一个promise,而不是一个字符串?

任何想法?提前致谢!

我厂:

"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/ 也许有人会受到它的工作...

+0

试试这个返回checkUsernameAvailability(username); – carton

+0

究竟在哪里? – Kapparina

+0

在您的工厂更换 返回mFac.checkUsernameAvailability(用户名);通过返回checkUsernameAvailability(username); (我不知道这个解决方案,但你可以尝试) – carton

回答

3

的需要的jsfiddle一些调整工作,但一般来说,你需要做的工作是:

  • 在mFac.checkUsernameAvailability函数中你需要返回 $ http.post()的结果。
  • 您需要向工厂注入$ q。
  • 而不是返回res.data,只是返回水库
  • 在你返回一个字符串的所有事件中,返回$ q.when(str)(其中str是字符串)。这将确保你的函数的所有存在路径都返回一个承诺(然后你可以在任何情况下调用)。
+0

为什么需要注入$ q?我不在函数 – Kapparina

+0

中使用多个$ http请求。因此,您可以使用$ q.when()封装您使用承诺返回的字符串。我创建了一个基于你的工作jsFiddle:https://jsfiddle.net/orendr/bj1cgqxf/ – OrenD

+0

据我所知,工厂函数必须返回一个承诺,对吧?所以如果它应该返回一个字符串,那么必须使用$ q.when()将字符串转换为承诺,对吧? – Kapparina