current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite

Ok. I've googled the possibility of doing this without any luck.

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}}. I just want to add a filter wherever I need this behaviour. Like this: {{myvalue | waiting}}, so that it can be replaced whenever the promise for myvalue resolves.

I've searched and found that you cannot output html without the ng-bing-html directive. 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.

Filter code:

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

Sample HTML:

<div ng-controller='ControllerThatHoldsPromise'> <!-- :) -->
    <span>{{myvalue | waiting}}</span>
</div>

Summarily, my objective is to output html without ng-bind-html. Thanks

share|improve this question
1  
You could use a css class and use ::before or ::after to achieve this effect, but it will just require ng-class instead. – Erik Lundgren Aug 6 at 11:38
    
If you want to output html... you need to use ng-bind-html. – Mathew Berg Aug 6 at 11:39
    
Thanks @ErikLundgren. I'll just have to go the ng-class way, as my non-intrusive approach will definitely not work. – kennasoft Aug 6 at 14:52

1 Answer 1

up vote 0 down vote accepted

So, this research has proven to me that you must absolutely use the ng-bind-html directive to output html in Angular. 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.

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:

.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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.