How to insert a new line inside a directive template in angular.js?
Hi I know this is a simple question, how can you insert a newline into a directive template? I have a long template. and I find it difficult to scan horizontally. I want to have it on a new line. However angular doesn't want to.
app.directive('broadcasted', function(){
return{
restrict: 'EAC',
// NEW LINE THE TEMPLATE NOT JUST IN A SINGLE LINE
template: '<div class="alert alert-success col-md-6" ng-repeat="x in bcards"><strong class="broadcast-text" ><% x.q_number %> - <% x.teller_id %></strong></div>',
link: function($scope){
}
};
});
+3
source to share
4 answers
How about this:
app.directive('broadcasted', function(){
return{
restrict: 'EAC',
// NEW LINE THE TEMPLATE NOT JUST IN A SINGLE LINE
template: '<div class="alert alert-success col-md-6" ng-repeat="x in bcards">' +
'<strong class="broadcast-text" >' +
'<% x.q_number %> - <% x.teller_id %></strong></div>',
link: function($scope){
}
};
There is also another way described here: Creating multi-line strings in JavaScript
+3
source to share
The best way to do this is to put the template in a separate HTML file and use templateUrl
app.directive('broadcasted', function(){
return{
restrict: 'EAC',
// NEW LINE THE TEMPLATE NOT JUST IN A SINGLE LINE
templateUrl: 'mytempalte.html',
link: function($scope){
}
};
mytemplate.html
<div class="alert alert-success col-md-6" ng-repeat="x in bcards">
<strong class="broadcast-text" >
<% x.q_number %> - <% x.teller_id %>
</strong>
</div>
+3
source to share
I believe you can use the escape character \
app.directive('broadcasted', function(){
return{
restrict: 'EAC',
template: '<div class="alert alert-success col-md-6" ng-repeat="x in bcards"> \
<strong class="broadcast-text" ><% x.q_number %> - <% x.teller_id %></strong> \
</div>',
link: function($scope){
}
};
+1
source to share
Why not combine with a sign +
:
app.directive('broadcasted', function(){
return{
restrict: 'EAC',
// NEW LINE THE TEMPLATE NOT JUST IN A SINGLE LINE
template: '<div class="alert alert-success col-md-6" ng-repeat="x in bcards">' +
'<strong class="broadcast-text" ><% x.q_number %> - <% x.teller_id %></strong>' +
'</div>',
link: function($scope){
}
};
0
source to share