Hey there! So I'm a beginner in this whole programming thing, but I'm currently working on a small application where I can add and update items with details using Ionic, Cordova, and AngularJS. However, I've hit a roadblock with the following scenario:
This is how my Ionic views are set up:
In index.html:
<div ng-controller="mainController">
<ion-nav-view>
</ion-nav-view>
</div>
In 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>
In 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>
I have also created a factory that I am currently testing, and it looks something like this:
In the factory:
.factory('itemFactory', ['$cordovaFile', '$q', function ($cordovaFile, $q) {
var itemFactory = {};
// Implementation of get function...
itemFactory.add = function (itemsFromScope, newItem) {
// Implementation of add function...
};
return itemFactory;
}]);
Next, comes the mainController:
.controller('mainController', function ($scope, itemFactory) {
// Implementation of mainController...
})
And finally, the addController:
.controller('addController', function ($scope, $location, itemFactory) {
// Implementation of addController...
})
The above controllers are loaded into the views using ui-router.
Now everything seemed to be going well until I noticed a small mistake in the addController where I had $scope.field1=""; instead of $scope.newItem.field1 = "";. After correcting this, the addition process stopped working correctly. Instead of adding the correct values to my $scope.items in the mainController, I ended up with an empty item. Running this on an iOS emulator showed an empty row in the listing. Restarting the emulator displayed the new item properly. I suspect there might be a timing issue with the refresh that I can't seem to pinpoint. Any suggestions or explanations would be greatly appreciated!
Note: I have included a JSFiddle link demonstrating a similar issue for simplicity: http://jsfiddle.net/9gx3tfmy/ As shown in the JSFiddle, the data is added to the array in the factory, but the UI does not update
Update: Disregard the JSFiddle, as it seems to be working fine there, but the same problem persists with Ionic and its views. I removed the $cordovaFile parts from the code, yet the issue remains, even in the browser. I'll see if I can replicate a similar situation in the updated JSFiddle at a later time
Update: I managed to resolve the issue in the JSFiddle, but won't be able to test it in my project until later today. Functional Fiddle here: http://jsfiddle.net/9yhryL6y/8/
If I omit $scope.newItem = {} in the addController, the items are added as undefined.