CODEWITHSUNDEEP
angularjs
Hugo Seleiro
Hugo Seleiro

Reputation: 2657

AngularJS - Function declared in child directive called in the parent controller

Call a function on parent controller that is declared in is child directive.

Parent controller HTML 

<div ng-click="testFunction()"></div>

Parent controller js

  $scope.testFunction = function(){
    $scope.functionFromChildDirective()
  }

Child directive js

function TestDirective() {

    return {
      restrict: 'EA',
      scope: {
      },  
      templateUrl: '',
      controller: function($scope) {
        "ngInject";

        $scope.functionFromChildDirective = function(){
          console.log("TEST")
        }

      }
    }
  }

  export default {
    name: 'testDirective',
    fn: TestDirective
  };

Upvotes: 1

Views: 47

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Use the ng-ref directive to bind the controller to a parent variable:

<test-directive ng-ref="testAPI">
</test-directive>

function TestDirective() {

    return {
      restrict: 'EA',
      scope: {
      },  
      templateUrl: '',
      controller: function() {
        this.testFn = function(){
          console.log("TEST")
        }

      }
    }
  }

To invoke it:

<div ng-click="testAPI.testFn()"></div>

The ngRef directive tells AngularJS to assign the controller of a component (or a directive) to the given property in the current scope.

For more information, see AngularJS ng-ref Directive API Reference.

Upvotes: 1

rtn
rtn

Reputation: 2034

Just delete the empty scope deceleration, by defining it you are creating a new isolate scope. If you don't declare the scope in the directive definition object it will just inherit the parents scope. However with this approach the child directive can only be used once (i.e can't be repeated) as each instance of will just overwrite the $scope.functionFromChildDirective property.

Upvotes: 1

Related Questions