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

Question

我想动态生成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>

Answer 1

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

实际上，当我们使用 compile 之后，我们必须插入已编译的模板

已编译模板 = $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;