2015-02-16 13 views
7

Sono nuovo di angularJS. Quindi hai bisogno di aiuto su come aggiungere funzioni globali nel progetto angolare? Il caricamento del file della mia app angolare utilizza la funzione showScrollAndGo che dovrebbe funzionare come metodo globale ma non funziona. Codice di app.js è:Funzioni globali in angularJS

'use strict'; define(
[ 
    'angular', 
    'jQuery', 
    'angular-route', 
    'angular-resource', 
    'angular-ui-bootstrap', 
    'highcharts', 
    'highcharts-theme', 
    'highcharts-ng', 
    'controllers/index', 
    'directives/index', 
    'filters/index', 
    'services/index', 
    'angular-token-auth', 
    'angular-local-storage', 
    'jquery.slimscroll', 
    'jquery-icheck' 
], 
function(angular, $) { 
    'use strict'; 
    return angular.module('radian', ['ngRoute', 'ngResource', 'ui.bootstrap', 'app.services', 'app.controllers', 'app.directives','app.filters', 'highcharts-ng', 'ng-token-auth', 'ngStorage']) 
     .constant('globals', { 
      API_URL: 'http://localhost:3000/api', 
      AUTH_URL: 'http://radiancor-env.elasticbeanstalk.com', 
      TEMPLATE_URL: 'app/views' 
     }) 
     .constant('pagination', { 
      items_per_page: 10, 
      max_size: 5, 
      direction_links: true, 
      boundary_links: true, 
      current_page: 1, 
      total_items: 0 
     }) 
     .config(['$routeProvider', 'globals', routeConfiguration]) 
     .config(['$httpProvider', httpConfiguration]) 
     .config(['$authProvider', 'globals', authProvider]) 
     .config(['$rootScopeProvider', root_functions]) 
     .config(['paginationConfig', paginationConfiguration]); 

    function authProvider($authProvider, globals) { 
     $authProvider.configure({ 
      apiUrl: globals.AUTH_URL 
     }); 
    } 

    function paginationConfiguration(paginationConfig) { 
     paginationConfig.firstText = '<<'; 
     paginationConfig.lastText = '>>'; 
     paginationConfig.nextText = '>'; 
     paginationConfig.previousText = '<'; 
    } 

    function routeConfiguration($routeProvider, globals) { 
     $routeProvider 
      .when('/', { 
       templateUrl: globals.TEMPLATE_URL+'/misc/login.html', 
       controller: 'LoginController', 
       controllerAs: 'login' 
      }) 
      .when('/dashboard', { 
       templateUrl: globals.TEMPLATE_URL+'/misc/dashboard.html', 
       controller: 'DashboardController', 
       controllerAs: 'dashboard' 
      }) 
      .when('/entity/:entity/:action', { 
       templateUrl: function(rp) { 
        return globals.TEMPLATE_URL+'/'+rp.entity+'/'+rp.action+'.html'; 
       } 
      }) 
      .when('/entity/:entity/:action/:id', { 
       templateUrl: function(rp) { 
        return globals.TEMPLATE_URL+'/'+rp.entity+'/'+rp.action+'.html'; 
       } 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    } 

    function httpConfiguration($httpProvider) { 
     $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8'; 
     $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript'; 
     $httpProvider.defaults.useXDomain = true; 
     $httpProvider.interceptors.push('interceptService'); 

    } 

    function root_functions($rootScope) { 
     $rootScope.showScrollAndGo = function(path) { 
      alert("I'm global foo!"); 
     }; 
    } 

}); 

ho bisogno di accedere showScrollAndGo in diversi punti di vista. Quindi, cercando di renderlo globale. Qualche idea su dove sto sbagliando?

Io lo utilizzo in vista in questo modo:

<a href="#/entity/clients/list" data-ng-click="showScrollAndGo('aaa');"><i class="fa fa-circle mrm mlm"></i>Manage Clients</a> 
+0

Sarebbe aiuto se puoi mostrare come stai cercando di chiamare '$ rootScope.showScrollAndGo', e il messaggio di errore che la chiamata ha come risultato – paul

risposta

6

Riferendosi al di angolare document

angular.module('myModule', []). 
config(function(injectables) { // provider-injector 
    // This is an example of config block. 
    // You can have as many of these as you want. 
    // You can only inject Providers (not instances) 
    // into config blocks. 
}). 
run(function(injectables) { // instance-injector 
    // This is an example of a run block. 
    // You can have as many of these as you want. 
    // You can only inject instances (not Providers) 
    // into run blocks 
}); 

È necessario config il rootScope in fase di run come

app.run(function($rootScope) { 
    $rootScope.showScrollAndGo = function(path) { 
     alert("I'm global foo!"); 
    }; 
}); 
1

Si può provare aggiungere una fabbrica e riferire quella fabbrica in tutti i controller dove ne hai bisogno.

Esempio:

In app.js aggiungere una fabbrica:

app.factory('notificationFactory', function (toaster) { 
    //............. 
}); 

In ogni file di controllo è possibile fare riferimento questa fabbrica per nome e usarlo come qui di seguito,

app.controller('sampleController', ['$scope','notificationFactory', 
    function ($scope, notificationFactory) { 
    } 
]); 
+2

la tua soluzione va bene, ma volevo dichiarare da qualche parte globalmente con n o cambiamenti nei controller. –