AngularJS Directive Scope

by bcaudan

HTML

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

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: {parameterTitle:'@', 
              bidirecTitle:'=',
              delegateDisplay:'&'},
      template: '<div>' +
                  'Parameter title :<br>' + 
                  '<input ng-model="parameterTitle"> => {{parameterTitle}}<br>'+
                  '<br>' +
                  'Biderectional title :<br>' +
                  '<input ng-model="bidirecTitle"> => {{bidirecTitle}}<br>' + 
                  '<br>' +
                  'Delegate display :<br>' +
                  '{{delegateDisplay()}}<br>' + 
                '</div>'  
    }
  });