Isolated scope

by masudcsesust04

HTML

<h1>3. Isolated scope</h1>

<div ng-app="myApp">
    <div ng-controller="myMovieIsoCtrl">       
      <p>
        Movie: <my-movie-iso info="movie" rating="movie.rating"></my-movie-iso> 
      </p>     
      <p>
        TVS: <my-movie-iso info="tvs" rating="tvs.rating"></my-movie-iso>
      </p>
  </div>
</div>

JavaScript

/* App Module */

var app = angular.module("myApp", []);

app.controller("myMovieIsoCtrl", function($scope) {
    $scope.movie = {name: "Roman Holiday", year: '1953', genre: "Comedy, Romance", rating: '8.1'};
    $scope.tvs = {name: "Friends", year: '1994–2004', genre: "Comedy, Romance", rating: '9.0'};        
});


// Directive
app.directive('myMovieIso', function() {
  return {    
    restrict: 'E',
    scope: {
      movieInfo: '=info',
      rating: '=' 
    },
    template: 'Name: {{movieInfo.name}}, Genre: {{movieInfo.genre}}, Year: {{movieInfo.year}}, Rating: {{rating}}'
  };
});