Question

我正在学习Angular而且我已经撞墙了。我想要实现的是一旦我通过data-ng-click单击HTML中表格中的Item。

此函数调用第二个控制器并实例化模板并从服务器获取数据。并替换ng-view。我不知道如何从partial1视图中实例化第二个控制器。

我所追求的行为就像在这个Angular Docs中一样。但我希望通过函数点击表格中的项目来实现这一点。

但是我被困在如何做到这一点？如果可能的话？

应用

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

myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/Product', {
            templateUrl: '/Product/Index',
            controller: 'testCtrl'
        }).
    when('/GetProducts', {
        templateUrl: '/Product/ProductsTemplate',
        controller: 'testCtrl'
    }).
    when('/GetReciepe', {
        templateUrl: '/Product/ReciepeTemplate',
        controller: 'testCtrl2'
    }).otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

控制器1（testCtrl）

myApp.controller('testCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('/Product/GetProducts').success(function (data) {
            $scope.products = data;
        });

$scope.test = function test(){
//call controller 2 - which fetches data and gets another template
}
    }]);

控制器2（testCtrl2）

myApp.controller('testCtrl2', ['$scope', '$http',
    function ($scope, $http) {
        $scope.test = function test(product) {

            $http.get('/Product/GetReciepe?productId=' + product.ProductID).success(function (data) {
                $scope.reciepes = data;
            });
        }
    }]);

索引（主视图）

<html>
<body>
    <div class="row" style="margin:5px;">
        <a ng-href="/Product/GetProducts" class="btn btn-lg btn-primary">Test</a>
    </div>
    <hr />
    <div class="row">
        <div ng-view></div>
    </div>
</body>
</html>

部分（1）

<div data-ng-controller="testCtrl">
    <div>
        <label>Search:</label><input type="text" class="form-control" />
    </div>   
     <div>
            <table class="table table-striped">

                <tr>
                    @*<th>id</th>*@
                    <th>PIZZA</th>
                    <th></th>
                </tr>
                <tr data-ng-repeat="p in products" data-ng-click="test(p);">
                    <td><h2>{{p.Description | uppercase}}</h2></td>
                    <td><img ng-src="{{p.ImageUrl}}" /></td>
                </tr>
            </table>

        </div>
    </div>

部分（2）＆lt;＆lt;放在ng视图中以替换partial 1

<div data-ng-controller="testCtrl">
    <ul>
        <li data-ng-repeat="r in reciepes">
            {{r.Description}}
        </li>
    </ul>
</div>

Answer 1

一个简单的解决方案是使用 route params 。

在App中进行此更改

when('/GetReciepe/:productID', {
    templateUrl: '/Product/ReciepeTemplate',
    controller: 'testCtrl2'
})

在Partial（1）

中

           <tr data-ng-repeat="p in products">
                <td><h2>{{p.Description | uppercase}}</h2></td>
                <td><img ng-src="{{p.ImageUrl}}" /></td>
                <td><a href="#/GetReciepe/:{{ p.ID }}">view reciepe</a></td>
            </tr>

然后在testCtrl2

中使用route param

myApp.controller('testCtrl2', ['$scope', '$http','$routeParams',
function ($scope, $http, $routeParams) {
    var getproductID= $routeParams.productID;
    $scope.test = function (product) {
        $http.get('/Product/GetReciepe?productId=' + getproductID).success(function (data) {
            $scope.reciepes = data;
        });
    }
}]);

提示：

在评论中正确指出的工厂/服务中执行您的http调用
<div data-ng-controller="testCtrl">。

控制器功能，调用另一个控制器并替换HTML模板

1 个答案: