Angular call controller function from nested custom directive

Question

I could use some help. I have a controller containing a function called "loadInformation()". Inside this controller I use a service which is doing some DOM-Manipulation using custom directives. These are the directives:

First custom Directive:

angular.module('...').directive('ngInputString', function () {
return {
restrict: 'AE',
replace: 'true',
scope: {
  savedInformation: '=',
  type: '@',
  values: '='
},
templateUrl: 'directives/templates/inputString.html',
link: function (scope, element, attrs) {
  scope.filterOb = {ttype: scope.type};
}
}
});

HTML file:

<div>
<input ttype="{{type}}" type="text" placeholder="{{param.name}}"         value='{{param.value}}'
     class='clean-input form-control'/>
 <ng-saved-information type="STRING" saved-information="savedInformation"></ng-saved-information>
 </div>

Nested custom directive:

angular.module('semtrosApp').directive('ngSavedInformation', function    () {
return {
restrict: 'AE',
replace: 'true',
scope: {
  savedInformation: '=',
  type: '@'
},
template: '<ul><li ng-repeat="information in savedInformation |    filter:filterOb">{{information.value}}<button type="button" ng-click="..?..">Use Information</button></li></ul>',
link: function (scope, elem, attrs) {
  scope.filterOb = {ttype: scope.type};
}
}
});

When I dont use nested directives, it works just fine with that piece of code:

elem.bind('click', function() {
    scope.$apply(function() {
      scope.loadInformation();
    });
  });

But when they are nested, the second custom diretive is just looking inside the scope of the parent directive. Any idea how to pass through the function call?

I am surprised that the nested custom directive can call scope.loadInformation() and find it in the parent directive. Both directives have isolate scope - they shouldn't be able to see their parent scopes at all. — Frank Modica
– Frank Modica, Commented Jul 1, 2017 at 16:04

Frank Modica · Accepted Answer · 2017-07-01 16:13:21Z

1

It looks like the ngInputString directive already takes in some data and passes it down to ngSavedInformation. Why not have it take in a loadInformation callback as well and pass it down?

angular.module('...').directive('ngInputString', function () {
  return {
    scope: {
      savedInformation: '=',
      type: '@',
      values: '=',
      loadInformation: '&'
    },
    // etc
  }
});

 <ng-saved-information type="STRING" saved-information="savedInformation" load-information="loadInformation()"></ng-saved-information>

 angular.module('semtrosApp').directive('ngSavedInformation', function () {
   return {
     scope: {
       savedInformation: '=',
       type: '@',
       loadInformation: '&'
     },
     // etc
   }
 });

Also, instead of manually creating a click handler, you could do the following in the template:

ng-click="loadInformation()"

edited Jul 1, 2017 at 16:13

answered Jul 1, 2017 at 15:53

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Over a year ago

The possibility to share a function with the '&'-symbol was exactly what I was looking for! Thanks a lot!

Chris Over a year ago

One last question: Is it possible to pass any arguments to the function in the parent controller?

<li ng-repeat="information in savedInformation | filter:filterOb">{{information.value}}<button type="button" ng-click="loadInformation(information)">

doesnt seem to work.

Chris Over a year ago

Adding a value to the parent function commander.loadInformation(message) is the first step, ng-click="loadInformation({message:3})" works on the first directive. But how to pass to the nested one? Custom directives are not very intuitive..

Frank Modica Over a year ago

@Chris It seems like that should work. If you create a live example of the issue in plnkr I could help.

Collectives™ on Stack Overflow

Angular call controller function from nested custom directive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related