AngularJS中的可重用组件

我是AngularJS新手，并且喜欢它。 一个问题，我找不到任何文件是这样的：

我有一个页面定期的HTML，一个类别页面与子类别都具有相同的HTML模板。 我现在正在做的是让一个控制器一次加载所有的Json，这是很慢的。 我想分解成子视图（ 类似于ASP.NET MVC中的partials），但每个视图都会在初始化时自己调用服务。 我也想通过类别名称作为参数。

什么是最有效的方法呢？ 我也尝试过指令，但我没有任何运气保持每个电话的范围分开。 让我知道你是否需要更多的细节。

Answer 1

我终于能够解决这个问题。 在阅读文档并玩游戏后，这很容易

这是指令：

 angular.module('components', []).directive('category', function () { return { restrict: 'E', scope: {}, templateUrl: '/Scripts/app/partials/CategoryComponent.html', controller: function ($scope, $http, $attrs) { $http({ url: "api/FeaturedProducts/" + $attrs.catName, method: "get" }).success(function (data, status, headers, config) { $scope.Cat = data; }).error(function (data, status, headers, config) { $scope.data = data; $scope.status = status; }); } } }); 

这是这个主页与多次调用相同的组件，但具有不同的参数

  <ul class="unstyled"> <li> <category cat-name="Ultrabooks"></category> </li> <li> <category cat-name="Tablets"></category> </li> <li> <category cat-name="Laptops"></category> </li> <li> <category cat-name="Digital SLR Cameras"></category> </li> 

CategoryComponent.html

 <a href="#/Categories/{{Cat.CategoryName}}"> <h4>{{Cat.CategoryName}}</h4> </a> <div ng-switch on="status"> <div ng-switch-when="500" class="alert alert-error"> {{status}} {{data}} </div> <div ng-switch-default> <ul class="unstyled columns"> <li class="pin" ng-repeat="p in Cat.Products"> <a href="#/reviews/{{p.UPC}}"> <h5>{{p.ProductName}}</h5> <img src="{{p.ImageUrl}}"> </a> </li> </ul> </div> </div>