Angularjs 如何在angular.js中的指令模板中插入新行？

您好，我知道这是一个简单的问题，您如何在指令模板中插入新行？我有一个很长的模板。而且我很难横向扫描。我想换一种新的款式。但是我不想要

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

app.directive（'broadcasted'，function（）{
返回{
限制：“EAC”，
//新行模板不只是在一行中
模板：“-”，
链接：功能（$scope）{
}
};
});     

这个怎么样：

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

app.directive（'broadcasted'，function（）{
返回{
限制：“EAC”，
//新行模板不只是在一行中
模板：“”
“”+
“-”，
链接：功能（$scope）{
}
};

---

这里还介绍了另一种方法：

为什么不使用

+

符号连接：

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

app.directive（'broadcasted'，function（）{
返回{
限制：“EAC”，
//新行模板不只是在一行中
模板：“”
“-”+
'',
链接：功能（$scope）{
}
};

最好的方法是将模板放在单独的HTML文件中，并使用

模板URL

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>

- 

我相信您可以使用转义字符

\

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

app.directive（'broadcasted'，function（）{
返回{
限制：“EAC”，
模板：'\
-\
',
链接：功能（$scope）{
}
};

您是否尝试过使用
？如果希望模板文件可读+1，为什么不加载模板文件呢？虽然这并不是问题的关键所在，但这种方法比在JS源代码中串联字符串更简洁。@igorrush谢谢：）。最好将OP引导到正确的方向。我知道我可以用带“+”的字符串concat给出答案，但如果模板很长，它不会运行很长时间。最好将其保存在单独的HTML中：）Thabks！！这正是我需要的