Question

我创建了一个Angular指令，允许我指定一个bootstrap断点和新的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>

Answer 1

我最后只是将原始文本作为指令绑定传递，它似乎有效。

指令：

;(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>

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

1 个答案: