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);
    	}
  	}]);