AngularJS指令在断点处替换html，不会重置为原始元素

AngularJS directive replaces html at breakpoint, won't reset to original element

本文关键字：元素 原始 指令 断点 html 替换 AngularJS      更新时间：2023-09-26

我创建了一个Angular指令，允许我指定一个引导断点，并在该断点处切换到新的html。我使用一个resize函数来检查是否在调整窗口大小时切换出文本。当我从原始html开始，并调整到断点时，该指令可以工作。一旦html被交换，如果我在另一个方向调整大小，我不能让html切换回原来的元素html。

指令:

;(function(ng, undefined){
    'use strict';
    ng.module('common.directives')
        .directive('textSwap', textSwap);
    textSwap.$inject = ['$window', '$compile'];
    function textSwap($window, $compile) {
        return {
            restrict: "E",
            scope: {
                breakpoint: '=',
                newHtml: '='
            },
            transclue: true,
            link: function(scope, element, attrs, fn) {
                var originalElement = element;
                var keys = {
                    xs: 480,
                    sm: 768,
                    md: 992,
                    lg: 1200
                };
                checkAndReplaceContent();
                function checkAndReplaceContent() {
                    if ($window.innerWidth < keys[scope.breakpoint]) {
                        element.replaceWith($compile(scope.newHtml)(scope));
                    } else {
                        element.replaceWith(originalElement.context.innerHTML);
                    }
                }
                ng.element($window).on('resize', function() {
                    checkAndReplaceContent();
                });
            }
        };
    }
})(angular);
HTML: 

<button class="btn btn-info grid-option-button pull-right"
    id="rxsignal-filter-button"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Open advanced filter options"
    ng-click="searchFilter({})">
    <text-swap breakpoint="'sm'" new-html="'<i class=''fa fa-filter''></i>'">
        {{ btnText }}
    </text-swap>
</button>
<button class="btn btn-danger grid-option-button pull-right"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Clear advanced filter options"
    ng-class="{disable: model.empty}" ng-click="resetModel()">
    <text-swap breakpoint="'sm'" new-html="'<i class=''fa fa-times''></i>'">
        Clear Filter
    </text-swap>
</button>

我最终只是传递原始文本作为指令绑定，它似乎工作。

指令:

;(function(ng, undefined){
    'use strict';
    ng.module('common.directives')
        .directive('textSwap', textSwap);
    textSwap.$inject = ['$window', '$compile', '$debounce'];
    function textSwap($window, $compile, $debounce) {
        return {
            restrict: "E",
            scope: {
                breakpoint: '=',
                newHtml: '=',
                originalHtml: '='
            },
            transclue: true,
            template: '<span ng-bind-html="compiledHtml"></span>',
            link: function(scope, element, attrs, fn) {
                var keys = {
                    xs: 480,
                    sm: 768,
                    md: 992,
                    lg: 1200
                };
                checkAndReplaceContent();
                function checkAndReplaceContent() {
                    if ($window.innerWidth < keys[scope.breakpoint]) {
                        scope.compiledHtml = scope.newHtml;
                    } else {
                        scope.compiledHtml = scope.originalHtml;
                    }
                }
                ng.element($window).on('resize', function() {
                    $debounce(checkAndReplaceContent, 1000);
                });
            }
        };
    }
})(angular);
HTML 

<button class="btn btn-info grid-option-button pull-right"
    id="rxsignal-filter-button"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Open advanced filter options"
    ng-click="searchFilter({})">
    <text-swap breakpoint="'sm'" new-html="'<i class=''fa fa-filter''></i>'" original-html="btnText" />
</button>
<button class="btn btn-danger grid-option-button pull-right"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Clear advanced filter options"
    ng-class="{disable: model.empty}" ng-click="resetModel()">
    <text-swap breakpoint="'sm'" new-html="'<i class=''fa fa-times''></i>'" original-html="'Clear Filter'" />
</button>
相关文章：