Angular: Isolate Scope Bindings

Demo to show the various type of bindings available in isolate scope

by Pratik Bhattachary

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.0/angular.min.js "></script>
<div ng-controller="Ctrl">
  <h1>
  Controller
  </h1>
  <input type="text" ng-model="dynamicString">

  <h1>
  Directive
  <my-demo stc="{{staticString}}" dyn="dynamicString" func="ctrlMethod(param)"></my-demo>
  </h1>

</div>

JavaScript

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

myApp.directive("myDemo", function() {
  return {
    restrict: "A/E",
    scope: {
      stc: "@",
      dyn: "=",
      func: "&"
    },
    template: "Static = {{stc}}<br/>Dynamic = {{dyn}}<br/><button ng-click='call(\"From Dir\")'>Call</button>",
    link: function(scope, ele) {
      scope.call = function(prm) {
        scope.func({
          param: prm
        })
      }
    }
  }
});

myApp.controller("Ctrl", function($scope) {
  $scope.staticString = "Controller Static String";
  $scope.dynamicString = "";
  $scope.ctrlMethod = function(param) {
    alert("Method call in Controller - " + param);
  }
});