<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@2.0.0" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>Hello Plunker!</h1>
<div ng-show="show">
{{ 2 + 2 }}
</div>
<button my-dir>Run my directive</button>
</body>
</html>
// Code goes here
var app = angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.show = false;
$scope.$on('runEvent', function(){
$scope.show = true;
console.log("I captured an event...");
});
}).directive('myDir', function(){
return {
// name: '',
// priority: 1,
// terminal: true,
// scope: {}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
$(iElm).click(function(){
$scope.$emit('runEvent');
console.log($scope.show);
});
}
}
});
/* Styles go here */