【问题标题】:AngularJS view not updating when model changed模型更改时AngularJS视图不更新
【发布时间】:2016-02-26 13:22:39
【问题描述】:

首先,我在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 等解决方案,但无法解决我的问题。

怎么了?

【问题讨论】:

  • 您能否提供更多代码或小提琴让我们看到您的问题?
  • 您是将问题设置到新数组还是将新元素推入现有数组?
  • @DaveBush 我将新元素推送到现有数组。
  • QuestionService 的代码是什么样的?如果您的回调是从内部角度代码触发的,那么它应该一切正常,但是如果您做一些非角度的事情来触发可能是问题的回调。
  • 你回答了我的非此即彼的问题,所以我仍然不知道你在做什么。

标签: javascript angularjs angular-material


【解决方案1】:

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

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

$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);
 })
}

【讨论】:

  • 这是我一直想问的。如果他不重复使用同一个数组,这就是正确的答案。
【解决方案2】:

你可以用 $watch 方法做到这一点:

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

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

【讨论】:

  • 这是一个不需要的 hack
  • 会导致$scope.getQuestionByDateRange无限循环调用
【解决方案3】:

您遇到的问题是您要替换整个数组,这似乎会导致 Angular 出现问题。

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

【讨论】:

    猜你喜欢
    • 2014-02-13
    • 2013-12-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-23
    • 2012-12-31
    • 1970-01-01
    相关资源
    最近更新 更多