Angular, trigger a function from a controller in a directives controller

Question

So I know you can get a function in a directive to fire a function in a controller (see : AngularJS - pass function to directive ), however, right now I am trying to acheive something slightly different.

I'm trying to have a function in a controller fire a function inside a controller in the directive (so handled within the directive). So I click the button from the controller outside the directive, and it fires a function inside the directive.

Here is what I have tried

The directive:

return {
            restrict: 'A',
            replace: true,
            controller: EditorCtrl.componentName,
            scope: {
                content: '=',
                requestNow: '@'
            },
            templateUrl: 'editor.html'
        };

The directive in use :

  <div cengage-file-editor content="XmlContent" request-now="changeXml()"></div>

the outer controllers function:

  $scope.changeXml = function(){
     //fire function inside directive controller?
       };

The function inside the directive controller:

 $scope.changeXml = function(){
            console.log("hit");
           }

So basically, I want the user to have fired the changeXml function (outside of the directive) and have it send into the directive and connect and fire a function inside there. Not sure how to accomplish this, would love some help. Thanks!

Directives are supposed to be somewhat self-contained so I don't think this is a good use-case for directives. Instead you could create a service that performs the functionality you need and inject this service into both controllers — Explosion Pills, Apr 01 '15 at 19:50

Jorge Armando Palm · Answer 1 · 2015-04-01T20:09:13.757

-1

You will have to watch for something that exists on the controller to trigger the function that is in the directive's controller.

html code: <div cengage-file-editor content="XmlContent" changeXmlTrigger="somethingChanged"></div>

The outer controller's function:

$scope.changeXml = function(){
  $scope.somethingChanged = true;
};

In the directive's controller:

$scope.$watch('somethingChanged', function(newVal, oldVal) {
  if(newVal && newVal !== oldVal) {
    $scope.changeXml();
  }
});

$scope.changeXml = function(){
  console.log("hit");
}

edited Apr 01 '15 at 20:09

answered Apr 01 '15 at 19:55

Jorge Armando Palm

366
2
5

Not trying to pass up , trying to pass from the parent controller down into the directives controller. So there is a function outside the directive that when I press, I would like it to fire something inside the directive. – ajmajmajma Apr 01 '15 at 20:00
if that's the case you have to $watch over an object inside the directive that gets changed from within the function in the controller, editing my answer now. – Jorge Armando Palm Apr 01 '15 at 20:02
Directive has isolated scope, how can it watch 'somethingChanged' – Sridhar Chidurala Apr 20 '15 at 02:51
If you look at the definition of the person who asked the question he/she is binding something called `content` to the *scope* of the directive `content: '='` if he binds that "content" locally defined to something that is defined in the Controller's scope then he can WATCH it. Directives _can_ have isolated scopes but that's not the case in this question. – Jorge Armando Palm Apr 20 '15 at 02:59

Angular, trigger a function from a controller in a directives controller

1 Answers1