Angular 1.5 directive test

by nickadeemus2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<div ng-app="demoApp" >
<div ng-controller="MainController">
  <photo photo-src="{{photo.url | trusted}}" photo-caption="Taken on: {{photo.caption}}" /> 
</div>

<!--
<script id="photo.html" type="text/ng-template">
	<figure>
		<img width='500px' ng-src="{{photoSrc}}"/>
		<figcaption> {{photoCaption}}</figcaption>
	</figure>
</script>
-->

</div>

JavaScript

//selects
var app = angular.module('demoApp', []);
app
	.controller('MainController', 
  	['$scope', '$timeout',
  		function($scope, $timeout){
 				$scope.photo = {
        	url:"http://www.michelangelohotel.com/assets/components/phpthumbof/cache/new-york-city-hotel-michelangelo.031a7f6970c477f9cbd768ebd853382c.jpg",	
        	caption: "mothers day"
      	};	   
        $timeout(function(){
        	$scope.photo.url="http://photos.mandarinoriental.com/is/image/MandarinOriental/new-york-13-exterior-night-04?$HomepageHeroImage$&crop=16,1307,4571,1557&anchor=2301,2085";
        }, 5000);
 		}])
  .directive('photo', 
  	function(){
  		return {
    		restrict: "E",
      	template:"<figure> \
										<img width='500px' ng-src=\"{{photoSrc}}\"/> \
		<figcaption> {{photoCaption}}</figcaption> \
	</figure>",
      	replace:true,
				scope: {
					photoCaption: '@',
					photoSrc: '@'
				}
				/*
      	link: function(scope, element, attrs){
      		attrs.$observe('photoSrc', function(value){
      			element.find('img').attr('src', value);
      		});
      	}
				*/
    	}
  })
  .filter('trusted',
  	['$sce', 
  		function($sce){
  			return function(url){
    			return $sce.trustAsResourceUrl(url);
    		}
  	}]);