Angular: Directive - Link Function

To answer this question: http://stackoverflow.com/questions/35275829/ng-click-in-angular-directive-pass-function-from-root-scope?noredirect=1#comment58263391_35275829

by Cale Bergh

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <hello-directive list="osList" func="myFunc()"></hello-directive>
</div>

JavaScript

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

function MyCtrl($scope) {
  $scope.name = 'Angular Directive';
  $scope.osList = "Original value";
  $scope.stuffFromController = {};
  $scope.myFunc  = function(){ alert("Function in controller");};
};

var HelloDirective = function() {
  return {
    scope: {
      list: "=",
      func: "&"
    }, // use a new isolated scope
    restrict: 'AE',
    replace: false,
    template: '<h3>{{list}}</h3><button ng-click="func()" type="button">Button</button>',
    link: function(scope, elem, attrs) {
      }
  };
};

myApp.directive("helloDirective", HelloDirective);