CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-filterng-bind-html
kennasoft
kennasoft

Reputation: 1593

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

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

Upvotes: 3

Views: 2077

Answers (1)

kennasoft
kennasoft

Reputation: 1593

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>

Upvotes: 1

Related Questions