Javascript AngularJS指令在断点处替换html，赢得'；t重置为原始元素

我创建了一个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);

；（功能（ng，未定义）{
"严格使用",；
ng.module（'common.directions'）
.指令（“文本交换”，文本交换）；
textSwap.$inject=['$window'，'$compile']；
函数textSwap（$window，$compile）{
返回{
限制：“E”，
范围：{
断点：'='，
新建HTML:“=”
},
是的，
链接：功能（范围、元素、属性、fn）{
var originalElement=元素；
变量键={
xs:480，
sm:768，
md:992，
lg:1200
};
检查和替换内容（）；
函数checkAndReplaceContent（）{
if（$window.innerWidth

HTML:

{{btnText}}
透明过滤器

我最终只是将原始文本作为指令绑定传递，它似乎起到了作用

指令：

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

；（功能（ng，未定义）{
"严格使用",；
ng.module（'common.directions'）
.指令（“文本交换”，文本交换）；
textSwap.$inject=['$window'，'$compile'，'$debounce']；
函数textSwap（$window、$compile、$debounce）{
返回{
限制：“E”，
范围：{
断点：'='，
新HTML:“=”，
原始HTML:“=”
},
是的，
模板：“”，
链接：功能（范围、元素、属性、fn）{
变量键={
xs:480，
sm:768，
md:992，
lg:1200
};
检查和替换内容（）；
函数checkAndReplaceContent（）{
if（$window.innerWidth

HTML

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

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