如何在 AngularJS 中安全获取并使用 Go 模板传递的数据-Golang-PHP中文网

如何在 AngularJS 中安全获取并使用 Go 模板传递的数据

本文详解如何在 Beego + AngularJS 项目中正确传递 Go 后端数据（如结构体字段、数组等）至前端，避免 "[object Object]" 错误，并支持动态渲染结构体字段（如 UnUsedBoxes 数组）。

本文详解如何在 beego + angularjs 项目中正确传递 go 后端数据（如结构体字段、数组等）至前端，避免 `"[object object]"` 错误，并支持动态渲染结构体字段（如 `unusedboxes` 数组）。

在 Go（Beego）与 AngularJS 混合开发中，一个常见误区是混淆「服务端模板渲染」与「客户端 AJAX 请求」两种数据传递方式。你遇到的 "[object Object]" 报错，根本原因在于：$http.get() 是异步 HTTP 请求方法，不能直接传入模板变量字符串；而 >> 是服务端静态插值结果，必须在 JS 代码中作为普通字符串字面量使用。

✅ 正确做法一：服务端模板直插（推荐用于初始化数据）

Beego 渲染 HTML 时，已将 viewmodels.NewCampaignPageViewModel 序列化为 HTML 上下文。因此，应直接将 Go 模板变量注入 JS 变量，而非调用 $http.get：

<!-- templates/ads_add_campaign.html -->
<script>
    // ✅ 正确：服务端渲染后，直接输出为 JS 字符串
    var vmData = {
        title: '<<<.vm.Title>>>',
        profileName: '<<<.vm.ProfileName>>>',
        profilePicture: '<<<.vm.ProfilePicture>>>',
        // 注意：数组需 JSON 编码，避免 XSS 和语法错误
        unUsedBoxes: <<<json .vm.UnUsedBoxes>>>,
        errorMessage: '<<<.vm.ErrorMessage>>>'
    };
</script><div ng-controller="AddBoxForAdsCtrl" ng-init="init(vmData)">
    <button class="_button _button-3" ng-click="showHiddenForm()">Add Box</button>
    <!-- 示例：渲染 UnUsedBoxes 数组 -->
    <div ng-repeat="box in unUsedBoxes">
        <span>{{box.Name}} - {{box.ID}}</span>
    </div>
</div>

⚠️ 关键说明：
Beego 默认不支持 >> 语法，需自定义模板函数或改用 json.Marshal 预处理。更稳妥的做法是在控制器中提前序列化：
func (receiver *AdsController) LoadNewCampaignPage() {
  view := viewmodels.NewCampaignPageViewModel{...}
  // 序列化结构体字段为 JSON 字符串（注意转义）
  jsonData, _ := json.Marshal(view)
  receiver.Data["vmJson"] = template.HTML(string(jsonData))
  // ...
}
然后在模板中：unUsedBoxes: >>

Miller CSV TSV JSON 数据处理器
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

✅ 正确做法二：独立 API 接口（推荐用于动态/敏感数据）

若需后续动态加载或避免模板注入风险，应建立标准 REST API：

Go（Beego Controller）：

func (receiver *AdsController) GetCampaignData() {
    view := viewmodels.NewCampaignPageViewModel{
        Title:          "New Campaign",
        ProfileName:    "Admin",
        UnUsedBoxes:    []models.Box{{ID: 1, Name: "Box A"}, {ID: 2, Name: "Box B"}},
    }
    receiver.Data["json"] = &view // 自动 JSON 序列化
    receiver.ServeJSON()
}

AngularJS 调用：

var addBoxForAds = angular.module('addBoxForAds', []);
addBoxForAds.controller('AddBoxForAdsCtrl', function($scope, $http) {
    $scope.init = function() {
        $http.get('/ads/campaign-data') // 对应路由：GET /ads/campaign-data
            .then(function(response) {
                var data = response.data;
                $scope.title = data.Title;
                $scope.unUsedBoxes = data.UnUsedBoxes || [];
                console.log('Loaded boxes:', $scope.unUsedBoxes);
            })
            .catch(function(error) {
                console.error('Failed to load campaign data', error);
            });
    };
});

? 常见错误总结与规避

错误写法	问题	修正方案
var title = $http.get('>>');	$http.get() 发起 HTTP 请求，但 '>>' 是字符串字面量，非有效 URL	改为 var title = '>>'; 或走 API 路由
未对 []models.Box 做 JSON 转义直接插入 JS	导致 JS 语法错误（如含双引号、换行）	使用 json.Marshal + template.HTML 包装，或通过 API 返回 JSON
在 ng-controller 内部直接访问模板变量	AngularJS 作用域隔离，无法直接读取全局 JS 变量	使用 ng-init="init(data)" 或 $scope.$parent（不推荐），优先用 ng-init 或 $http