Passing Function Arguments with Isolated and Share scopes with Angular Directives

Question

I have 3 directive with isolate scope and share scope and I want pass a function beteween outermost a innermost directive. The outer and middle has isolate scopes and the middle with inner share the scope. Any suggest ?

Pass the functions of my controller as shown below .


<outer on-edit="helloWorld" ng-model="model" ng-repeat="items in items.objects" ></outer>

In my controller:


     $scope.helloWorld = function(){
            alert('Hello world');
     }

My directive:


    angular.module('myApp')
      .directive('outer', function () {
        return {
          restrict: 'E',
          replace: true,
          scope: {
            item: "=ngModel",        
            onEdit: '&'
          },
          template: '<div><middle on-edit='onEdit'></middle></div>',
          controller : function($scope){
            $scope.edit = function(){
              $scope.onEdit()();
            }
          }

        };
      })
      .directive('middle', function () {
        return {
          restrict: 'E',
          replace: true,
          scope: {
            item : '=ngModel',      
            onEdit : '&'
          },      
          templateUrl: '<div><inner on-edit='onEdit'></inner></div>'      
        };
      })
      .directive('inner', function () {
        return {
          restrict: 'E',      
          template: '<div><a ng-click='edit()'>Edit</a></div>'

        };
      })

And this not work, any ideas?

Thanks

pranavjindal999 pranavjindal999 · Accepted Answer · 2017-02-15T11:09:08

This looks a bad design though, but in the middle directive's template you are using inner directive as follows:

<div><inner on-edit='onEdit'></inner></div>

If you look at it, inner directive has no scope, so the attribute on-edit doesn't make sense there.

If you want to use any method that is present in middle directive can be directly used in inner directive because of shared scope. Think of inner directive as a part of html written in some other html file which will be replaced at run time. So anything you pass to middle directive is implicitly passed to inner.

Passing Function Arguments with Isolated and Share scopes with Angular Directives

1 Answers