javascript - Angular Nested Directives -

i'm trying have child directive isolated scope execute function. can't seem have directive isolated scope execute function of parent scope. doesn't work.

usagea: <div data-outer data-controller="control"><div data-inner></div></div>  usage b: <div data-inner data-controller="controltwo"></div>   app.controller('control', ['$scope', function($scope){ $scope.onouterchange = function () {     alert("outer change"); } }]);  app.controller('controltwo', ['$scope', function($scope){ $scope.oninnerchange = function () {     alert("inner change"); } }]);  app.directive('outer', function($compile){ // runs during compile return {     scope: {         "onouterchange": "&",     },     controller: function ($scope, $element) {     },     link: function ($scope, ielm, iattrs, controller) {         $scope.oninnerchange = function () {             alert("inner changed");         }     } } }); app.directive('inner', function($compile){ // runs during compile return {     scope: {         "oninnerchange": "&",     },     controller: function ($scope, $element) {     },     link: function ($scope, ielm, iattrs, controller) {         $scope.oninnerchange();     } } }); 

you missing add on-outer-change outer directive have function name want pass isolated scope directive on-outer-change="onouterchange()". inner directive should pass method oninnerchange scope variable of inner directive isolated scope.

markup

<div data-outer on-outer-change="onouterchange()">     <div data-inner on-inner-change="onouterchange()"></div> </div> 

code

app.directive('outer', function($compile) {   // runs during compile   return {     scope: {       "onouterchange": "&",     },     restrict: 'a',     controller: function($scope, $element) {},     link: function($scope, ielm, iattrs, controller) {       $scope.oninnerchange = function() {         scope.onouterchange();       }     }   } }); app.directive('inner', function($compile) {   // runs during compile   return {     scope: {       "oninnerchange": "&",     },     controller: function($scope, $element) {},     link: function($scope, ielm, iattrs, controller) {       $scope.oninnerchange();     }   } }); 

demo here