CODEWITHSUNDEEP
javascriptjqueryangularjs
Palo
Palo

Reputation: 372

AngularJS $compile not working correctly

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.

Upvotes: 0

Views: 525

Answers (2)

Silvinus
Silvinus

Reputation: 1445

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

scope : {},

by

scope: true,

Upvotes: 0

Drag13
Drag13

Reputation: 5988

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.

Upvotes: 1

Related Questions