Geekwise Day 6 Assets

featured-product-directive.js

(function(angular) {
	'use strict';

	var app = angular.module('MyStore');

	app.directive('msFeaturedProduct', function() {

		return {
			restrict: 'E',
			replace: true,
			scope: {
				item: '=product'
			},
			templateUrl: 'templates/featured-product.html',
			link: function(scope, elem, attrs) {

			}
		};
	});

})(window.angular);

featured-product.html

<div class="featured_small">
	<div class="prod_img">
		<img ng-src="{{item.thumbnail}}"/>
	</div>
	<div class="small_desc">
		<h3 ng-bind="item.title"></h3>
		<p ng-bind="item.description"></p>
	</div>
	<div class="action">
		<a class="button" ui-sref="product({id: item.guid})"> Read More</a>
	</div>
</div>

home.html

<div class="three" ng-repeat="item in featuredProducts | limitTo:4" ng-if="!$first">
    <ms-featured-product product="item"></ms-featured-product>
</div>

index.html

<script src="directives/featured-product-directive.js"></script>

product-detail-controller.js

// Check if the current product's guid property is equal to id from the URL
if(product.guid === product_guid) {

	// We've found a match, add the matching product to the $scope
	$scope.product = product;
	
}else if(product.isFeatured) {

	// Add the featured product to the featuredProducts array
	$scope.featuredProducts.push(product);
}

product-detail.html

<div class="row">

	<!-- add featured here -->
	<div class="col-sm-offset-2 col-sm-12 featured">
		<div class="small">
			<div class="three" ng-repeat="item in featuredProducts | limitTo:3" ng-if="item.guid !== product.guid">
				<ms-featured-product product="item"></ms-featured-product>
			</div>
		</div>
	</div>

</div>