Make directive function accessible in parent scope without events

Question

I have a directive with an isolated scope and want to call its function to update data from the parent controller without using events.

var myApp = angular.module('MyApp',[]);

myApp.directive('myDirective', function() {

  return {
    scope: {},
    link: function(scope) {
      scope.update = function() {
        alert('Directive updated!');
      }
    }
  }
  
});

function MyCtrl($scope) {
  
  $scope.updateDirective = function() {
    // make me call update() function in directive
  }
    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyCtrl">
  <button ng-click="updateDirective()">Update!</button>
  
  <span my-directive></span>
</div>

Answer 1

You could apply this solution.

In this way you are passing a variable in two way binding:

• my-directive="myFunction" in the html
• and myFunction: '=myDirective' in the directive)

Then assign the function in the directive:

    scope.myFunction = function () {
        alert('Directive updated!');
    }

In this way you can use a function defined in a directive.

var myApp = angular.module('MyApp', []);

myApp.directive('myDirective', function () {

    return {
        scope: {
            myFunction: '=myDirective'
        },
        link: function (scope) {

            scope.myFunction = function () {
                alert('Directive updated!');
            }

        }
    }

});

function MyCtrl($scope) {
    $scope.myFunction = {};
    $scope.updateDirective = function () {
        console.log( $scope.myFunction );
        $scope.myFunction();
        // make me call update() function in directive
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    <button ng-click="updateDirective()">Update!</button> <span my-directive="myFunction"></span>

</div>

Answer 2

You could tackle this issue by introducing a new directive that is required by your isolated directive. Conveniently, you can assign the controller to this new directive.

Once required you then 'register' your isolated directive to the 'parent' directive as the target for your function. In the code snippet below I only provided a way to add 1 directive, but you could easily extend this to be an array of child directives. A good of example of such a setup are tabs, where each tab is a child directive of a common tabs directive.

angular.module("MyApp", []);

angular.module('MyApp').directive("myParentDirective", function(){
return {
    controller: function ($scope) {
        var childUpdate;
        this.registerChild = function(_childUpdate_){
            childUpdate = _childUpdate_;
        };      
        
        $scope.updateDirective = function() {
            childUpdate();
        };

    }
};
});
angular.module('MyApp').directive('myDirective', function() {
return {
    require: '^myParentDirective',
    scope: {},
    link: function(scope, element, attrs, myParentController) {
        myParentController.registerChild(update);
        
        function update() {
            alert('Directive updated!');
        }
    }
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
    <div my-parent-directive>
        <button ng-click="updateDirective()">Update!</button>
        <span my-directive></span>
    </div>
</div>