How to call AngularJS directive function to another controller?

Question

custom.js

function config($stateProvider){
     $stateProvider
        .state('test_page', {
            abstract: true,
            url: "/test-page",
            controller: "testController"
            templateUrl: "test.html",
        });
}

function testController($scope){
     $scope.edit= function(){
          alert("You have clicked edit icon");
     }         
}

function anotherController($scope){
     $scope.copy = function(){
          alert("Holla... You have clicked copy icon");
     }
}



function iboxTools($timeout) {
    return {
        restrict: 'A',
        scope: true,
        templateUrl: 'views/common/ibox_tools.html',
        controller: function($scope, $element) {
            // Function for collapse ibox
            $scope.showhide = function() {
                var ibox = $element.closest('div.ibox');
                var icon = $element.find('i:first');
                var content = ibox.find('div.ibox-content');
                content.slideToggle(200);
                // Toggle icon from up to down
                icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
                ibox.toggleClass('').toggleClass('border-bottom');
                $timeout(function() {
                    ibox.resize();
                    ibox.find('[id^=map-]').resize();
                }, 50);
            };
            // Function for close ibox
            $scope.closebox = function() {
                var ibox = $element.closest('div.ibox');
                ibox.remove();
            };
        }
    };
}



angular
        .module('myModule')
        .config(config)
        .controller('testController', testController)
        .controller('anotherController', anotherController)
        .directive('iboxTools', iboxTools)

test.html

<div ibox-tools></div>
/*more html */

ibox_tools.html

<div class="ibox-tools" uib-dropdown>
    <a ng-click="showhide()"> <i class="fa fa-chevron-up"></i></a>
    <a ng-click="copy()">
        <i class="fa fa-file"></i>
    </a>
    <a ng-click="edit()">
        <i class="fa fa-pencil"></i>
    </a>
    <a ng-click="closebox()"><i class="fa fa-times"></i></a>
</div>

Above I have posted my code. Here directive template copy() function not working because I have written showhide() and closebox() functions within the directive controller, edit() function in my current page testController and last copy() function written anotherController

Please check above my code. Why not calling anotherController copy() function in my current page controller?

Sorry for my bad English :(

score 0 · Answer 1 · answered Sep 13 '16 at 07:23

You can't call the function simply in another controller if it is not related to your directive/controller. So to achieve this you can declare it as $rootScope function instead of $scope or use events.

 function testController($rootScope){
    $rootScope.edit= function(){
      alert("You have clicked edit icon");
    }         
 }

 function anotherController($rootScope){
    $rootScope.copy = function(){
      alert("Holla... You have clicked copy icon");
   }  
 }

Using $rootScope everytime is not good but in some cases you can proceed.

Or we can use events

 function anotherController($rootScope){
     $scope.$on('copyEvent', function(event, arguments) {
        alert("Holla... You have clicked copy icon");
     });   
   }  
 }

To trigger that event just from child just $emit

$scope.$emit('copyEvent', arguments);

Hope this helps. Thanks !

How to call AngularJS directive function to another controller?

1 Answers1