Question

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

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

Answer 1

这个怎么样：

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

此处还介绍了另一种方式：Creating multiline strings in JavaScript

Answer 2

最好的方法是将模板放在单独的HTML文件中并使用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>

Answer 3

我相信你可以使用转义字符\

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

Answer 4

为什么不与+符号连接：

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

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

4 个答案: