Question

我目前在Angular中的app.run(function...中有一些关键功能代码：

app.run(function($rootScope, $window) {

  //window dimensions
  $window.width = angular.element($window).width();
  $window.height = angular.element($window).height();

  //initial variables
  var scrollTimer = false;

  //keydown event listeners
  document.onkeydown = function(e){

    //scroll down keys
    if (e.keyCode == 32 || e.keyCode == 40) {
      scroll(-1);
      e.preventDefault(); }

    //scroll up keys
    if (e.keyCode == 38) {
      scroll(1);
      e.preventDefault(); }
  }

  //scroll
  function scroll(delta){

    //check scroll timer
    if (scrollTimer) return;

    //new scroll pane
    if (delta < 0 && $rootScope.pane.count < $rootScope.pane.max) $rootScope.pane.count += 1;
    else if (delta > 0 && $rootScope.pane.count > 0) $rootScope.pane.count -= 1;
    else return;

    //apply current pane
    $rootScope.$apply();

    //animate scroll
    var scroll = $rootScope.pane.count * $window.height + "px";
    $("html, body").animate({scrollTop: scroll}, 600, "swing");

    //reset scroll timer
    scrollTimer = true;
    setTimeout(function(){ scrollTimer = false; }, 1500);
  }

});

现在我有一个控制器（可能还有其他人）我想要访问scroll()功能。像这样：

app.controller("AsideCtrl", function($rootScope, $scope){ 

  //button scrolling
  $scope.scrollTo = function(index){
    index = index + 1;  
    scroll(index);    
  }

});

当然，由于$scope，这不起作用。有没有一种简单的方法可以实现这一目标？

Answer 1

您可以使用角度提供程序，您可以在此处找到文档https://docs.angularjs.org/guide/providers。因此，您可以创建具有您的功能的提供程序，并将提供程序传递给您的控制器。

示例：http://jsfiddle.net/7xvzm7b7/

var myApp = angular.module（'myApp'，[]）;

myApp.service('$scrollService', function() {
    this.scroll = function(delta){
    //check scroll timer
    if (scrollTimer) return;

    //new scroll pane
    if (delta < 0 && $rootScope.pane.count < $rootScope.pane.max) $rootScope.pane.count += 1;
    else if (delta > 0 && $rootScope.pane.count > 0) $rootScope.pane.count -= 1;
    else return;

    //apply current pane
    $rootScope.$apply();

    //animate scroll
    var scroll = $rootScope.pane.count * $window.height + "px";
    $("html, body").animate({scrollTop: scroll}, 600, "swing");

    //reset scroll timer
    scrollTimer = true;
    setTimeout(function(){ scrollTimer = false; }, 1500);
  }
    return this;
});
  //scroll

myApp.controller('ctrl', ['$scope', '$scrollService', function($scope, $scrollService) {
    $scrollService.scroll();
}]);

Answer 2

在服务中创建该功能，并将其注入您要使用它的所有控制器。没有弄乱根镜

简单的服务示例： http://jsfiddle.net/clto/HB7LU/8220/

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

myApp.factory('myService', ['$http', function($http){
  var myService = {};
  myService.doStuff = function(){
    return "Hello from service";
    };

  return myService;

}]);

//Inject myService in the controller
myApp.controller('MyCtrl1',['$scope','myService',
  function ($scope,myService) {
      $scope.msg = "Hello from MyCtrl1";

      $scope.foo = function(){
          $scope.msg = myService.doStuff();
      }
  }]);

myApp.controller('MyCtrl2',['$scope','myService',
  function ($scope,myService) {
      $scope.msg = "Hello from MyCtrl2";

      $scope.foo = function(){
          $scope.msg = myService.doStuff();
      }
  }])

HTML：

<div ng-controller="MyCtrl1">

    <button ng-click="foo()">Click</button>
        {{msg}}

</div>

<div ng-controller="MyCtrl2">

    <button ng-click="foo()">Click</button>
        {{msg}}

</div>

Answer 3

使用$rootScope：只需在函数声明scroll(delta)之后添加： $ rootScope.scroll = scroll;

当您调用它时，请使用$rootScope.scroll代替

使Angular函数可用于所有控制器

3 个答案: