Palo Palo - 5 months ago 53
AngularJS Question

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.

Answer

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.