如何獲取由AngularJS創建的控制器實例？

Question

我有基於角的應用程序，我初始化這樣的：

myapp.init = (function() { 
    'use strict'; 

    var angularApp = angular.module('myapp', []) 
    .directive('homeIterationDirective', function() { 
     return function (scope, element, attrs) { 
     var isTopCard = scope.$last ? true : false; 
     cards.initSingleSwipe(element.get(0), function (event) { 
      // I want to call indexPageController.onSwiped(event) here! 
     }, isTopCard); 
     }; 
    }) 
    .directive('homeDirective', function() { 
     return function (scope, element, attrs) { 
     cards.initPanel(element, function (event) { 
      // I want to call indexPageController.onButtonPressed(event) here! 
     }); 
     }; 
    }); 

    angularApp.factory('AjaxService', myapp.services.AjaxService); 
    angularApp.controller('IndexPageController', ['$scope', '$http', '$sce', 'AjaxService', myapp.pages.IndexPageController]); 

}()); 

我的控制器看起來是這樣的：

myapp.pages.IndexPageController = function ($scope, $http, $sce, MyService) { 
    'use strict'; 

    var somevalue = {}; 

    this.onSwiped = function (event) { 
    doSomethingWith(event, somevalue); 
    }; 

    this.onButtonPressed = function (event) { 
    doSomethingWith(event, somevalue); 
    }; 

}; 

在2個指令homeIterationDirective和homeDirective我有2個回調cards.initSingleSwipe和cards.initPanel。在這些回調中，我想調用我的控制器的公共方法，但是我沒有可用的角度從IndexPageController創建的實例。我怎樣才能做到這一點？

Answer 1

如果您想從另一個地方（可能是從另一個控制器）「調用公共方法」，請使用（注入）服務（而不是控制器）。

angularApp.controller('MyController', function ($scope, IndexPageService) { 
    IndexPageService.blah(); 
})); 

控制器旨在接收和修改$範圍（添加方法，variables..etc）。 $ scope可以在使用控制器本身的模板（html）中使用。

Answer 2

如果您想要在Angular上下文中調用一些控制器代碼，但在另一個地方，那麼您應該將該調用代碼移動到服務中，然後直接調用該服務方法。

但是，如果你想打電話角範圍內之外的方法的話，你可以做到這一點是這樣的：

<div id="foo" ng-controller="IndexPageController"> 
    <!-- code --> 
</div> 

現在，你可以寫這樣的事情：

angular.element(document.getElementById("foo")).scope().blah(); 

Answer 3

我也覺得你應該使用這個服務。但是，如果你還需要從另一個調用一個控制器可以使用$控制器服務

(function() { 
    var app = angular.module('myApp', ['ngRoute']); 

    app.config(function ($routeProvider) { 
     $routeProvider.when("/first", { 
       templateUrl: 'app/view.html', 
       controller: 'firstCtrl' 
      }).when("/second", { 
       templateUrl: 'app/view.html', 
       controller: 'secondCtrl' 
      }) 
      .otherwise({ 
       redirectTo: "/first" 
      }); 
    }); 

    app.controller('firstCtrl', function ($scope) { 

     $scope.name = "first Controller"; 
     $scope.nameToUpper = function() { 
      return $scope.name.toUpperCase(); 
     } 
    }); 

    app.controller('secondCtrl', function ($scope, $controller) { 

     var newScope = $scope.$new(); 
     $controller('firstCtrl', { $scope: newScope }); 

     $scope.name = newScope.nameToUpper() + 'from second ctrl'; 
    }); 

}()) 

和看法是

<div> 
    {{name}} 
</div>