跳转到另一个视图时未填充值

Question

我正在学习 Angular JS 我正在 I.m 制作一个简单的应用程序，该应用程序应以人员列表开始，当用户单击 "Update User" 时应将其重定向到一个编辑页面，应该填充数据，但没有发生。这是我的代码：

HTML起始页：

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider, $locationProvider) {

    $routeProvider
        .when('/listview',
            {
                controller: 'SimpleController',
                templateUrl: 'Partials/ListView.html'
            })
        .when('/tableview',
            {
                controller: 'SimpleController',
                templateUrl: 'Partials/TableView.html'
            })
        .when('/edit/:id',
            {
                controller: 'EditCtrl',
                templateUrl: 'Partials/Edit.html'
            })
        .otherwise({ redirectTo: '/listview' });
}]);

app.controller('EditCtrl', function ($scope, $location, $routeParams) {
    $scope.details = $scope.persons[$routeParams.id];

    $scope.save = function () {
        $location.path('/');
    };
});

app.controller('SimpleController', function ($scope) {
    $scope.persons = [{ name: 'Tiago', city: 'Lisbon', age: 26 },
                      { name: 'Ecem', city: 'Antalya', age: 24 },
                      { name: 'Derya', city: 'Istambul', age: 24 }
    ];
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Galaksiyia - TableView</title>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Index</th>
            <th>Name</th>
            <th>City</th>
            <th>Age</th>
            <th></th>
        </tr>
        <tr ng-repeat="details in persons">
            <td>{{$index}}</td>
            <td>{{details.name}}</td>
            <td>{{details.city}}</td>
            <td>{{details.age}}</td>
            <td><a href="#/edit/{{$index}}">Update User</a></td>
        </tr>
    </table>
</body>
</html>

编辑页面的Html是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Galaksiyia - Edit Page</title>
</head>
<body>
    <form>
        <input type="text" ng-model="details.name" placeholder="Name" /><br />
        <input type="text" ng-model="details.city" placeholder="City" /><br />
        <input type="text" ng-model="details.age" placeholder="Age" /><br />
        <button ng-click="save()">Update User</button>
    </form>
</body>
</html>

此外，点击保存按钮时没有任何反应，根据代码，用户应该被重定向到主页。

Answer 1

解决您的问题的一个快速方法是将数据（必须在两个控制器中可用）放入 $rootScope

app.controller('SimpleController', function ($scope) {
    $rootScope.persons = [{ name: 'Tiago', city: 'Lisbon', age: 26 },
                      { name: 'Ecem', city: 'Antalya', age: 24 },
                      { name: 'Derya', city: 'Istambul', age: 24 }
    ];
});

更好的解决方案是编写服务（工厂）并从该服务获取数据。

跳转到另一个视图时未填充值

The Values are not being populated when jumping to another view

routing

angularjs