Question

我有一个有角度的应用程序，还有一个带有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>

分音/ 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>

Answer 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;

Angular双向数据绑定不会在不同路由

1 个答案: