angularjs directives

by slawe

HTML

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
      <example-directive example-number="99" example-function="exampleCallback()"></example-directive>
      See console log.
  </div>
</div>

JavaScript

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

app.controller('MyCtrl', function($scope) {
    $scope.exampleCallback = function() {
        console.log('inside exampleCallback()');
    }
});

app.directive('exampleDirective', function () {
    return {
        restrict: 'E', // 'A' is the default, so you could remove this line
        scope: {
            callback: '&exampleFunction',
        },
        link: function (scope, element, attrs) {
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=', num);
            scope.callback(); // calls exampleCallback()
        }
    };
});