Angular 1.5 directive test

by nickadeemus2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="demo-app" 
    ng-controller="MainController">
  <photo photo-src="{{photo.url | trusted}}" 
				 photo-caption="Take on: {{photo.caption}}" /> 
</div>

JavaScript

var app = angular.module('demoApp', []);	
app
	.controller('MainController', 
		['$scope',
		function($scope){
 			$scope.photo = {
      	url: "http://nycparkingauthority.com/wp-content/uploads/2013/05/nyc-parking-tickets2.jpg",
        caption: "mothers day"
      };	   
 	}])
  .directive('photo', function(){
  	return {
    	restrict: "E",
      template:"<figure><img width='300px'/><figcaption /></figure>",
      replace:true,
      link: function(scope, element, attrs){
      	attrs.$observe('photoSrc', function(value){
      		element.find('img').attr('src', value);
      	});
      }
    }
  })
  .filter('trusted', function($sce){
  	return function(url){
    	return $sce.trustAsResourceUrl(url);
    }
  });