AngularJS 1.6.9异步操作返回结果异常，预览面板无法显示内容

问题根源 #

AngularJS 1.x的模板插值系统无法直接处理Promise对象。你在模板中调用的updateItemInformation()是异步函数，返回的是Promise，模板会直接将其解析为undefined（因为Promise未完成时没有可渲染的有效值），即使后续Promise resolve拿到结果，也无法自动触发视图更新。

解决方案 #

不要在模板中直接调用异步函数，改为通过$scope变量绑定结果，结合$watch监听表单字段变化，异步请求完成后更新变量，让AngularJS自动处理视图渲染。

修改后的代码

HTML部分

<div class="col text-monospace small shadow p-2 mb-2 pre-scrollable">
    {{previewContent}}
    <!-- 若模板是HTML内容，改用ng-bind-html确保安全渲染： -->
    <!-- <div ng-bind-html="previewContent"></div> -->
</div>

JS部分

var app = angular.module('app', ['ngSanitize']);
app.controller('c', ($scope, $sce) => {
    // 初始化预览内容变量
    $scope.previewContent = '';

    // 深度监听item对象的所有字段变化
    $scope.$watch('item', (newItem) => {
        // 确保category字段存在再发起请求
        if (!newItem?.category) return;
        
        fillTemplate(newItem)
            .then(template => {
                $scope.previewContent = template;
                // 若模板是HTML，需信任内容避免AngularJS过滤：
                // $scope.previewContent = $sce.trustAsHtml(template);
            })
            .catch(err => {
                console.error('模板加载失败：', err);
                $scope.previewContent = '模板加载失败，请检查路径或文件';
            });
    }, true); // 第三个参数true开启深度监听

    async function fillTemplate(item) {
        const response = await fetch(`./templates/${item.category}.template`);
        // 校验请求状态
        if (!response.ok) throw new Error(`请求错误：${response.status}`);
        
        const template = await response.text();
        return template || '';
    }
});

关键说明 #

1. $watch深度监听：第三个参数true会监听item对象的所有子字段变化，确保表单任意字段更新都能触发模板请求。
2. 异步结果绑定：将模板内容赋值给$scope.previewContent，AngularJS的digest循环会自动检测变量变化并更新视图。
3. 错误处理：添加catch分支处理请求失败场景，避免页面无反馈。

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