AngularJS - передача данных выбранного элемента в форму редактирования

Question

Я делаю добавление/изменение формы в angularJS. У меня есть шаблон для отображения списка элементов и другого, который содержит форму. Если я хочу добавить элемент, то он работает, но у меня возникают проблемы с обновлением элементов. Это маршруты, которые я объявил, используя один контроллер для обработки всех категорий.

$routeProvider.when('/category', {templateUrl:'templates/category.html', controller: 'categoryCtrl'}); 
$routeProvider.when('/category/:categoryId?', {templateUrl:'templates/editcategory.html', controller:'categoryCtrl'}); 

В моем шаблоне category.html У меня есть кнопка, чтобы добавить (который перенаправляет к шаблону редактирования).

<button class="btn btn-primary" ng-click="createCategory()">Add Category</button> 

Кнопка для редактирования: одна кнопка для каждого элемента.

<button class="btn btn-warning" ng-click="editCategory(category)">Edit</button> 

Этот шаблон editCategory.html используется для добавления/редактирования.

<div class="container"> 
<form class="form-horizontal" id="categoryForm" name="categoryForm" ng-controller="categoryCtrl" > 
    <div class="form-group"> 
     <label for="name" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-10"> 
      <input type="text" name="name" ng-model="category.name" class="form-control" required></input> 
      <span ng-show="form.name.$dirty && form.name.$error.required">Category name is required</span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <button type="submit" value="submit" class="btn btn-primary" ng-click="addCategory(category)" 
      ng-disabled="categoryForm.$invalid">Create Category</button> 
      <button type="btn" value="cancel" class="btn btn-danger" ng-click="cancelBtn()">Cancel</button> 
     </div> 
    </div> 
</form> 
</div> 

И мой categoryCtrl:

myApp.controller('categoryCtrl', function($scope, $http, $location) { 
    $scope.title ="Categories"; 
    $scope.categories = []; 


    $scope.addCategory = function(category){ 
     $http.post('http://localhost/myappi/API/index.php/Api/categories',category). 
       success(function(data) { 
        $scope.categories.push(data); 
       }) 
       .error(function(err) { 
        console.log(err); 
       }) 
       $location.path('/category'); 

    }; 
    $scope.editCategory = function(categoryData) 
    { 
     var id = categoryData.id; 
     $scope.category = {}; 
     $scope.category = categoryData; 
     console.log('scope data is ', $scope.category); 
     $location.path('/category/'+id); 
    }; 

    //go to the form to add a new category 
    $scope.createCategory = function() { 
     $location.path('/category/'+'new'); 
    }; 
}); 

Я думал, что установка $ scope.category = категория будет также заполнить поля формы со значением. Также хорошо, что я использовал тот же маршрут и шаблон для добавления и редактирования?

Answer 1

Проще говоря, когда маршрут изменен, контроллер категории повторно инициализируется, а также его объем. Рассмотрите возможность сохранения данных на заводе или в сервисе. http://www.angulartutorial.net/2014/03/communicate-with-controllers-in-angular.html

Answer 2

Вы можете использовать $ broadcast service и передать объект в нем или использовать персонализированную службу для сохранения данных.

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

$rootScope.$broadcast("editItem",{"category": yourValue}); 

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

$scope.$on("editItem", function(event, args) { 
    console.log(args.category); 
})