数组更新后 Ng-Repeat 不更新

Question

我有一个数组，其中包含要循环遍历的模板中卡片的对象。如果它检测到本地数据存储中没有任何内容，它将创建一个包含对象的数组。否则，它会从本地数据存储中检索它。按下按钮会将您带到共享同一控制器的另一个视图。有一个文本框，如果您按下提交按钮，它将把它拼接到数组中。如果检测到更改，我还有一个更新本地数据存储的监视功能。

问题是在向数组添加内容后 ng-repeat 不会更新。如果我只是因为本地数据存储加载而刷新页面，它就会出现。

有什么想法吗？

代码：controllers.js

.controller('NotesCtrl', function($scope, localStorageService) {
if (!localStorageService.get("agendaNotes")) {
    $scope.notes = [{
        title: "Civil War Notes"
    }, {
        title: "Types of Bacon"
    }];
    //If it exists retrieve it from keystore.
} else {
    $scope.notes = localStorageService.get("agendaNotes");
}

$scope.addNote = function(title) {
    $scope.notes.splice(0, 0, {
        title: title
    })
};

$scope.$watch("notes", function(newVal, oldVal) {
    if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
        localStorageService.add("agendaNotes", angular.toJson(newVal));
    }
}, true);

})

tab.notes.html

<ion-view view-title="Notes">
  <ion-content class="padding" ng-init="init()">
    <!-- To Do List for Notes:

    - Store Text in Object
    - Phonegap Camera API
    - Store Image in Object
    -->

    <a class="button button-full button-royal" href="#/tab/new">
      Add Notecard
    </a>

    <div class="card" ng-repeat="note in notes track by $index">
  <div class="item item-divider">
    {{note.title}}
  </div>
  <div class="item item-text-wrap">
    {{note.content}}  </div>
</div>
  </ion-content>
</ion-view>

新-note.html

<ion-view view-title="New Note">
    <ion-content>
        <!-- To Do:
      - Description
      - Images (?)
      -->
        <form ng-submit="addNote(data.newTitle, data.newDescription); data.newTitle = ''; data.newDescription = ''">
            <div class="list">
                <div class="list list-inset">
                    <h3>Note Title:</h1>
                    <label class="item item-input">
                        <input type="text" placeholder="Title" ng-model="data.newTitle">
                    </label>
                  <h3>Note Description:</h3>
                    <label class="item item-input">
                        <input type="text" placeholder="Description" ng-model="data.newDescription">
                    </label>
                </div>
                <button class="button button-block button-positive" type="submit">
                    Add Note
                </button>
            </div>
        </form>
    </ion-content>
</ion-view>

我已经尝试了 $scope.$apply(function(){}) 方法，它 returns 控制台出错：错误：[$rootScope:inprog] $apply already in progress

感谢任何帮助。谢谢

Answer 1

注入 $timeout（如 $scope）并用零参数包装你在 $timeout 函数调用中放置 apply 的代码。这会安全地触发摘要并且 'recommended'

$timeout(function() {
     // model update here
 })

Answer 2

我认为这是由于子范围问题造成的，Mark Rajcok 在另一个类似问题上有很好的答案 - Using the same controller on different elements to refer to the same object

简而言之，他写道

”每次Angular编译器在HTML中找到ng-controller时，都会创建一个新的作用域。（如果你使用ng-view，每次走不同的路线，也创建了一个新范围。)

如果您需要在控制器之间共享数据，通常服务是您的最佳选择。将共享数据放入服务中，将服务注入控制器：

数组更新后 Ng-Repeat 不更新

Ng-Repeat not updating after array update

html

javascript

arrays

angularjs

ionic-framework