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（）{}）方法并在控制台中返回错误：错误：[$ rootScope：inprog] $ apply已在进行中

感谢任何帮助。感谢

Answer 1

注入$ timeout（如$ scope）并将代码放在$ timeout函数调用中，并使用零参数。这会安全地触发摘要，并且建议使用

$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不更新

2 个答案: