Binding HTML attribute in angularjs

Question

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 &?

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>

Community · Accepted Answer · 2017-05-23 11:49:33Z

1

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

I suspect you're seeing & 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.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Aug 28, 2014 at 22:13

miensol

41.9k9 gold badges127 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cito Over a year ago

Thanks a lot for your info. Actually, if you inspect the first jsfiddle, you will see it is encoded, but the second one does exactly what I need. I'll try it. Thanks!

Collectives™ on Stack Overflow

Binding HTML attribute in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related