在AngularJS表达式中调用全局变量

Question

我有一些全局变量在头部标签中：

``````标签中有一些全局变量：

<script type="text/javascript">
    var apiRoot = 'http://localhost:8000/api',
        apiUrl = apiRoot,
        apiBadgeUrl = apiRoot + '/badges',
        apiLevelUrl = apiRoot + '/levels',
        apiBehaviorUrl = apiRoot + '/behaviors',
        apiTrophyUrl = apiRoot + '/trophies',
        apiUserUrl = apiRoot + '/users',
        apiWidgetPreferencesUrl = apiRoot + '/widgetPreferences';
</script>

我想在HTML文件中使用Angular表达式，但我的尝试失败了：

{{ $window.apiRoot }} or {{ apiRoot }} 

- mTuran

Answer 1

这些表达式是针对当前范围进行评估的。如果您没有通过控制器在您的范围内设置它们，它将不会被评估。请参见http://docs.angularjs.org/guide/expression。

例子：

function MyCtrl($scope)
{
   $scope.apiRoot = apiRoot;
}

HTML：

<div ng-controller="MyCtrl">
   {{apiRoot}}
</div>

正如之前提到的，虽然上面的例子可以工作，但并不推荐。更好的方式是在服务中设置这些变量，然后通过服务获取它们。

function MyCtrl($scope, apiRootService)
{
   $scope.apiRoot = apiRootService.getApiRoot();
}

这项服务：

angular.module('myServices', []).factory('apiRootService', function() {
    var apiRoot = 'http://localhost:8000/api',
    apiUrl = apiRoot,
    apiBadgeUrl = apiRoot + '/badges',
    apiLevelUrl = apiRoot + '/levels',
    apiBehaviorUrl = apiRoot + '/behaviors',
    apiTrophyUrl = apiRoot + '/trophies',
    apiUserUrl = apiRoot + '/users',
    apiWidgetPreferencesUrl = apiRoot + '/widgetPreferences';
    return {
      getApiRoot: function() {
         return apiRoot
      },
      //all the other getters
   });

- dnc253

---

虽然这种方法可行，但对于单元测试非常不好 :-( - pkozlowski.opensource

@pkozlowski.opensource 你是完全正确的。我已经更新了我的回答，展示更正确的方法。如果我的更新有误，请纠正我。 - dnc253

我认为它应该被称为 apiRootService（不需要美元符号）。Angular在内部名称中使用美元符号。 - Sam Barnum

服务前面加上美元符号也没有问题，但是你说得对，不建议这样做。我已经更新了答案。 - dnc253

Answer 2

最佳实践是将apiRoot移动到一个服务中，并将该服务注入到您的控制器中。请参见此处。

- Roy Truelove

Answer 3

另一种方法是将全局变量添加到$rootScope中。您可以通过将以下内容添加到应用程序模块定义中来实现此目的

angular.module('myApp', ['ngRoute'])
    .run(function ($rootScope){
        $rootScope.myAPI = {
             apiRoot: 'http://localhost:8000/api',
             apiUrl: apiRoot,
             apiBadgeUrl: apiRoot + '/badges',
             apiLevelUrl: apiRoot + '/levels',
             apiBehaviorUrl: apiRoot + '/behaviors',
             apiTrophyUrl: apiRoot + '/trophies',
             apiUserUrl: apiRoot + '/users',
             apiWidgetPreferencesUrl: apiRoot + '/widgetPreferences'
        }
    });

虽然服务确实可以工作，但 Angular 文档不建议这样做。http://docs.angularjs.org/misc/faq

相反，不要创建一个唯一目的是存储和返回数据片段的服务。

- mark