如何在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中的指令模板中插入新行？

回答

相關問題