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

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

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>

источник

2015-10-23 user3024791

Добавить [jsfiddle] (http://jsfiddle.net) демонстрационный пример –

ли вам перенаправить с newPerson.html на person.html после добавления нового пользователя? –

redirect ?? u означает persons new person В противном случае я не уверен, что вы имеете в виду о перенаправлении ?? – user3024791

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

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

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

Простой пример службы:

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;

источник

2015-10-23 13:34:01 charlietfl

arhhh, что имеет смысл :) Большое вам спасибо за ваш добрый и понятный ответ! – user3024791

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

ответ

Смежные вопросы