javascript - angularJS 中的全局函数

标签 javascript angularjs angularjs-scope angular-ui

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

});

我需要在不同的 View 中访问 showScrollAndGo。所以试图让它全局化。 知道我哪里做错了吗?

我在这样的 View 中使用它:

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

最佳答案

引用 Angular 的 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
});

你需要在运行阶段配置rootScope

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

关于javascript - angularJS 中的全局函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28541179/

相关文章:

javascript - 无法让 Accordion 在 cshtml 中正常工作

javascript - 为什么正则表达式使用 Angular $sce 在 "t"中查找 "Georgia"?

AngularJS : after isolating scope and binding to a parentFunction, 如何将参数传递给这个parentFunction?

javascript - Angular.js 从指令到 Controller 的返回值

javascript - 使用 Redux 播放音频文件

javascript - React-router 中 Link 和 Anchor 标签的不同行为

javascript - 使用 polyfill 可以在多大程度上模拟 Shadow DOM?

javascript - 单击元素时在列表组和 div 之间切换

rest - 使用 Angular 前端和 Drupal 7 后端处理 CSRF/XSRF token

jquery - 如何检测 Angular 中是否*未*单击指令元素