Обновление родительской области от дочернего элемента в угловом

Question

Im действительно новичок во всем этом, но Im создает небольшое приложение, в которое я мог бы добавлять элементы с подробностями и обновлять их и т. Д. С помощью ионных, кордовых и угловых и Im, борющихся со следующим сценарием:

у меня есть ионные установки взглядов, как так:

index.html:

<div ng-controller="mainController"> 
    <ion-nav-view> 

    </ion-nav-view> 
</div> 

list.html:

<ion-content> 
    <ion-list> 
     <ion-item ng-repeat="item in items track by $index | filter:search" ui-sref="detailView({itemId: $index})">{{ item.name }}</ion-item> 
    </ion-list> 
</ion-content> 

add.html:

<ion-content> 
    <label class="item item-input"> 
     <input type="text" ng-model="item.name" placeholder="Item title..."/> 
    </label> 
    <label class="item item-input"> 
     <textarea cols="30" rows="10" ng-model="item.field1" placeholder="Field1..."></textarea> 
    </label> 
    <label class="item item-input"> 
     <textarea cols="30" rows="10" ng-model="item.field2" placeholder="Field2..."></textarea> 
    </label> 
    <div class="row"> 
    <div class="col col-33"></div> 
    <div class="col col-33"> 
     <button class="button button-block" ng-click="addItem()">Add</button> 
    </div> 
    <div class="col col-33"></div> 
    </div> 
</ion-content> 

Тогда я сделал завод, который я только сейчас тестирование, и это выглядит следующим образом:

фабрики:

.factory('itemFactory', ['$cordovaFile', '$q', function ($cordovaFile, $q) { 
var itemFactory = {}; 

itemFactory.get = function() { 
    var deferred = $q.defer(); 

    $cordovaFile.checkFile('items.json') 
    .then(function (result) { 

     $cordovaFile.readAsText('items.json') 
     .then(function (result) { 
      var parsedResult = JSON.parse(result); 
      deferred.resolve(parsedResult) 
     }, function (err) { 
      deferred.resolve([]); 
     }) 

    }, function (err) { 

     switch(err.code) { 
     case 1: 
      $cordovaFile.createFile('items.json'); 
      deferred.resolve([]); 
     } 

    }); 

    return deferred.promise; 
}; 

itemFactory.add = function (itemsFromScope, newItem) { 
    var deferred = $q.defer(), 
    dataToWrite; 
    itemsFromScope.push(newItem); 

    dataToWrite = JSON.stringify(itemsFromScope); 

    $cordovaFile.writeFile('items.json', dataToWrite, {append: false}) 
    .then(function (result) { 
     deferred.resolve(itemsFromScope); 
    },function (err) { 
     console.log("Write failed"); 
     deferred.reject(err); 
    }); 

    return deferred.promise; 
}; 

return itemFactory; 

    }]); 

Тогда mainController:

.controller('mainController', function ($scope, itemFactory) { 
    $scope.items = []; 
    itemFactory.get() 
     .then(function (result) { 
     $scope.items = result; 
     }); 
    }) 

И затем addController:

.controller('addController', function ($scope, $location, itemFactory) { 
    $scope.newItem = {}; 

    $scope.newItem.name = ""; 
    $scope.newItem.field1 = ""; 
    $scope.newItem.field2 = ""; 


    $scope.addItem = function() { 

     itemFactory.add($scope.items, $scope.newItem) 
     .then(function (result) { 
      $scope.items = result; 
     }); 

     $scope.title=""; 
     $scope.field1=""; 
     $scope.field2=""; 

     $location.path('/').replace(); 
    }; 

    $scope.goBack = function() { 
     $scope.title=""; 
     $scope.field1=""; 
     $scope.field2=""; 
     $location.path('/').replace() 
    }; 


    }) 

Контроллеры загружаются в виды с помощью ui-router.

Теперь это все хорошо, это могут быть не самые оптимальные вещи, но эй, я просто пытаюсь разобраться. Но странная часть началась, когда я заметил, что в моем addController у меня были $scope.field1=""; и т. Д. Вместо $scope.newItem.field1 = "";. Поэтому я решил исправить их, и после этого исправления добавление больше не работает. Вместо того, чтобы добавлять правильные значения к моим объектам $ scope.items в mainController, я получаю на нем пустой элемент. Когда я запускаю это на эмуляторе iOS, в мой список добавлена ​​пустая строка. Если я перезапущу эмулятор, новый элемент появится просто отлично. Я предполагаю, что что-то теперь обновляется в неподходящее время или что-то в этом роде, но я не могу понять, что и где. Любые подсказки или объяснения?

EDIT: Добавлена ​​скрипка JS с таким же любопытным вопросом упрощения: http://jsfiddle.net/9gx3tfmy/ Как вы можете видеть, что данные добавляются в массив на заводе, но интерфейс не обновляется

edit2: На самом деле , nvm, который работает на jsfiddle, но то же самое с ионным и его взглядами не работает. Я удалил часть кода CordovaFile кода, но то же самое, даже в браузере. Я проверю, могу ли я обновить jsfiddle в аналогичном состоянии

EDIT3: Теперь мне удалось заставить его работать в jsfiddle, но не могу попробовать его в моем проекте до сегодняшнего дня. Рабочая скрипка здесь: http://jsfiddle.net/9yhryL6y/8/

Если я не добавляю $ scope.newItem = {} в addController, элементы добавляются как неопределенные.

Answer 1

Похоже, ваши поля ввода связаны с $scope.item в add.html, не newItem, так $scope.newItem предположительно еще пустой элемент по умолчанию при попытке добавить его.

Try:

<label class="item item-input"> 
    <input type="text" ng-model="newItem.name" placeholder="Item title..."/> 
</label> 
<label class="item item-input"> 
    <textarea cols="30" rows="10" ng-model="newItem.field1" placeholder="Field1..."></textarea> 
</label> 
<label class="item item-input"> 
    <textarea cols="30" rows="10" ng-model="newItem.field2" placeholder="Field2..."></textarea> 
</label> 

Также причина JSFiddle не работает, потому что вы добавляете строки, как «значению1» в items массив, но он ожидает объект с name собственности.

Еще одна вещь, о которой нужно опасаться, - это просто нажать переменную scope в массив items, потому что она не создает новый объект, вы просто нажимаете на модель, в которую входы привязаны к массиву. Пример: http://jsfiddle.net/9yhryL6y/

Демо-версия ионного ToDo может быть полезна для примера нажатия новых объектов в массив для ng-repeat. https://github.com/driftyco/ionic-todo/blob/master/www/js/app.js

Answer 2

Итак, я, наконец, понял это. Моя проблема была в двух вещах, которые я неправильно понял с помощью Angular. Я вернулся полный объект с завода и переплетены одна часть его непосредственно в сферу так:

.controller('myController', ['$scope', 'myFactory', function ($scope, myFactory) { 
    $scope.items = myFactory.items; 
})]) 
.factory('myFactory', function() { 
    var factoryItems = {}; 

    factoryItems.items = ['item1', 'item2']; 
}); 

теперь, когда я обновил массив в моей фабрике, он не обновлялся в объеме. Так изменилось связывание с этим:

$scope.myFactory = myFactory; 

А потом в представлениях используется на заводе, как:

ng-repeat="item in myFactory.items track by $index" 

Это исправили проблему. Эта статья помогла мне много:

Modified data in a factory that's bound to a controller's scope, it doesn't update