如何在HTML中设置与调用AngularJS应用级变量

看起来你已经走对了方向，只是在变量定义、注入和引用的细节上踩了几个小坑。我来帮你梳理正确的实现方式，结合你的代码逐一修正：

一、先修正你当前代码的核心问题 #

1. 应用级变量的定义错误

你在index.html的script里给value赋值时加了引号，导致vPage变成了字符串"0"，但控制器里判断的是数值0，条件永远不匹配！另外，变量定义的位置没问题，但建议把配置类的代码放到单独的文件（比如app.config.js）里，更清晰。

修正后的变量定义：

// 可以放在App.js之后的script或单独文件中
vApp.value("vPage", 0); // 去掉引号，用数值类型
vApp.value("vLevel", 0);
vApp.value("vDivision", 0);
vApp.value("vLayout", "./Layout.html");

2. 控制器未注入应用级变量

你的CustomController依赖数组里没有包含vPage，导致控制器无法访问这个全局变量。同时，你可以把注入的变量挂载到$rootScope上，方便HTML全局调用。

修正后的Custom.js：

vApp.controller("CustomController", ['$scope', '$sce', '$rootScope', 'vPage', function ($scope, $sce, $rootScope, vPage) {
    // 将应用级变量挂载到$rootScope，全局可用
    $rootScope.vPage = vPage;

    $scope.getContent = function(targetPage) {
        $scope.vResult = "";
        $scope.vDefault = "Zero";
        $scope.vResult += "<p id='idCenterContent'>";
        
        // 优先使用传入的参数，没有则用全局的vPage
        const currentPage = typeof targetPage !== 'undefined' ? targetPage : $rootScope.vPage;

        if(currentPage === 0) {
            $scope.vResult += $scope.vDefault;
        } else if(currentPage === 1) {
            $scope.vResult += "One";
        } else if(currentPage === 2) {
            $scope.vResult += "Two";
        } else if(currentPage === 3) {
            $scope.vResult += "Three";
        } else {
            $scope.vResult += $scope.vDefault;
        }
        $scope.vResult += "</p>";
        return $sce.trustAsHtml($scope.vResult);
    };
}]);

3. HTML中调用函数的正确方式

原来的getContent($rootScope.vPage)写法没问题，但前提是vPage已经被挂载到$rootScope上。如果函数内部已经处理了默认值，也可以直接调用getContent()：

修正后的Layout.html：

<any ng-controller="CustomController" ng-bind-html="getContent()"></any>
<!-- 如需手动传值，可写成 getContent(1) 或 getContent($root.vPage) -->

二、全局变量设置与调用的通用规则 #

1. 设置应用级变量的两种常用方式

AngularJS提供了两种全局变量定义方式，根据需求选择：

• value()：用于可修改的全局值（比如用户状态、动态配置）

  vApp.value("userStatus", "online");
  

• constant()：用于不可修改的常量（比如API地址、固定配置）

  vApp.constant("API_BASE", "/api/v1");
  

2. 注入变量的正确语法

无论是控制器、服务还是指令，都需要通过依赖注入来访问全局变量：

// 控制器注入示例
vApp.controller("MyController", ['$scope', 'userStatus', 'API_BASE', function($scope, userStatus, API_BASE) {
    console.log(userStatus); // 直接使用注入的变量
    $scope.apiUrl = API_BASE + "/users"; // 赋值到当前scope供HTML使用
}]);

3. HTML中引用变量的语法

• 如果变量在$rootScope上，全局范围内直接用{{$root.变量名}}：

  <p>当前用户状态：{{$root.userStatus}}</p>
  

• 如果变量在当前控制器的$scope上，直接用{{变量名}}：

  <p>API地址：{{apiUrl}}</p>
  

4. 变量传入函数的正确写法

在HTML中调用函数时，可以直接传递全局变量或本地变量：

<!-- 传递全局变量 -->
<button ng-click="updateStatus($root.userStatus)">更新状态</button>
<!-- 传递固定值 -->
<button ng-click="getContent(2)">加载页面2</button>

控制器里接收参数即可：

$scope.updateStatus = function(status) {
    // 处理逻辑
};

内容的提问来源于stack exchange，提问作者Kamurai