angularJS中的全局函数

Global Functions in angularJS

本文关键字：函数全局 angularJS 更新时间：2023-12-18

我是angularJS的新手。所以需要关于如何在angular项目中添加全局函数的帮助吗？文件加载我的angular应用程序使用showScrollAndGo函数，该函数应该作为全局方法工作，但它不工作。app.js的代码为：

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

我需要在不同的视图中访问showScrollAndGo。因此，努力使其全球化。知道我哪里做错了吗？

我使用它的视图如下：

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

参考Angular的文档

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

你需要像一样在运行阶段配置rootScope

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

您可以尝试添加一个工厂，并在所有需要的控制器中引用该工厂。

样品：

在app.js中添加一个工厂：

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

在任何控制器文件中，您都可以通过名称引用该工厂，并像下面这样使用它，

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