How to insert a new line inside a directive template in angular.js?

Question

Hi I know this is an easy question how can you insert a new line in a directive template? I have a long template. and it is hard for me to scan through horizontally. I want to have it in a new line. However angular doesn't want.

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){
    }
};
});

why not to load a template file if you want it to be readable — binariedMe, Jul 02 '15 at 07:03

score 3 · Accepted Answer · edited May 23 '17 at 12:19

3

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's also another way described here: Creating multiline strings in JavaScript

edited May 23 '17 at 12:19

Community

1
1

answered Jul 02 '15 at 07:01

pablochan

5,625
27
42

Thabks!! That is exactly what I needed – drake24 Jul 02 '15 at 08:02

score 3 · Answer 2 · answered Jul 02 '15 at 07:05

3

The best way to do it is to put template in seperate 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>

answered Jul 02 '15 at 07:05

squiroid

13,809
6
47
67

+1 while this is not exactly what the question asked, this approach is cleaner than concatenating strings in JS source code. – Igor Raush Jul 02 '15 at 07:17
@igorraush thanks :) . IT's better to guide the OP in right direction. I know i can give answer in terms of string concat with '+' but it will not run for long if template is very long it's better to keep it in seperate HTML :) – squiroid Jul 02 '15 at 07:37

score 1 · Answer 3 · answered Jul 02 '15 at 07:27

I believe you can use 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){
  }
};

score 0 · Answer 4 · answered Jul 02 '15 at 07:02

Why to not concatenate with the + 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){
    }
};

How to insert a new line inside a directive template in angular.js?

4 Answers4