<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<my-directive options="dirOptions"></my-directive>
<br>
<button ng-click="callDirFunc()">Call directive function</button>
</body>
</html>
// the application module
angular.module('myApp', [])
// a simple directive defining a linking function
.directive('myDirective', function(){
return {
template: '<div>A Custom Directive <br> <b ng-show="directiveCtrlCalled">directiveCtrl() was called!!</b> </div>',
restrict: 'E',
replace: true,
scope: { options: '='},
link: function(scope){
scope.directiveCtrlCalled = false;
angular.extend(scope.options, {
directiveFunction: function(){
scope.directiveCtrlCalled = true;
}
});
}
};
})
// the controller passes an options object to the directive.
// Then in the directive's controller that object is extended to provide
// "public" function
.controller('MainCtrl', function($scope){
$scope.dirOptions = {};
$scope.callDirFunc = function(){
$scope.dirOptions.directiveFunction();
};
});
/* Styles go here */