AngularJS-Directive-Scope-Isolated-MethodRef

To demonstrate how isolate scope with method reference syntax works

by madhanganesh

HTML

<div ng-app='myApp' ng-controller="MyController">
  <h1>HTML View - scope</h1>
  <strong>Name: </strong> <input ng-model="name"/>
  <hr/>
  <h2>Directive</h2>
  <div upper-case name="getName()"/></div>
</div>

JavaScript

var myApp = angular.module('myApp', []);
 
myApp.controller('MyController', function($scope) {
  $scope.name = 'Jack'; 
  $scope.getName = function() {
    return $scope.name;
  }
 });

myApp.directive('upperCase', function() {
  return {
    scope: {
      textCb: '&name'
    },
    //template: 'Name: <input ng-model="nameFn()"></input>'
    template: 'Name: {{textCb()}}'
  }
});