AngularJS Refresh在运行时选择包含动态内容的标记

时间:2015-05-28 22:38:21

标签: javascript jquery html json angularjs

编辑 - 许多更改

我的页面加载后,我有一些javascript函数调用返回数据,这些数据将在我的标记中用于填充标记选项。

目前的问题是:当javascript外部(甚至在AngularJS控制器内)更改值时。视图未更新。我已经尝试在$ scope中包装范围分配。$ apply(...)但是这只会导致$ digest()已经在进行中。

AngularJS代码:

app.service('userService', ['$http', function($http) {
    var userModel = {
        qGroupZero: '',
        qGroupOne: '',
        qGroupTwo: ''
    };

    var states = '';

    return{
        getUserModel: function() {
            return userModel;
        },
        getStates: function() {
            return states;
        },
        loadChallengeQuestions: function() {
            var userEnrollmentChallenge = getChallengeQuestions();
            console.log('loadChallengeQuestions()');

            userModel.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
            userModel.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
            userModel.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
        },
        loadStates: function(callback) {
            console.log('loadStates()');
            return $http.get('content/states.json').then(function(result) {
                states = result.data;
            });
        }
    };
}]);

app.controller('EnrollmentController', ['$scope', 'userService', '$http', function($scope, userService, $http) { //Dependencies and Constructor function.

    $scope.userService = userService;
    $scope.states = [];

    userService.loadChallengeQuestions();
    var userModel = userService.getUserModel();
    $scope.qGroupZero = userModel.qGroupZero.challengeQuestion; //<-- This assignment is not updated in the view.

    userService.loadStates().then(function(result) {
        $scope.states = userService.getStates(); //<-- This assignment is not updated in the view.
    });

}]);

challengeQuestion的内容是一个包含7个项目的JSON数组。

标记:

<select ng-model="selectionOne"
    name="question1"
    ng-options="opt as opt.questionText for opt in qGroupZero">
</select>
<select ng-model="state"
     name="state"
     ng-options="opt as opt.abbreviation for opt in states"
     class="required">
</select>

所以在这一点上。我有我所有的资源。我只需要找到一种方法让AngularJS重新评估ng-options值($ scope.value)并重绘内容?我想我说得对......

为什么我觉得这应该很容易?三天后,我在这里:D

感谢阅读和帮助!!!

1 个答案:

答案 0 :(得分:0)

如果您使用angular $ http服务和promise对象怎么办?

app.service('userService', ['$http', function($http) {
    var userModel: {
        qGroupZero: '',
        qGroupOne: '',
        qGroupTwo: ''
    };

    var states = '';

    return{
        getUserModel: function(){
            return userModel;
        },
        getStates: function(){
            return states;
        },
        loadChallengeQuestions: function(userEnrollmentChallenge) {
            console.log('loadChallengeQuestions()');
            userModel.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
            userModel.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
            userModel.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
        },
        loadStates: function(){
            return $http.get('content/states.json').then(function(result){
                states = result.data;
            });
        }
    }
});

app.controller('EnrollmentController', ['$scope', 'userService', function($scope, userService) { //Dependencies and Constructor function.
    $scope.states = [];

    userService.loadStates().then(function(result){
        var userModel = userService.getUserModel();
        $scope.states = userService.getStates();
        $scope.qGroupZero = userModel.qGroupZero.challengeQuestion;
    });
}]);