AngularJS在运行时刷新选择带有动态内容的标签

Question

编辑 - 大量更改

页面加载后，我有一些 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

感谢阅读和帮助！！！

Answer 1

如果您改用 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;
    });
}]);