模型更改时,AngularJS视图不会更新

时间:2016-02-26 13:22:40

标签: javascript angularjs angular-material

首先,我在stackoverflow中查看了有关它的其他问题,并且我提到了很多答案,但仍然无法解决我的问题。

我正在使用Angular Material而我在查看&模型同步。

这是我的控制器代码:

$scope.getQuestionByDateRange = function (range) {
     QuestionService.getQuestions(1, 'week', 10, function (response) {
         $scope.questions = response.data;
     })
}

这是我的观看代码:

<ul>
   <li ng-repeat="question in questions">{{question.title}}<li>
<ul>

在我更新控制器中的$scope.questions变量时,我的视图正确呈现模型。

但是当我再次更新$scope.questions时:我的模型会更新(我可以看到控制台日志中的更改),但视图却没有。

我对此进行了研究,并找到了$scope.$apply$scope.$digest$scope.$evalAsync等解决方案,但无法解决我的问题。

怎么了?

3 个答案:

答案 0 :(得分:4)

这里的问题是整个对象正在被替换(因此它失去了它与视图的绑定)。

我不会替换整个对象;只需更换它的元素。

$scope.questions = $scope.questions || []; 
$scope.getQuestionByDateRange = function (range) {
 QuestionService.getQuestions(1, 'week', 10, function (response) {
     $scope.questions.length=0; // Reset the array
     $scope.questions.push.apply($scope.questions, response.data);
 })
}

答案 1 :(得分:0)

您可以使用$ watch方法执行此操作:

$scope.$watch('questions', function(){
  $scope.getQuestionByDateRange(range);
});

每次修改$ scope.question时都会触发$ watch方法

答案 2 :(得分:0)

您遇到的问题是您正在替换整个阵列,这似乎会导致Angular出现问题。

$scope.getQuestionByDateRange = function (range) {
     QuestionService.getQuestions(1, 'week', 10, function (response) {
         $scope.questions.push.apply($scope.questions, response.data);
     });
}