Question

将数据绑定到名为$scope的var的问题。我调用mysql数据库，它通过express发送数据。

app.get('/options', function(req, res)
{
var arr = [];
var query = "SELECT * FROM memberships";
con.query(query, function(err, result)
{
    if (err)
    {
        console.log("error retriving memberships from the db " + err);
        throw err;
    }
    res.send(result);
}); 


 /* server side of things  */

现在去角度方面。

    app.controller('MainController', ['$http', '$scope', '$log', 
    'getmemOptions', function($http, $log, $scope, getmemOptions)

    {
    var gymmem = this;
    gymmem.onSubmit = onSubmit;

    gymmem.options;
    $scope.things;
    var promise = $http.get('/options');

    promise.then(function(payload)
    {
     $scope.things = angular.copy(payload.data);
     alert(JSON.stringify($scope.things)); // 1st call view $scope.things
});

    alert(JSON.stringify($scope.things)); // 2nd call view $scope.things

在我第一次打电话给JSON.stringify($scope.things)时，我可以看到它从数据库中提取正确的信息;但是第二次调用产生未定义。我知道javascript的异步性质$http调用将如何返回一个promise。我相信我正在处理这个承诺，但如果我不是，请告诉我如何改变。提前谢谢!!

修改

这是角形模板。

     gymmem.model = 
    {
        first_n: '',
        last_n: '',
        email: '',
        age: '',
        memberships: '',
    };

    gymmem.fields = [
        {
            key: 'first_n',
            type: 'input',
            model: gymmem.model.f_name,
            templateOptions: 
            {
                type: 'text',
                label: 'First Name',
                placeholder: 'Enter your first name',
                required: true
            }
        },

       {
            key: 'last_n',
            type: 'input',
           // model: gymmem.model.l_name,
            templateOptions: 
            {
                type: 'text',
                label: 'Last Name',
                placeholder: 'Enter your last name',
                required: true
            }
        },

        {
            key: 'email',
            type: 'input',
            //model: gymmem.model.email,
            templateOptions: 
            {
                type: 'text',
                label: 'Email Address',
                placeholder: 'Enter your email address',
                required: true
            },
            hideExpression: '!model.first_n || !model.last_n' 
        }, 

         {
            key: 'age',
            type: 'input',
            //model: gymmem.model.age,
            templateOptions: 
            {
                type: 'number',
                label: 'Age (must be 16+)',
                placeholder: 'Enter your age',
                required: true
            },
            //check if customer is 16+
            validators:
            {
                    ofAge: function($viewValue, $modelValue, scope)
                    {
                        var age = $viewValue || $modelValue;
                        if (age >= 16)
                            return true;
                        return false;
                    }
            }
        },

         {
            key: 'memberships',
            type: 'select',
            model: gymmem.model.membership,
            templateOptions: 
            {
                label: 'Membership Types',
                required: true,
                placeholder: "Select Membership",
                options: $scope.things//[{"name":"Martial Arts Membership","value":45},{"name":"Regular Gym Membership","value":30},{"name":"Cardio Classes Membership","value":35}]


            }
        },

    ]; 

    function onSubmit()
    {
            //alert(JSON.stringify(gymmem.model), null, 2);
            $http.post('/', gymmem.model).success(function(req)
            {
                gymmem.model = {};
                console.log("Front end data " +req);
            }).error(function(err)
            {
                console.log(err);
            });
    };


   }

]);

以下是html。

<body ng-app="GymApp" ng-controller="MainController as gymmem">

<div class="container col-md-4 col-md-offset-4">
    <form ng-submit="gymmem.onSubmit()" novalidate>
        <h1> Buy Gym Membership(s) </h1>
        <formly-form model="gymmem.model" fields="gymmem.fields">
        <button type="submit" class="btn btn-primary submit-button">Submit</button>
        </formly-form>
    </form>
</div>  
</body>

[{＆＃34; name＆＃34;：＆＃34; Martial Arts Membership＆＃34;，＆＃34; value＆＃34;：45}，{＆＃34; name＆＃34;：＆＃34 ;常规健身会员资格＆＃34;，＆＃34;价值＆＃34;：30}，{＆＃34;名称＆＃34;：＆＃34;心血管会员资格＆＃34;，＆＃34;价值＆＃34;： 35}]是我想要$ scope.things的数据。这里的数据正在通过$ http.get（）调用进行处理。

抱歉格式化问题。 stackoverflow发布的新功能，有点匆忙。

Answer 1

如果您在第一个$http中获得结果，我们认为您正在处理alert()电话。

这里的问题似乎在你的控制器声明中：

app.controller('MainController', ['$http', '$scope', '$log', 
'getmemOptions', function($http, $log, $scope, getmemOptions)

您的依赖注入不匹配。请注意$scope是如何进行第二次注射，但在控制器功能中，您将其称为$log。因此，您实际上并未将任何内容绑定到$scope。您确实试图将其绑定到$log。

将控制器声明中依赖项的顺序更改为：

app.controller('MainController', ['$http', '$scope', '$log', 
'getmemOptions', function($http, $scope, $log, getmemOptions)

$ http调用后，angularjs不会将数据绑定到$ scope并且promise返回

1 个答案: