Угловая двухсторонняя привязка данных не обновляет таблицу на другом маршруте

У меня есть угловое приложение и index.html с ng-представлением, которое отображает разные представления partials / person.html и partials/newPerson.html. Когда я добавляю нового человека в $ scope.persons в моем контроллере через newPerson.html, $ scope.persons обновляется, но не обновляет таблицу в partials / persons.html. если я копирую / вставляю таблицу в partials/newPerson.html, таблица обновляется автоматически. Я не могу обернуть голову, почему? они используют один и тот же контроллер...? Заранее спасибо за помощь:)

JS / app.js

var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
   $routeProvider
       .when('/persons',{
           templateUrl:'partials/persons.html',
           controller:'PersonCtrl'
       })
       .when('/newperson',{
           templateUrl:'partials/newPerson.html',
           controller:'PersonCtrl'
       })
        .otherwise({
            redirectTo: '/'
        });
    });

app.controller('PersonCtrl',['$scope', function($scope){

var persons = [   
    {
        id: 1
        ,name: "Jens",
        age : 18}  
    ,{
        id: 2,
        name: "Peter",
        age : 23
    }   
    ,{
        id: 3
        ,name: "Hanne"
        ,age : 23
    }
]; 

$scope.persons = persons;
$scope.nextId = 4;


$scope.savePerson = function(){
    if($scope.newPerson.id === undefined)
    {
        $scope.newPerson.id= $scope.nextId++;
        $scope.persons.push($scope.newPerson);
    }else{
        for (var i = 0; i < $scope.persons.length; i++) {

            if($scope.persons[i].id === $scope.newPerson.id){
                $scope.persons[i] = $scope.newPerson;
                break;
            }
        }
    }

    $scope.newPerson = {};
};

index.html

<html ng-app="app" ng-controller="PersonCtrl">
 <head>
    <title>Routing</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
    <script src="angularSrc/app.js"></script>
</head>

<body>
    <br>
    <div class="container">
        <header>
            <h1>People Routing</h1>
            <nav>
                <a href="#/persons">persons</a>
                <a href="#/newperson">new person</a>
            </nav>
        </header>
        <div ng-view="ng-view">
        </div>
    </div>
</body>

обертоны / persons.html

    <h3>Persons</h3>
<table >
    <thead>
        <tr>
            <td>Id</td>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>

    <tbody>
          <tr ng-repeat="p in persons">
            <td>{{p.id}} </td>
            <td>{{p.name}} </td>
            <td>{{p.age}} </td>
        </tr>
    </tbody>
</table>

обертоны / newPerson.html

<div >
<h1>New person</h1> 
    <form class="form-horizontal">
        <fieldset>               
            <div class="form-group">
                <input type="text" ng-model="newPerson.name" model="newPerson.name" class="form-control" id="year" placeholder="name">
            </div>
            <div class="form-group">        
                <input type="number" ng-model="newPerson.age" model="newPerson.age" class="form-control" id="age" placeholder="age">
            </div>
        </fieldset>
    </form>
 <button type="submit" ng-click="savePerson()"  >Save</button>
      <h2>nextId: {{nextId}}</h2>
   </div>
Источник

1 ответ

Проблема в том, что вы не понимаете, что каждое использование контроллера создает новый экземпляр.

Область действия уничтожается, когда вы покидаете контроллер, поэтому, если вы добавите область в один экземпляр, это изменение будет потеряно, когда вы снова загрузите контроллер на другом маршруте.

Вам необходимо использовать службу для сохранения данных в течение срока действия каждой загрузки страницы.

Простой пример обслуживания:

app.factory('PersonService', function () {

    var persons = [{
        id: 1,
        name: "Jens",
        age: 18
    }, {
        ...
    }, {
        ...
    }];

    return {
        persons: persons
    }

});

Затем введите в контроллер и используйте служебные данные в контроллере

app.controller('PersonCtrl',['$scope','PersonService', function($scope,PersonService){

    $scope.persons = PersonService.persons;
Источник
Другие вопросы по тегам