Routing AngularJS表单在重定向时不填充

如何在AngularJS中自动填写重定向的编辑表单？以下是场景：

我有一份产品清单。当我点击

编辑产品

时，我应该被重定向到编辑表单（使用AngularJS路由），并且包含两个字段（名称和描述）的编辑表单应该由要编辑的数据自动填充

我成功重定向到编辑表单，但无法用原始数据填充表单。以下是我的代码：

app.js

 angular.module('productapp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/productapp', {templateUrl: 'partials/productList.html'}).
        when('/productapp/:productid', {templateUrl: 'partials/edit.html'}).
        otherwise({redirectTo: '/productapp'});
}]);

function productsCtrl($scope, $http, $element) {
        //~ $scope.url = 'php/search.php'; // The url of our search
        // The function that will be executed on button click (ng-click="search()")
        $http.get('php/products.php').success(function(data){
            alert("hi");
            $scope.products = data;
        });
$scope.fetch = function(id) {
        var elem = angular.element($element);
        var dt = $(elem).serialize();
        //alert(id);
        dt = dt+"&id="+id;
        dt = dt+"&action=fetch";
        console.log($(elem).serialize());
        $http({
            method: 'POST',
            url: 'php/products.php',
            data: dt,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(data, status) {
            //~ $scope.status = status;
            //~ $scope.data = data;
            $scope.rs = data;
            console.log(data); // Show result from server in our <pre></pre> element
        }).error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };

edit.html

<div ng-controller="productsCtrl">
        <form method="POST" ng-controller="productsCtrl">
        <label>Add New Product:</label>
            <input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}">
            <input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}">
            <button type="submit" ng-click="save(rs.product_id)">Save</button>
</form>
</div>

    <div ng-controller="productsCtrl">
        <form method='POST' ng-controller="productsCtrl">
...

    <td><a href='#/productapp/{{product.product_id}}' ng-click = "fetch(product.product_id)">edit</a></td>

function EditCtrl($scope, $routeParams) {
   alert($routeParams.productid);
   // ... code here to fetch ...

添加新产品：
拯救

products.js

 angular.module('productapp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/productapp', {templateUrl: 'partials/productList.html'}).
        when('/productapp/:productid', {templateUrl: 'partials/edit.html'}).
        otherwise({redirectTo: '/productapp'});
}]);

function productsCtrl($scope, $http, $element) {
        //~ $scope.url = 'php/search.php'; // The url of our search
        // The function that will be executed on button click (ng-click="search()")
        $http.get('php/products.php').success(function(data){
            alert("hi");
            $scope.products = data;
        });
$scope.fetch = function(id) {
        var elem = angular.element($element);
        var dt = $(elem).serialize();
        //alert(id);
        dt = dt+"&id="+id;
        dt = dt+"&action=fetch";
        console.log($(elem).serialize());
        $http({
            method: 'POST',
            url: 'php/products.php',
            data: dt,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(data, status) {
            //~ $scope.status = status;
            //~ $scope.data = data;
            $scope.rs = data;
            console.log(data); // Show result from server in our <pre></pre> element
        }).error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };

函数productsCtrl（$scope，$http，$element）{
//~$scope.url='php/search.php'；//我们搜索的url
//将在按钮单击时执行的函数（ng click=“search（）”）
$http.get（'php/products.php'）.success（函数（数据）{
警报（“hi”）；
$scope.products=数据；
});
$scope.fetch=函数（id）{
var elem=角度元素（$element）；
var dt=$（elem）.serialize（）；
//警报（id）；
dt=dt+“&id=“+id；
dt=dt+“&action=fetch”；
log（$（elem.serialize（））；
$http({
方法：“POST”，
url:'php/products.php'，
数据：dt，
标题：{'Content-Type'：'application/x-www-form-urlencoded'}
}).成功（功能（数据、状态）{
//~$scope.status=状态；
//~$scope.data=数据；
$scope.rs=数据；
console.log（data）；//在元素中显示来自服务器的结果
<html ng-app = "productapp">
<head>
<title>Search form with AngualrJS</title>
        <script src="../angular-1.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/products.js"></script>
        <script src="js/app.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html> 

}).错误（功能（数据、状态）{
$scope.data=data | |“请求失败”；
$scope.status=状态；
});
};

index.html

<div ng-controller="productsCtrl">
        <form method="POST" ng-controller="productsCtrl">
        <label>Add New Product:</label>
            <input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}">
            <input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}">
            <button type="submit" ng-click="save(rs.product_id)">Save</button>
</form>
</div>

    <div ng-controller="productsCtrl">
        <form method='POST' ng-controller="productsCtrl">
...

    <td><a href='#/productapp/{{product.product_id}}' ng-click = "fetch(product.product_id)">edit</a></td>

function EditCtrl($scope, $routeParams) {
   alert($routeParams.productid);
   // ... code here to fetch ...

使用AngualrJS搜索表单

productslist.html

<div ng-controller="productsCtrl">
        <form method="POST" ng-controller="productsCtrl">
        <label>Add New Product:</label>
            <input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}">
            <input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}">
            <button type="submit" ng-click="save(rs.product_id)">Save</button>
</form>
</div>

    <div ng-controller="productsCtrl">
        <form method='POST' ng-controller="productsCtrl">
...

    <td><a href='#/productapp/{{product.product_id}}' ng-click = "fetch(product.product_id)">edit</a></td>

function EditCtrl($scope, $routeParams) {
   alert($routeParams.productid);
   // ... code here to fetch ...

...

---

如何操作？

为编辑页（EditCtrl）创建另一个控制器。从productslist.html代码段中删除fetch（），只需获取链接即可。然后，在EditCtrl中执行fetch功能（即，不要将该功能放入EditCtrl中的方法）

将$routeParam插入EditCtrl以访问productID:

---

我这样做了，但是链接如何知道它必须引用editCtrl呢？这是由路由提供程序处理的：when（'/productapp/：productid'，{templateUrl:'partials/edit.html'，controller:editCtrl}）