Angular directive scope properties

Example to show the differences of scope inheritance mode

by bcaudan

HTML

<div ng-app="scopePropertiesModule">
  <div ng-controller="Ctrl3">
    Parent title :<br> 
    <input ng-model="title"> => {{title}}
    <hr>
    <div class="scopeProps"
         inherited-title="{{title}}" 
         bidirec-title="title"
         delegate-display="displayTitle()"></div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<style>

JavaScript

function Ctrl3($scope) {
  $scope.title = 'My relevant title';
    $scope.displayTitle = function() {
        return $scope.title;    
    }        
}

angular.module('scopePropertiesModule', [])
  .directive('scopeProps', function(){
    return {
      restrict: 'C',
      scope: {inheritedTitle:'@inheritedTitle', 
              bidirecTitle:'=bidirecTitle',
              delegateDisplay:'&delegateDisplay'},
      template: '<div>' +
                  'Inherited title :<br>' + 
                  '<input ng-model="inheritedTitle"> => {{inheritedTitle}}<br>'+
                  '<br>' +
                  'Biderectional title :<br>' +
                  '<input ng-model="bidirecTitle"> => {{bidirecTitle}}<br>' + 
                  '<br>' +
                  'Delegate display :<br>' +
                  '{{delegateDisplay()}}<br>' + 
                '</div>'  
    }
  });