AngularJS $compile not working correctly

Question

I can't get $compile to work correctly inside my directive. I am trying to insert html to element with ng-bind directive inside. I am passing variable from selector service to ng-bind.

Binding does not work when I display my html. Instead I get empty element. Html after compiling looks like this :

<div class = "song_info ng-binding ng-scope" data-ng-bind = "year"></div>

this is the directive that i am using :

.directive("sortableQueue", ["$compile", "selector", function($compile, selector){
    return{
        scope : {},
        link : function(scope, element){
            element.sortable({
                stop : function(event, ui){

                    //get helper html
                    var song_element = $(ui.item);

                    //logs correct value
                    console.log(selector.getValue());

                    var html = "<div class = 'song_info' data-ng-bind = '" + selector.getValue() + "'></div>";

                    var content = $compile(html)(scope);

                    song_element.html(content);
                }
            });
        }
    };
}])

Does someone know what mistake am I making here? Any help is appreciated.

Drag13 · Accepted Answer · 2016-06-23 12:20:18Z

1

All works fine.

Answer is here:

data-ng-bind = "year"

Angular tries to find year variable. Of course it cant find it and display nothing. You have to create variable in your scope, from where it will take data.

answered Jun 23, 2016 at 12:20

Drag13

6,0281 gold badge22 silver badges44 bronze badges

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

Comments

Silvinus · Accepted Answer · 2016-06-23 12:20:40Z

0

You use an isolated scope, I suppose your variable year is defined in parent scope. Try to replace :

scope : {},

by

scope: true,

answered Jun 23, 2016 at 12:20

Silvinus

1,4459 silver badges16 bronze badges

1 Comment

Palo Over a year ago

there is no variable year. year is value of variable that is stored in service selector. I am trying to bind variable from that service to html. I should not need any other scope in this directive.

Collectives™ on Stack Overflow

AngularJS $compile not working correctly

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related