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" 
    ng-controller="MainController">
  <photo photo-src="{{photo.url | trusted}}" photo-caption="Take on: {{photo.caption}}" /> 
</div>

JavaScript

//selects
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',
  	['$sce', 
  		function($sce){
  			return function(url){
    			return $sce.trustAsResourceUrl(url);
    		}
  	}]);