AngularJS中的可重用组件

前端之家收集整理的这篇文章主要介绍了AngularJS中的可重用组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新的AngularJS和喜欢它到目前为止。一个问题,我找不到任何文档是这样的:

我有一个页面与循环HTML,一个类别页面,子类别都有相同的html模板。我现在做的是有一个单一的控制器加载所有的Json,一次,这是一种缓慢。我想把它分解为子视图(像ASP.NET MVC中的partials),但每个视图将使它自己的服务调用时,它初始化。我也想传递类别名称作为参数。

什么是最有效的方法呢?我也尝试过指令,但我没有任何运气保持范围分开的每个调用。如果您需要更多详细信息,请告诉我。

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

这里是指令:

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,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>

猜你在找的Angularjs相关文章