如何将 AngularJS 指令函数调用到另一个控制器？答案

【问题标题】：How to call AngularJS directive function to another controller?如何将 AngularJS 指令函数调用到另一个控制器？
【发布时间】：2016-09-13 06:51:26
【问题描述】：

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>

上面我已经发布了我的代码。这里指令模板copy() 函数不起作用，因为我在指令控制器中编写了showhide() 和closebox() 函数，我当前页面中的edit() 函数testController 和最后一个copy() 函数编写anotherController

请检查上面我的代码。为什么不在我当前的页面控制器中调用 anotherController copy() 函数？

对不起我的英语不好:(

【问题讨论】：

标签： javascript angularjs controller directive

【解决方案1】：

如果函数与您的指令/控制器无关，您不能简单地在另一个控制器中调用该函数。因此，要实现这一点，您可以将其声明为 $rootScope 函数而不是 $scope 或使用事件。

 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");
   }  
 }

每次都使用 $rootScope 并不好，但在某些情况下您可以继续。

或者我们可以使用事件

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

仅从子级触发该事件只需 $emit

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

希望这会有所帮助。谢谢！

【讨论】：