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>
  <script type="text/ng-template"  id="player.html">
    <h1>Hello</h1>
  </script>
  
  <div ng-controller="MainController">
  <bcplayer></bcplayer>
    {{ photo }}
  </div>




<!--
<video data-video-id="5307783483001" 
data-account="5303576347001" 
data-player="default" 
data-embed="default" 
data-application-id 
class="video-js" 
controls 
width="600" 
height="450"></video>
<script src="//players.brightcove.net/5303576347001/default_default/index.min.js"></script>
-->


<!--
<div ng-app="demoApp" 
    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('bcplayer', function() {
    return {
      restrict: "E",
      replace: true,
      template: "player.html"
    }
  })
  .filter('trusted', function($sce) {
    return function(url) {
      return $sce.trustAsResourceUrl(url);
    }
  });


/*
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);
    }
  });
 */