"use strict";
angular.module('plunker', [ ])

  .controller('MainCtrl', function($scope){
    console.clear();
    $scope.foo = 'Main';
  })
  
  /**********************
    1st ctrl & drctv
  **********************/
  .controller('FirstCtrl', function($scope){
    $scope.foo = "First";
  })
  
  .directive('firstDirective', function(){ 
    return {
      restrict: 'EA',
      controller: function($scope){  },
      template: '<div><label>first drctv foo: {{ foo }} </label><input type="text" ng-model="foo" /></div>'
    };
  })
  
  /**********************
    2nd ctrl & drctv
  **********************/
  .controller('SecondCtrl', function($scope){
    $scope.foo = "Second";
  })
  
  .directive('secondDirective', function(){ 
    return {
      restrict: 'EA',
      scope: true,
      template: '<div><label>second drctv foo: {{ foo }} </label><input type="text" ng-model="foo" /></div>'
    }; 
  })
  
  /**********************
    3rd ctrl & drctv
  **********************/
  .controller('ThirdCtrl', function($scope){
    $scope.foo = "Third";
  })
  
  .directive('thirdDirective', function(){ 
    return {
      restrict: 'EA',
      scope: {},
      template: '<div><label>third drctv foo: {{ foo }} </label><input type="text" ng-model="foo" /></div>'
    };
  })
  
  
  /**********************
    4th ctrl & drctv
  **********************/
  .controller('FourthCtrl', function($scope){
    $scope.foo = "Fourth";
  })
  
  .directive('fourthDirective', function(){ 
    return {
      restrict: 'EA',
      scope: {
        bar: '@',
        another: '@baz'
      },
      template: '<div><label>fourth drctv foo: {{ bar }}</label><input type="text" ng-model="bar" /><div>baz: {{ another }} </div></div>'
    };
  })
  
  /**********************
    5th ctrl & drctv
  **********************/
  .controller('FifthCtrl', function($scope){
    $scope.foo = "Fifth";
  })
  
  .directive('fifthDirective', function(){  
    return {
      restrict: 'EA',
      scope: {
        bar: '=bar'
      },
      template: '<div><label>fifth drctv foo: {{ bar }}</label><input type="text" ng-model="bar" /></div>'
    };
  })
  
  /**********************
    6th ctrl & drctv
  **********************/
  .controller('SixthCtrl', function($scope){
    $scope.foo = "Fifth";
    $scope.showOnFocus = function(e){
      console.log('showOnFocus', e);
    };
  })
  
  .directive('sixthDirective', function(){ 
    return {
      restrict: 'EA',
      scope: {
        foo: '&focusMe' 
      },
      template: '<div><label>sixth drctv qux</label><input type="text" /></div>', 
      link: function(scope, element){
        element.find('input').on('focus', function(e){
          scope.$apply(function(){
            scope.foo({ myEvent: e });
          });
        })
      }
    };
  });
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
    <!--script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script-->
    <!--script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-resource.js"></script-->
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  
  <h1>
    AngularJS isolate scopes explained
  </h1>
  <small>Controllers: borders around, directives: gray background. <br/>Tutorial credits: <a href="http://codetunnel.com/isolate-scopes-explained/" target="_blank">Codetunnel</a></small>   
   
  <h2><i>{{ foo }}</i> controller</h2>
  
    <section ng-controller="FirstCtrl"> 
      <h3>1. <i>{{ foo }}</i> controller, directive: parent scope<br/>scope: false </h3>
      <small>
        By default a directive shares whatever scope was defined above it. 
        Not specifying the scope property in a directive is equivalent to specifying scope: false. 
        The directive can override variables in the controller's scope and vice versa.
      </small>
      <label>first ctrl foo: </label>
      <input type="text" ng-model="foo" />
      <div class="drctv" first-directive></div>
    </section>
    
    <section ng-controller="SecondCtrl">
      <h3>2. <i>{{ foo }}</i> controller, directive: child scope <br/>scope: true</h3> 
      <small>
        The directive gets its own scope that inherits prototypically from the parent scope. 
        This is exactly the same as if you replaced the directive with a nested controller instead. 
      </small>
      <label>second ctrl foo: </label>
      <input type="text" ng-model="foo" />
      <div class="drctv" second-directive></div>
    </section>
    
    <section ng-controller="ThirdCtrl">
      <h3>3. <i>{{ foo }}</i> controller, directive: isolated scope <br/>scope: { }</h3>
      <small>
        Directive isolate scope: a scope that exists separately with no prototypal inheritance from the parent controller; a clean slate.
      </small>
      <label>third ctrl foo: </label>
      <input type="text" ng-model="foo" />
      <div class="drctv" third-directive></div>
    </section>
    
    <section ng-controller="FourthCtrl">
      <h3>4. <i>{{ foo }}</i> controller, <br/>directive scope: { foo: '@' }</h3>
      <small>
        The @ symbol tells angular that this is a one-way bound value. 
        In other words, it simply took the value of the attribute and set it as the value of a scope variable with the same name. 
        By default just specifying the @ means that the attribute name should be the same as the scope property name. 
        This is just for convenience, but you can specifiy a different attribute name too.
      </small>
      <label>fourth ctrl foo: </label>
      <input type="text" ng-model="foo" />
      <div class="drctv" fourth-directive bar="hello {{foo}}" baz="another parameter"></div>
    </section>
    
    <section ng-controller="FifthCtrl"> 
      <h3>5. <i>{{ foo }}</i> controller, <br/>directive scope: { foo: '=' }</h3>
      <small> 
        The '=' creates two way data binding between the parent scope and the directives isolate scope. 
        Variables passed this way can be changed from the controller and the directive too. 
      </small>
      <label>fifth ctrl foo: </label>
      <input type="text" ng-model="foo" />
      <div class="drctv" fifth-directive bar="foo"></div>
    </section> 
    
    <section ng-controller="SixthCtrl">
      <h3>6. <i>{{ foo }}</i> controller, <br/>directive scope: { qux: '&' }</h3>
      <small>
        With the '&' you can pass a parent controller's function call to the directive. 
      </small> 
      <label>sixth ctrl foo: </label>
      <input type="text" ng-model="foo" />
      <div class="drctv" sixth-directive focus-me="showOnFocus(myEvent)"></div>
    </section>
    
  </body>

</html>
body{
  font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}

section, 
h2{
  margin: 1em 0;
  border: 2px solid #e7e7e7;
  padding: .5em;
} 

.drctv{
  background-color: #e7e7e7;
}

small{
  display: block;
  margin: .5em;
  font-style: italic;
}