Я не знаю почему, но мой index.html не хочет обновляться. Я попытаюсь показать свою проблему с кодом:
//Index.html part:
<ion-view>
<ion-content has-header="true" has-subheader="true">
<ion-list can-swipe="true">
<ion-item class="item item-avatar item-remove-animate" ng-repeat="contact in contactIndexCtrl.contacts | filter: contactIndexCtrl.search track by contact.id"
ui-sref="root.contact-detail(::{ id: contact.id })">
<img ng-src="./img/{{::contact.pic}}">
<h2>{{::contact.firstName }} {{ ::contact.lastName }}</h2>
<ion-card-content>
<h2>{{::contact.title}}</h2>
<p ng-bind-html="::contact.department"></p>
</ion-card-content>
<ion-option-button ng-click="contactIndexCtrl.edit(contact)" class="button-light icon ion-edit"> Edit</ion-option-button>
<ion-option-button ng-click="contactIndexCtrl.remove($event, contact)" class="button-assertive icon ion-trash-a" > Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Как вы можете видеть, есть две кнопки, которые могут вносить изменения в мой массив. Для удаления я использую тот же контроллер с отображением моих элементов. Здесь все нормально, и список обновления индексного представления после нажатия кнопки.
Проблема заключается в редактировании моих элементов:
//IndexController part:
import contactEditTemplate from "../contact-edit/contact-edit.html";
export default class ContactIndexController {
constructor($scope, $state, $q, $log, $ionicModal, $ionicListDelegate, contactsService) {
'ngInject';
let vm = this;
vm.edit = edit;
vm.remove = remove;
contactsService.findAll().then((contacts) => {
vm.contacts = contacts;
});
$scope.modal = $ionicModal.fromTemplate(contactEditTemplate, {
scope: $scope,
animation: 'slide-in-up'
});
$scope.$on('modal.hidden', function () {
contactsService.findAll().then(angular.bind(this, function (response) {
vm.contacts = response;
});
function edit(item) {
$scope.editingItem = item;
$ionicListDelegate.closeOptionButtons();
$scope.modal.show();
}
function remove(event, item) {
contactsService.remove(item);
}
contact-edit.html
:
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content ng-controller="ContactEditController as contactEditCtrl" class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="editingItem.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="editingItem.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="editingItem.email" type="text">
</label>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Select Manager
</div>
<select name="managerSelection" ng-model="editingItem.managerId">
<option ng-repeat="manager in contactEditCtrl.contacts" value="{{manager.id}}">{{manager.firstName + " " + manager.lastName}}</option>
</select>
</label>
</div>
<button class="button button-full button-positive" ng-click="save(editingItem)">Save Edits</button>
</div>
</ion-content>
</ion-modal-view>
contactsService
хранить array
контактов в localStorage
:
//Update method from service
update(item) {
this.$storage.contacts.some(function (contact) {
if (parseInt(contact.id) === parseInt(item.id)) {
Object.assign(contact, item);
return true;
}
});
return this.$q.when(this.$storage.contacts);
}
//And functions from EditCtrl:
$scope.save = function (item) {
$log.info($scope.editingItem);
$scope.modal.hide();
contactsService.update($scope.editingItem).then((contacts) => {
vm.contacts = contacts;
}.bind(this));
};
Я делаю то же самое, но основной вид, когда все контакты обновляются только после обновления страницы. Также, если я открою окно модели после редактирования контакта, обновленные значения. В чем проблема с моим кодом? Заранее спасибо!
Проблема в "Одноразовой привязке", которую я только что удалил ::
before <h2>{{::contact.firstName }} {{ ::contact.lastName }}</h2>
и все получилось!