Вывод HTML из фильтра angularjs без ng-bind-html?

Хорошо. Я погуглил возможность сделать это без какой-либо удачи.

Вот мой сценарий:

Я пытаюсь показать счетчик для любого значения, ожидающего разрешения обещания, но я хочу использовать фильтр для достижения этого без использования Директивы ng-bind-html, так как большая часть моей привязки уже выполнена с использованием синтаксиса выражения фигурных скобок: {{myvalue}}. Я просто хочу добавить фильтр везде, где мне нужно это поведение. Вот так: {{myvalue | waiting}}, чтобы его можно было заменить всякий раз, когда обещание для myvalue разрешает.

Я искал и обнаружил, что вы не можете вывести html без директивы ng-bing-html. Но я просто проверяю, есть ли кто-нибудь, кто знает лучший способ реализовать это, и просто помещаю маркер waiting Как attribute/filter/css class везде, где мне нужно это поведение.

Код фильтра: 

app.filter('waiting', function(){
    return function(value){
        return '<img src="loading.png"/>';
    }
});

Пример HTML: 

<div ng-controller='ControllerThatHoldsPromise'> <!-- :) -->
    <span>{{myvalue | waiting}}</span>
</div>
В общем, моя цель-вывести html без ng-bind-html. Спасибо
1 3
javascript angularjs html angularjs-filter

1 ответ:

Итак, это исследование доказало мне, что вы должны абсолютно использовать директиву ng-bind-html для вывода html в Angular. Я действительно хотел использовать только фильтр для решения проблемы, просто назначив html-содержимое переменной контроллера, ожидая, пока обещание разрешится, но, основываясь на предложении @ErikLundgren , я решил использовать ng-класс с псевдо-элементом для его достижения.

Вот как работало мое решение из...

Контроллер: 

var app = angular.module('MyApp.controllers', ['ngSanitize']);
app.controller('SnazzyController', ['$scope','$timeout', function($scope,$timeout){

    $scope.new_orders = 0;
    $scope.dataPending = true;

    //simulate a delayed response
    $timeout(
        function(){
                $scope.new_orders = 20;
            }
            $scope.dataPending = false;
        }, 4000);
}]);

CSS: 

.result-pending{
    position: relative;
}

.result-pending::before{
    content: "";
    position: absolute;
    z-index: 9999;
    height: 100%;
    width: 100%;
    min-height: 64px;
    min-width: 64px;
    background: #FFF url("/images/lazyLoader2.gif") center no-repeat;
    background-size: contain;
    left: 0;
    top: 0;
}

Разметка: 

<div class="panel panel-primary">
    <div class="panel-heading">Waiting Demo</div>
    <div class="panel-body">
        <div class="data" ng-class="{'result-pending': dataPending}">
            {{new_orders | number:0}}
        </div>
        <div class="title">
            NEW ORDERS
        </div>
    </div>
</div>
1