Angular 双向数据绑定不会更新不同路径中的表答案

【问题标题】：Angular two way data-binding dosn´t update table in different routeAngular 双向数据绑定不会更新不同路径中的表
【发布时间】：2016-01-23 00:05:20
【问题描述】：

我有一个 Angular 应用程序和一个带有 ng-view 的 index.html，它呈现给不同的视图 partials/persons.html 和 partials/newPerson.html。当我通过 newPerson.html 将新人添加到控制器中的 $scope.persons 时，$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>

partials/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>

partials/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>

【问题讨论】：

添加jsfiddle演示示例
添加新用户后是否从newPerson.html重定向到person.html？
重定向？？你的意思是 persons new person 否则我不确定你的重定向是什么意思？？

标签： angularjs angularjs-scope ngroute ng-view

【解决方案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;

【讨论】：

arhhh 这是有道理的 :) 非常感谢您的友好和可以理解的回答！