Question

下面的代码有一个shell页面index.html和一个局部视图（当前正由两个不同的控制器使用）。 AppController中的硬编码数据连接到list.html局部视图并呈现为表格。在JS中我添加了一个console.log来查看控制器何时被调用。当应用程序加载时当我调用#/new时，AppController会触发，NewController会触发。但是，当我单击每行旁边的编辑按钮时，不会调用EditController。 EditController应使用/partials/edit.html视图，但使用所点击行的信息填充字段。因此，此示例中的crew [0]为Picard，当您单击该图标时，应预先填充其数据。我没有收到任何错误，但是EditController的视图没有被注入。

JS

angular.module('enterprise', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when("/", { templateUrl: "/partials/list.html" })
            .when("/new", { templateUrl: "/partials/edit.html", controller: "NewController" })
            .when("/edit:id", { templateUrl: "/partials/edit.html", controller: "EditController" });
    })
//this is the that iterated over in the partial views ng-repeat
function AppController($scope){
    $scope.crew = [
        { name: 'Picard', description: 'captain' },
        { name: 'Riker', description: 'number 1' },
        { name: 'Word', description: 'Security' }
    ];
        console.log('app controller hit');        
}
function NewController($scope, $location) {
    $scope.person = { name: "", description: "" };
    $scope.save = function () {
        $scope.crew.push($scope.person);
        $location.path("/");
    }
    console.log('new controller hit');
}
function EditController($scope, $location,$routeParams) {
    $scope.person = $scope.crew[$routeParams.id];
    console.log('edit controller hit');
}

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Routing</title>
    <link rel="stylesheet"
          href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"
          rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
    <a href="#"><h2>Enterprise Crew</h2></a>
    <ng-view></ng-view>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

list.html

<table class="table table-striped" style="width: 250px">
    <thead>
    <tr>
        <td>Name</td>
        <td>Description</td>
        <td> <a href="#/new"><i class="glyphicon glyphicon-plus-sign"></i></a>

        </td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="person in crew">
        <td>{{person.name}}</td>
        <td>{{person.description}}</td>
        <td><a href="#/edit/{{$index}}"><i class="glyphicon glyphicon-edit"></i></a></td>
     as ng-repeat loops through I'm trying to go to the edit.hml partial view and populate the text boxes in `edit.html` with the data from the row that was clicked on
    </tr>
    </tbody>

</table>

edit.html

<form action="">
    <input ng-model="person.name"/ placeholder="Enter the person name">
    <input ng-model="person.description"/ placeholder="Enter the description">
    <button ng-click="save()" class="btn-primary">Save</button>
</form>

我没有收到任何错误，但我的EditController永远不会被解雇。有人能让我知道为什么吗？感谢。

Answer 1

“/ edit：id”应改为

中的“/ edit /：id”

.when("/edit:id", { templateUrl: "/partials/edit.html", controller: "EditController" });

Angular JS传递ng-repeat $ index作为参数

1 个答案: