AngularJS中的可重用组件
发布时间:2020-12-17 09:00:58 所属栏目:安全 来源:网络整理
导读:我是新的AngularJS和喜欢它到目前为止。一个问题,我找不到任何文档是这样的: 我有一个页面与循环HTML,一个类别页面,子类别都有相同的html模板。我现在做的是有一个单一的控制器加载所有的Json,一次,这是一种缓慢。我想把它分解为子视图(像ASP.NET MVC
我是新的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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |