從angularjs過濾器輸出HTML而不使用ng-bind-html？

Question

好。 我已經用Google搜索了沒有運氣的可能性。

這是我的情景：

我正在嘗試顯示一個微調器，等待任何值等待解析的承諾，但是我想使用過濾器來實現這一點而不使用ng-bind-html指令，因為我的大多數綁定都是使用花括號完成的表達式語法： {{myvalue}} 。 我只想在需要此行為的地方添加過濾器。 像這樣： {{myvalue | waiting}} {{myvalue | waiting}} ，以便每當myvalue的promise解析時都可以替換它。

我搜索過，發現沒有ng-bing-html指令就無法輸出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>

總而言之，我的目標是輸出沒有ng-bind-html的html。 謝謝

Answer 1

因此，這項研究向我證明，你必須絕對使用ng-bind-html指令在Angular中輸出html。 我真的只想使用一個過濾器來解決問題，只需在等待承諾解析時將html內容分配給控制器變量，但根據@ErikLundgren的建議，我決定使用帶有偽元素的ng-class實現它。

這就是我的解決方案的成果......

控制器：

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>