Сделать угловые функции доступны для всех контроллеров

Question

я в настоящее время имею некоторый код ключа функциональности в 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/

вар 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

Используйте $rootScope: просто добавить после объявления функции scroll(delta): $ rootScope.scroll = прокрутки;

и когда вы называете это использовать $rootScope.scroll вместо

Answer 3

Сделать функцию в сервисе и приложить ее к всем контроллерам, где вы хотите их использовать. Без баловаться с rootscope

Простой пример сервиса: 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>