AngularJS 中的可重用组件答案

【问题标题】：Reusable components in AngularJSAngularJS 中的可重用组件
【发布时间】：2012-11-17 03:24:14
【问题描述】：

我是AngularJS 的新手，到目前为止还很喜欢。我找不到任何文档的一个问题是：

我有一个包含重复出现的 HTML 的页面，一个包含子类别的类别页面都具有相同的 html 模板。我目前正在做的是让一个控制器一次加载所有 Json，这有点慢。我想将其分解为子视图（类似于 ASP.NET MVC 中的部分），但每个视图在初始化时都会对服务进行自己的调用。我还想将类别名称作为参数传递。

最有效的方法是什么？我也尝试过使用 Directives，但我没有任何运气将每个调用的范围分开。如果您需要更多详细信息，请告诉我。

【问题讨论】：

一个 jsfiddle 与您正在尝试做的事情会有所帮助！
一个工作的 jsfiddle 可能是不可能的，因为它涉及 Ajax 调用并且服务不在线。稍后我会尽量发布我可以发布的内容。
看看这个递归树指令：plnkr.co/edit/T0BgQR?p=preview。这在开始时也包含所有数据，但应该可以将其更改为 ajax 调用。

标签： angularjs

【解决方案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>

【讨论】：