CODEWITHSUNDEEP
javascriptangularjsng-bind-html
Cito
Cito

Reputation: 1709

Binding HTML attribute in angularjs

I have this code:

<span data-icon="{{table.addIcon || '&#xe603;'}}"></span>

That span creates an icon like this:

Plus icon

However, I want to give the developer using this directive, the possibility to define a new icon. It is working, however, the problem I have is that, supposing I have this:

$scope.table.addIcon = "&#xe070;"

Instead of creating the element 

<span data-icon="&#xe070;"></span>

it will create it 

<span data-icon="&amp;#xe070;"></span>

Which will fail to add the icon, so instead of seeing this:

What I should have...

What I have is this:

What I do have :(

Is there a way to avoid angular to convert the & into &amp;?

Adding solution

Thanks to miensol the solution is this:

.directive("changeIcon", function() {
    var d = document.createElement("div");
    return {
        restrict: "A",
        link: function($scope, $ele, $attrs) {
            log($attrs);
            var originalIcon;
            $scope.decodedIcon = $attrs.icon;
            do {
                originalIcon = $scope.decodedIcon;
                d.innerHTML = originalIcon;
                $scope.decodedIcon = d.firstChild.nodeValue;
            } while (originalIcon != $scope.decodedIcon);
            $attrs.$set('data-icon', $scope.decodedIcon);
        }
    }
})

And it is used like this:

<span change-icon icon="{{table.addIcon || '&#xe603;'}}"></span>

Upvotes: 3

Views: 1741

Answers (1)

miensol
miensol

Reputation: 41598

I've created a sample jsfiddle to try out the problem you described but I probably am missing something.

I suspect you're seeing &amp; instead of & because view is html encoded on server.

Either way it's fairly easy to decode html entities in javascript. Consider following example:

m.directive('icon', function(){
    var div = document.createElement('div');

    return {
        scope: {
            icon:'='
        },
        link: function($scope,$element,$attrs){            
            var originalIcon;
            $scope.decodedIcon = $scope.icon;
            do {
                originalIcon = $scope.decodedIcon;
                div.innerHTML = originalIcon;
                $scope.decodedIcon = div.firstChild.nodeValue;
            } while (originalIcon != $scope.decodedIcon); 
            console.log('data-icon', $scope.decodedIcon);
            $attrs.$set('data-icon', $scope.decodedIcon);
        }
    };
});

You can play around with it here hope it helps solve your problem.

Upvotes: 1

Related Questions