Slide 113 TP8

1-TP8-productSummary.js

(function(){
    "use strict";


    angular.module('app').directive('productSummary', ['ProductUtils', function (ProductUtils) {

        return {
            restrict: 'E',
            templateUrl: 'templates/partials/productSummary.html',
            scope:{
                product:'='
            },
            link: function (scope, element, attrs) {
                scope.getRatingClass = ProductUtils.getRatingCss;
            },
            controller: ['$scope',
                'UserService',
                function ($scope,UserService) {

                    $scope.addToCart = function (pItem) {
                        UserService.addToCart(pItem, 1);
                    };
                }]
        }

    }]);
})();

2-productSummary.html

<article class="k-product hproduct">
    <div class="photo-data">
        <p>
            <a href="#">
                <img class="photo" ng-src="img/catalog/{{product.id}}.jpg" />
            </a>
        </p>
    </div>

    <p class="extra new" ng-if="product.isNew">new</p>

    <h3 class="fn name">
        <a ng-href="#/book/{{product.id}}" title="See Product sheet">{{product.name}}</a>
    </h3>

    <p ng-class="getRatingClass(product)">
		
		<span ng-show="product.comments">
			<a href="#comments">{{product.comments.length}} comment(s)</a>
		</span>
		<span ng-hide="product.comments">
			No comment
		</span>
    </p>

    <div class="price-data">
        <p class="all-prices">
            <strong class="price new">{{product.price | currency}}</strong>
        </p>
    </div>
    <div class="buyZone">
        <p class="buy">
            <a ng-click="addToCart(product)">Add to basket</a>
        </p>
    </div>
</article>

3-catalog.html

<!-- hproduct/ -->
        <product-summary product="product"  ng-repeat="product in products"/>
<!-- /hproducts -->

4-index.html

<script src="js/directives/productSummary.js"></script>