forEach中的angularjs $compile html模板不更新变量答案

【问题标题】：angularjs $compile html template in forEach not update variablesforEach中的angularjs $compile html模板不更新变量
【发布时间】：2021-09-01 14:29:45
【问题描述】：

我想动态生成html。我有 generateHtml 函数包含项目的循环，目前它没有显示模板中添加的正确变量。它总是在编译的 html 上显示所有迭代的最后一项数据。以下是控制器和模板代码

这是我的控制器代码

angular.module('app').controller('PageController', ['$scope', '$sce', '$compile','$templateRequest',
    function ($scope, $sce, $compile,$templateRequest) {
        $scope.itemsHtml = '';
        // Array contains dynamic data
        vm.items = [{
            id: 1,
            name: 'abc',
        }, {
            id: 2,
            name: 'pqr',
        }, {
            id: 3,
            name: 'stu',
        }, {
            id: 4,
            name: 'xyz',
        }];
        vm.currentItem = [];
        
        let templateUrl = $sce.getTrustedResourceUrl('/views/item.html');

        $templateRequest(templateUrl).then(function(template) {
            vm.itemTemplate = template;
        }, function() {
        });

        vm.generateHtml = function() {
            items.forEach(function (item, key) {
                vm.currentItem = item;

                let compiledTemplate = $compile(vm.itemTemplate)($scope).html();

                /* Append compiled dynamic html */
                $scope.itemsHtml += compiledTemplate;
            });
        }

        function init() {
            vm.generateHtml();
        }
        
        init();
    }
]);

这是模板视图

<script type="text/ng-template" id="item.html">
    <div className="item-wrapper">
        <div className="item-inner">
            {{ pageCtrl.currentItem.name }}
        </div>
        <div className="action-inner">
            <div className="btn-action"
                 role="button"
                 ng-click="pageCtrl.edit(
                                pageCtrl.currentItem.id
                            )">
                <i className="fa fa-plus"></i>
            </div>
        </div>
    </div>
</script>

【问题讨论】：

我没有发现任何错误，但可能有一些奇怪的行为与 items.forEach() 中的变量范围和回调有关。尝试使用老派for (let i = 0; i < items.length; i++) { let item = items[i] } 看看是否能解决问题
@JacobStamm 感谢您的回复，但仍然存在同样的问题。

标签： angularjs angularjs-templates

【解决方案1】：

我得到了这个问题的解决方案。

实际上当我们使用compile之后，我们必须对编译后的模板进行插值

compiledTemplate = $interpolate(compiledTemplate)($scope);

let compiledTemplate = $compile(vm.itemTemplate)($scope).html();

/* Here interpolated compiled template */
compiledTemplate = $interpolate(compiledTemplate)($scope);

/* Append compiled dynamic html */
$scope.itemsHtml += compiledTemplate;

【讨论】：

我明白了。所以它直到最后才进行插值，此时变量是列表中的最后一个元素。