使用angular databind从Parse中检索和显示信息

时间:2015-01-02 14:07:30

标签: javascript angularjs data-binding parse-platform

我正在使用angular databind来检索和显示来自Parse的信息。特别是,我想要的是在query.get中使用用户在文本字段中输入的ObjectID来检索该特定用户的各种信息。这似乎不起作用,我想知道代码中是否有拼写错误。

以下是Javascript代码:

Parse.initialize("ID", "ID");


angular.module('AuthApp', [])
.run(['$rootScope', function($scope) {
  $scope.scenario = 'Sign up';
  $scope.currentUser = Parse.User.current();


  $scope.signUp = function(form) {
    var user = new Parse.User();
    user.set("password", form.password);
        user.set("username", form.username);

    user.signUp(null, {
      success: function(user) {
window.location = 'myprofile.php'
      },
      error: function(user, error) {
        alert("Unable to sign up:  " + error.code + " " + error.message);
      }
    });    
  };

  $scope.userIdChanged = function () {
    var query = new Parse.Query(Parse.User);

    query.get($scope.userId, {
      success: function(userInfo) {
        // The object was retrieved successfully.
        var address = userInfo.get("Address");
        $scope.address = 'Address: ' + address;
      },
      error: function(object, error) {
        // The object was not retrieved successfully.
        // error is a Parse.Error with an error code and message.
      }
    });
  };

特别是,这是受影响的部分:

$scope.userIdChanged = function () {
    var query = new Parse.Query(Parse.User);

    query.get($scope.userId, {
      success: function(userInfo) {
        // The object was retrieved successfully.
        var address = userInfo.get("Address");
        $scope.address = 'Address: ' + address;
      },
      error: function(object, error) {
        // The object was not retrieved successfully.
        // error is a Parse.Error with an error code and message.
      }
    });
}

以下是html部分:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
<!--======================================================================-->
<!--Custom website css file is linked here-->
<link href="css/style1.css" rel="stylesheet">
<!--Font Awesome CSS link-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--=================================================-->
<!--Javascript file linked here-->
<script src="js/bootstrap.min.js"></script>
<script src="js/personal.js"></script>
    <script src="js/functions.js"></script>

<meta charset=utf-8 />
<title>Admin Panel</title>



});
</script>
</head>
<body ng-app="AuthApp">


  <div ng-show="currentUser">


  userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
    <div>{{addresss}}</div>





  </div>
</body>
</html>

非常感谢任何帮助。

更新 以下是显示的结果:

enter image description here

以下是html代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>

    <script src="js/functions.js"></script>

  <script src="angular.js"></script>



</head>
<body ng-app="AuthApp">
    <div ng-controller="MyCntrl">
         userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
            <div>{{addresss}}</div>
        ...
    </div>
    </body>
</html>

以下是javascript:

Parse.initialize("id", "id");


var module = angular.module("AuthApp", []);

module.controller("MyCntrl", function($scope){

$scope.userIdChanged = function () {
    // now access $scope.userId here
    var query = new Parse.Query(Parse.User);

    query.get($scope.userId, {
      success: function(userInfo) {
        // The object was retrieved successfully.
        var address = userInfo.get("Address");
        $scope.address = 'addresss: ' + address;
      },
      error: function(object, error) {
        // The object was not retrieved successfully.
        // error is a Parse.Error with an error code and message.
      }
    }
  };

});

1 个答案:

答案 0 :(得分:0)

将控制器与模块相关联以访问范围方法中的$ scope值。 示例代码如下:

HTML

<html>
    <head>
        ...
    </head>
    <body ng-app="AuthApp">
    <div ng-controller="MyCntrl">
         userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
            <div>{{addresss}}</div>
        ...
    </div>
    </body>
</html>

的js

var module = angular.module("AuthApp", []);

module.controller("MyCntrl", function($scope){

$scope.userIdChanged = function () {
    // now access $scope.userId here
  };

});

试试这个,会对你有帮助。