Question

想象一下，我们有一个包含3个类别的产品清单：书籍，水果和电子产品。接下来，我们希望从每个类别中获取10个产品并进行显示。对于未来，我们需要记住，我们希望我们的类别范围是独立的，因此我们可以稍后对收集的数据应用一些操作。

我们需要的是某种通用控制器，其参数等于类别名称，以便我们可以将此参数提取到工厂以从服务器获取数据，然后输出。

在我看来，我们需要以这种方式对其进行编码：

<div ng-controller="universalController('books')">
    <ul>
        <li ng-repeat="product in products">{{ product }}</li>
    </ul>
</div>
<div ng-controller="universalController('fruits')">
    <ul>
        <li ng-repeat="product in products">{{ product }}</li>
    </ul>
</div>
<div ng-controller="universalController('electronics')">
    <ul>
        <li ng-repeat="product in products">{{ product }}</li>
    </ul>
</div>

我们的控制器必须是这样的：

var app = angular.module( 'mainApp', ['ngResource'] );
app
.factory( 'Products', [ '$resource', function( $resource ) {
    return $resource( '/api/:category', {}, {'get': { method: "GET" , isArray:true } } );  
}])
.controller( 'universalController', [ '$scope', 'Products', 'Category', function( $scope, Products, Category ) {
    setTimeout(function() {
        $scope.products = Products.get({category: Category});
    }, 3000); 
}]);

当然，这不起作用，但如何在角度中实现此功能？显然，制作3个不同名称的独立控制器将是一种蹩脚的解决方案，所以我想知道是否有办法创建我所描述的东西。

Answer 1

<div ng-controller="universalController" ng-init="initialize('books')>

或

<div ng-repeat="category in allCategories">
    <div ng-controller="universalController">
        <!-- the controller's $scope.category contains the category 
             of the controller -->

带参数的通用控制器＆amp; Angular.js中的孤立范围

1 个答案: