DieOnTime DieOnTime - 1 year ago 62
AngularJS Question

Executing events from both page and directive in angularjs

I have 2 modules, one for the actual page and the other for building reusable components. I have a button in my custom directive which does action A. I'm using this this directive inside another module page where i have action B which has to be executed once the directive button is clicked.

so it' should do something like below..

dir button click -> function A() + function B() in page

broadcasting seems to be unorthodox in the environment i work in

I've tried in this plnkr

Here's what the code looks like

// Code goes here
angular.module('diruser', ['dir'])
.controller('dirusercon', function($scope) {
$scope.clicks = function(ev) {
console.log('click from page');

angular.module('dir', [])
.controller('dircon', function($scope) {
$scope.dirclick = function(ev) {
console.log('click from dir');
.directive('dire', function() {
return {
restrict: 'E',
controller: 'dircon',
scope: {
dirclicked: '&'
template: "<button ng-click='dirclick($event)'>OK</button>"

<!DOCTYPE html>

<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

<body ng-app='diruser' ng-controller='dirusercon'>

<dire dirclick='clicks(e)'></dire>


Please help.. thanks in advance

Answer Source

In your sample, there is mistake :

You defined in scope a function named dircliked, but you use it as dirclick.

The use must be : <dire dirclicked='clicks(e)'></dire>

In your dirClick function you must call dircliked in scope :

$scope.dirclick = function(ev){
   console.log('click from dir');
   $scope.dirclicked({e: ev});

I edited your plunker : http://plnkr.co/edit/2L7ezlPKcChQfulZZtx0?p=preview

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download