好的。我用谷歌搜索了这样做的可能性,但没有任何运气。
这是我的场景:
我正在尝试为等待解决 promise 的任何值显示一个微调器,但我想使用过滤器来实现此目的而不使用 ng-bind-html
指令,因为大多数我的绑定(bind)已经使用大括号表达式语法完成:{{myvalue}}
。我只想在需要这种行为的地方添加一个过滤器。像这样:{{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。 谢谢
最佳答案
因此,这项研究向我证明,您必须绝对使用 ng-bind-html
指令在 Angular 中输出 html。我真的很想只使用一个过滤器来解决问题,只需在等待 promise 解决的同时将 html 内容分配给 Controller 变量,但基于 @ErikLundgren 的建议,我决定使用带有伪元素的 ng-class 来实现它。
这就是我的解决方案的结果......
Controller :
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>
关于javascript - 从没有ng-bind-html的angularjs过滤器输出HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31854704/