angularjs - ng-cloak not working

Componentes reutilizables en AngularJS

Question

Soy nuevo en AngularJS y me gusta hasta ahora. Un problema que no puedo encontrar en ninguna documentación es este:

Tengo una página con HTML recurrente, una página de categoría con subcategorías que tienen la misma plantilla html. Lo que estoy haciendo actualmente es tener un controlador único que cargue todo el Json de una vez, lo que es un poco lento. Me gustaría dividirlo en sub-vistas ( algo así como parciales en ASP.NET MVC) pero cada vista haría su propia llamada al servicio cuando se inicializara. También me gustaría pasar el nombre de la categoría como parámetro.

¿Cuál es la forma más eficiente de hacerlo? También probé con Directivas, pero no estoy teniendo suerte manteniendo el alcance por separado para cada llamada. Déjeme saber si usted necesita más detalles.

Answer 1

Finalmente pude resolver esto. Es bastante fácil después de leer la documentación y jugar

Aquí está la directiva:

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;
});
}
}
});

Esta es la página principal con el mismo componente llamado varias veces, pero con un parámetro diferente

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