Angularjs — Почему не обновился ng-repeat?

Question

[leo_fr]

Использую symfony2 и angularjs в связке.
Подробнее о проблеме, у меня стоит задача сделать обычное CRUD приложение, всё работает, но если я провожу какие либо действия то моя view не обновляется(например у меня есть пользователь или я хочу создать пользователя, чтобы увидеть результат мне нужно обновить страницу). Сижу над проблемой не первый день, возможно где-то совершил ошибку и её не вижу=) Итоги моих поисков привели мне к тому, что в полнее вероятно у меня проблемы с область видимости. Нашёл статью про $scope.apply, но возникла проблема с тем, что выбивает ошибку цикла(или я её не правильно применяю) и как я понял обычно такая проблема связана с тем, что когда мы создаём свои директивы их обычно не видно. В целом чуток запутался буду очень рад если кто-то поможет решить данную проблему. Возможно проблема с промисами. Описание кода:
Контроллер в symfony2

/**
     * @Route("/edit", name="edit")
     */

    public function editAction (Request $request)
    {
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            $data = json_decode($request->getContent(),true);

            $em = $this->getDoctrine()->getManager();
            $user = $em->getRepository('AppBundle:User')->find($request->get('userId', 'userName'));

            if (!$user) {
                throw $this->createNotFoundException(
                    'No user found id'
                );
            }

            $user->setName($data['userName']);
            $user->setAge($data['userAge']);
            $em->flush();

        }

        return new Response( json_encode(
                array('success' => 'Success' )

                )
            );
    }

Angularjs controller:

'use strict';

angular.module('prApp')
    .controller('tableCtrl', ['$scope','$rootScope', 'TableService', '$modal',
        function ($scope,$rootScope, TableService, $modal) {

            $scope.items = TableService.userTableInfo.infoTab();
            var items;
            $scope.new = {
                'name': '',
                'age': ''
            };

            $scope.eEdit = function (item) {

                var modalInstance = $modal.open({
                    templateUrl: 'editModalContent.html',
                    controller: 'editModalInstanceCtrl',
                    item : item,
                    resolve: {
                        item: function () {
                            return item;
                        }

                    }
                })
            };
      }
    ])

    .controller('editModalInstanceCtrl', function ($scope,TableService, $modalInstance, item) {
        $scope.item = item;
        $scope.temp = {id: item.id, name: item.name, age: item.age};
        $scope.eEditEnd = function (temp, item) {
            TableService.userTableEdit.editUserTable({id: $scope.temp.id,userName: $scope.temp.name, userAge: $scope.temp.age});

            $modalInstance.close();
        };
        $scope.cancel = function () {
            console.log('ng-click = cancel');
            $modalInstance.dismiss('cancel');
        };
    })

Angularjs factory(примечание редактирование происходит через метод POST, а не PUT ) :

'use strict';

angular.module('prApp')
    .factory('TableService', function ($resource){
       var factory = {
           userTableEdit: $resource('/edit', {},{
               editUserTable:{method: 'POST', params:{userId: '@id'}}
           }),
         } ;
        return factory;
    });

Модальные окна:

<!-- модальное окна редактирование -->

        <div>
            <script type="text/ng-template" id="editModalContent.html">
                <form data-ng-submit="editUserTab()">
                    <div class="modal-header">
                        <h4 class="modal-title">Редактировать пользователя</h4>
                    </div>
                    <div class="modal-body">
                        <p>Форма для редактирования данных</p>

                        <td>Name
                            <input
                                    class="form-control"
                                    data-ng-model="temp.name"/>
                        </td>
                        <td>Age
                            <input
                                    class="form-control"
                                    data-ng-model="temp.age"/>
                        </td>
                        <!--<td>Name<input class="form-control" value="{{item.name}}" data-ng-model="item.team.name"/></td>-->
                        <!--<td>Age<input class="form-control" value="{{item.age}}" data-ng-model="item.team.age" /></td>-->

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="submit" data-ng-click="eEditEnd(temp, item)">Save
                            changes
                        </button>
                        <button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
                    </div>
                </form>
            </script>
        </div>

UI
Получаем коллекцию из БД
Область видимости $scope
Вызываем модальное окно
Вносим изменения
Результат после нажатия на ng-click
Как поменялось область видимости при вызове модального окна
Результат отображается после того как мы обновим страницу:

Comments

[Алексей Скобкин]

По ангуляру ничего не скажу, но вы можете использовать JsonResponse вместо обычного. Это позволит вам и ошибки и всё остальное тоже отдавать в JSON.

Answer 1

[_ _]

Эм, т.е. вы хотите, чтобы произошла некая магия и данные обновились? В Ангуляре нет магии - если что-то происходит, то только потому что вам это нужно.
Вы не написали главное - шаблон таблицы. Могу предположить, что у вас выводятся данные из массива $scope.items. Элементы этого массива отображаются на элементы-строки таблицы, в свою очередь каждый элемент массива отображается на данные в строке. Если вы сделаете $scope.items[0].age = 20, то это 20 появится у вас в таблице.
Теперь смотрим, что происходит при открытии модалки - вы создаете новый JS-объект temp, копируя в него значения элемента из $scope.items.
Все изменения, которые вы вносите в этот temp посредством ng-model остаются только в этом объекте, он ни с чем не связан (я так думаю, что вы это сделали чтобы неподтвержденные изменения не сохранялись, это ок). Дальше ваше сохранение всего лишь отправляет запрос на сервер, никуда дальше информацию об измененном объекте не распространяя. Поэтому и содержимое $scope.items остается неизменным. Минимально рабочий вариант, чтобы вам сейчас голову не забивать, это сделать что-то типа

$scope.eEditEnd = function (temp, item) {
            TableService.userTableEdit.editUserTable({id: $scope.temp.id,userName: $scope.temp.name, userAge: $scope.temp.age});
            angular.extend(item, temp);
            $modalInstance.close();
        };

Comments

[leo_fr]

Спасибо за ответ. Возник вопрос как правильно реализовать добавление и редактирование. Если я использую angular.extend, то в консоле вылазит ошибка TypeError: Cannot read property '$$hashKey' of undefined, если обновляю страницу то данные обновляются. Как правильно поступать в этом случае? Нашёл статью в главе проблема с bindингом моделей. Как я понял нужно использовать для добавления нового пользователя angular.copy,а для удаления array.slice. И тут возникла проблема с применением их. Могли бы вы показать пример или рассказать как правильно это делать?