在没有 ng-bind-html 的情况下从 angularjs 过滤器输出 HTML？

Question

好的。我用谷歌搜索了这样做的可能性，但没有任何运气。

这是我的场景：

我正在尝试为等待解决承诺的任何值显示一个微调器，但我想使用过滤器来实现此目的而不使用 ng-bind-html 指令，因为我的大部分绑定已经使用大括号表达式语法完成：{{myvalue}}。我只想在需要这种行为的地方添加一个过滤器。像这样：{{myvalue | waiting}}，这样它就可以在 myvalue 的承诺解决时被替换。

我搜索了一下，发现没有 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>

综上所述，我的objective是在没有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>

在没有 ng-bind-html 的情况下从 angularjs 过滤器输出 HTML？

Output HTML from angularjs filter without ng-bind-html?

html

javascript

angularjs

angularjs-filter

ng-bind-html