Palo Palo - 1 year ago 155
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download