What easy way to insert html item to exists template HTML in angularjs? For example there is template generated in PHP:
<div id="block">
<!-- Insert here template from Angularjs-->
<div class="item"></div>
<div class="item"></div>
</div>
I can Use Jquery like as:
$('#block').prepend('<div class="item"></div>');
How I can same in Angularjs?
You can use jquery to add HTML but you'll need to compile it first using
var compiledHTML = $compile(html)($scope);
and then pass it on to jquery's method
$('#block').prepend(compiledHTML);
But as @cerad mentioned definitely this is not the best way.
You should use angular's data binding, you can also treat is as a template engine.
eg:
your html code is this
<ul>
<li ng-repeat="msg in allMsgs">{{msg}}</li>
</ul>
your controller code is this
app.controller($scope){
$scope.allMsgs = [];
// i dont know socket.io well, so this part may not work :)
// and it's better to separate it to a service and use $rootScope.$apply()
soceket.on('msg',function(msg){
$scope.$apply(function(){
$scope.allMsgs.push(msg);
});
});
}
Note you need to use $apply in order to make the data binding work when data is
changed by events that angular doesn't control.
Some useful links
div