Angular.js

通过以下方法实现html动态模板和ng-repeat="item in ModelData" 函数的结合使用

 原绑定方法:
                  <div  ng-bind-html="HTMLData | toHtml" ></div>
修改后可与【ng-repeat="item in ModelData"】结合使用:
                <div dynamic-html="HTMLData" ></div>
                 angular.module('myApp').directive('dynamicHtml', ['$compile', '$sce', function($compile, $sce) {
                        return {
                            restrict: 'A',
                            link: function (scope, element, attrs) {
                                scope.$watch(attrs.dynamicHtml, function (html) {
                                    // 信任HTML内容
                                    const trustedHtml = html;
                                    // 更新DOM内容
                                    element.html(trustedHtml);
                                    // 编译新内容
                                    $compile(element.contents())(scope);
                                });
                            }
                        };
                    }]);

 

posted @ 2025-11-22 09:08  小鱼记忆  阅读(2)  评论(0)    收藏  举报