Question

我有一个基于Angular的应用程序，我这样初始化：

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。在这些回调中，我想调用我的控制器的公共方法，但我没有Angular从IndexPageController创建的实例。我怎样才能做到这一点？

Answer 1

如果您想要从另一个地方（可能是另一个控制器）调用“公共方法”，请使用（注入）服务（而不是控制器）。

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

Controller旨在接收和修改$ scope（添加方法，变量等）。 $ scope可以在使用控制器本身的模板（html）中使用。

Answer 2

如果你想在Angular上下文中调用一些控制器代码但是在另一个地方，那么你应该将该调用代码移动到服务然后直接调用服务方法。

但是如果你想在Angular上下文之外调用该方法，你可以这样实现：

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

现在，您可以写下这样的内容：

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

Answer 3

我也认为你应该为此使用服务。但是，如果您仍需要从另一个控制器调用一个控制器，则可以使用 $ controller 服务

 <div ng-app="app" ng-controller="Base">
     <div ng-repeat="item in items">
        <img data-random-image=""> 
     </div>
 </div>

并且查看

(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';
    });

}())

如何获取AngularJS创建的控制器实例？

3 个答案: