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> 

Я попытался $ объем $ применять (. function() {}) и возвращает ошибку в консоли: Ошибка: [$ rootScope: inprog] $ apply уже выполняется

Любая помощь приветствуется. Спасибо

Answer 1

Я думаю, что это из-за проблемы ребенка определения объема и Марк Rajcok имеет большой ответ на другой аналогичный вопрос - Using the same controller on different elements to refer to the same object

Вкратце он пишет

«Каждый раз, когда угловой компилятор находит ng-контроллер в HTML, создается новая область (если вы используете ng-view, каждый раз, когда вы переходите на другой маршрут, создается новая область).

Если вам нужно обмениваться данными между элементами управления Как правило, услуга - ваш лучший вариант. Поместите общие данные в службу и введите службу в контроллер: «

Answer 2

Inject $ timeout (как $ scope) и оберните код, в который вы положили заявку, в вызов функции $ timeout с нулевым аргументом. Это вызывает дайджест безопасно и «рекомендуется»

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