[英]Output HTML from angularjs filter without ng-bind-html?
Ok. 好。 I've googled the possibility of doing this without any luck.
我已经用Google搜索了没有运气的可能性。
Here's my scenario: 这是我的情景:
I'm trying to show a spinner for any value waiting on a promise to resolve, but I want to use a filter to achieve this without using the ng-bind-html
directive, since most of my binding is already done using the curly braces expression syntax: {{myvalue}}
. 我正在尝试显示一个微调器,等待任何值等待解析的承诺,但是我想使用过滤器来实现这一点而不使用
ng-bind-html
指令,因为我的大多数绑定都是使用花括号完成的表达式语法: {{myvalue}}
。 I just want to add a filter wherever I need this behaviour. 我只想在需要此行为的地方添加过滤器。 Like this:
{{myvalue | waiting}}
像这样:
{{myvalue | waiting}}
{{myvalue | waiting}}
, so that it can be replaced whenever the promise for myvalue
resolves. {{myvalue | waiting}}
,以便每当myvalue
的promise解析时都可以替换它。
I've searched and found that you cannot output html without the ng-bing-html
directive. 我搜索过,发现没有
ng-bing-html
指令就无法输出html。 But I'm just checking to see if there's anyone who knows a better way to implement this, and just place the waiting
marker as an attribute/filter/css class
wherever i need this behaviour. 但我只是在检查是否有人知道更好的方法来实现它,只需将
waiting
标记作为attribute/filter/css class
放在我需要此行为的任何地方。
Filter code: 过滤代码:
app.filter('waiting', function(){
return function(value){
return '<img src="loading.png"/>';
}
});
Sample HTML: 示例HTML:
<div ng-controller='ControllerThatHoldsPromise'> <!-- :) -->
<span>{{myvalue | waiting}}</span>
</div>
Summarily, my objective is to output html without ng-bind-html. 总而言之,我的目标是输出没有ng-bind-html的html。 Thanks
谢谢
So, this research has proven to me that you must absolutely use the ng-bind-html
directive to output html in Angular. 因此,这项研究向我证明,你必须绝对使用
ng-bind-html
指令在Angular中输出html。 I really wanted to use just a filter to solve the problem, by just assigning the html content to the controller variable while waiting for the promise to resolve, But based on suggestion from @ErikLundgren , I decided to use ng-class with a pseudo element to achieve it. 我真的只想使用一个过滤器来解决问题,只需在等待承诺解析时将html内容分配给控制器变量,但根据@ErikLundgren的建议,我决定使用带有伪元素的ng-class实现它。
This is how my solution worked out... 这就是我的解决方案的成果......
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: 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;
}
Markup: 标记:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.