Представление списка не обновляется после изменений с другого контроллера в AngularJS

0

Я не знаю почему, но мой 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));
    };

Я делаю то же самое, но основной вид, когда все контакты обновляются только после обновления страницы. Также, если я открою окно модели после редактирования контакта, обновленные значения. В чем проблема с моим кодом? Заранее спасибо!

  • 0
    Я думаю, что этот пост может вам помочь: stackoverflow.com/questions/21919962/… . Не имея полного примера, трудно понять, что же не так, но, как правило, эти проблемы связаны с объемом / прототипическим наследованием.
  • 0
    @brianslattery Я обновил свой вопрос.
Теги:
ionic-framework
local-storage

1 ответ

1
Лучший ответ

Проблема в "Одноразовой привязке", которую я только что удалил :: before <h2>{{::contact.firstName }} {{ ::contact.lastName }}</h2> и все получилось!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню