javascript - Angular Controller 代码中未定义全局函数

Question

我有一个全局函数声明如下(仅必要的位):

initiateCheckList = {};

$(function() {

    initiateCheckList = function() {
    ...
    }

然后我在 Angular Controller 中有一个函数尝试调用该函数，但是当调用以下函数时，我收到错误 initiateCheckList is not Define:

$scope.updateSuburbs = function () {
    $scope.suburbs.getModel($scope.areas.areaId);
    initiateCheckList();
};

此函数嵌套在 Controller 内，并绑定(bind)到下拉 change 事件，如下所示:

<select class="form-control" ng-model="areas.areaId" ng-change="updateSuburbs()">

Angular 做了什么，导致我无法调用全局函数？如何修复问题以便可以调用它？

Answer 1

以下是在 Angular 中定义全局属性/函数的理想方式:

对于“全局”变量，您基本上有 2 个选项:

use a $rootScope [http://docs.angularjs.org/api/ng.$rootScope][1]
use a service [http://docs.angularjs.org/guide/services][1]

$rootScope 是所有范围的父级，因此公开的值将在所有模板和 Controller 中可见。使用 $rootScope 非常简单，因为您可以简单地将其注入(inject)任何 Controller 并更改此范围内的值。它可能很方便，但存在全局变量的所有问题。

服务是单例，您可以将其注入(inject)任何 Controller 并在 Controller 的范围内公开它们的值。作为单例的服务仍然是“全局的”，但您可以更好地控制这些服务的使用和公开位置。

使用服务有点复杂，但也不是那么复杂，下面是一个例子:

var myApp = angular.module('myApp',[]);
myApp.factory('UserService', function() {
  return {
      name : 'anonymous',
      printData: function() {console.log('Print Data');}
  };
});

然后在 Controller 中:

function MyCtrl($scope, UserService) {
    $scope.name = UserService.name;

    UserService.printData();
}

我希望它能帮助您理解在 Angular 中添加全局属性/函数。