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

嗨，我知道这是一个简单的问题，你怎么能在指令模板中插入一个新行？我有一个很长的模板。而且我很难水平扫描。我想要一个新的线。但角度不想要。如何在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){ 
    } 
}; 
});

来源

2015-07-02 drake24

您是否尝试过使用
？ –

为什么不加载模板文件，如果你想让它可读 – binariedMe

如何：

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

来源

2015-07-02 07:01:33 pablochan

Thabks !!这正是我需要的 – drake24

为什么不与+符号拼接：

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

来源

2015-07-02 07:02:17

以最好的方式这是将模板放在单独的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>

来源

2015-07-02 07:05:03 squiroid

+ 1，而这并不是问题所在，这种方法比在JS源代码中串联字符串更简洁。 –

@igorraush谢谢:)。 IT更好地指导OP在正确的方向。我知道我可以用'+'来给出字符串连接的答案，但如果模板非常长，它不会运行很久，最好将它保存在单独的HTML中:) – squiroid

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

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

来源

2015-07-02 07:27:15 geckob

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

回答

相关问题