угловая директива шаблон не работает

Question

у меня есть этот маршрут в угловом

 when('/customers', { 
     //templateUrl: 'customers.html' 
     controller: 'ListController' 
     , template: "<h1>{{customers}}</h1>" 
    }) 

это работает и отображает properly.i решили пойти немного больше

when('/customers', { 
     //templateUrl: 'customers.html' 
     controller: 'ListController' 
     , template: "<div class=\"navigation-section\" id=\"customers\">\r\n <div class=\"section\">\r\n  <div class=\"text-input-container card\"> <i class=\"icon-search text-input-icon\"><\/i>\r\n   <input type=\"text\" class=\"text-input \" placeholder=\"Search\" ng-model=\"query1\" \/> <\/div>\r\n  <div> <\/div>\r\n <\/div>\r\n <div class=\"section\">\r\n  <ul class=\"list\">\r\n   <li ng-repeat=\"customer in customers | filter:query1 | orderBy:[\'customer.information.name\',\'customer.information.phone\']\" ripple>\r\n    <a href=\"#\/customer\/{{customers.indexOf(customer)}}\"><\/a>\r\n    <button class=\"icon-button\"><i class=\"icon-account-circle\"><\/i><\/button> <span class=\"item-text\">\r\n\t\t\t{{customer.information.name}}\r\n\t\t\t<span class=\"secondary-text\">\r\n\t\t\t\t{{customer.information.phone}}\r\n\t\t\t<\/span> <\/span> <i class=\"icon-message item-action\"><\/i> <\/li>\r\n  <\/ul>\r\n <\/div>\r\n<\/div>" 
    }) 

это не работает, почему?

Answer 1

Лучше поместить шаблон в файл и загрузить с помощью templateUrl. Однако, если вы действительно, действительно необходимо реализовать его с сырым шаблоном, то вы можете использовать одинарные кавычки вместо двойных единиц, так что вам не придется бежать двойные кавычки внутри строки шаблона, так STH так:

... 
template: '<div class="navigate-section"></div>', 
... 

Вы также можете попробовать и сделать STH нравится:

... 
template: [ 
    '<div class="navigate-section">', 
    '<span>Text</span>', 
    '</div>' 
].join('') 
... 

Я думаю, что он должен работать и будет readabilty увеличить немного.

Вы также можете добавить шаблоны в кеш, например, угловой ui boostrap делает это, когда вы включаете один файл js с шаблонами, tpls.js one. Это STH так:

angular.module('my/template/name.html', []) 
    .run(['$templateCache', function($templateCache) { 
    $templateCache.put(
     'my/template/name.html', '<div class="my-class"><span>Text</span></div>' 
    ); 
}]); 

Вы можете также включить в основной файл HTML, где ваш Угловая приложение работает шаблон, как сценарий с нг-шаблон, чтобы вы положили

<script type="text/ng-template" id="/template.html"> 
     <p> 
     My template 
     </p> 
    </script> 

, а затем, проход как templateUrl строка, которую вы положили как идентификатор в теге скрипта

... 
templateUrl: '/template.html', 
... 

Один из этих методов должен решить вашу проблему. Но все же я бы рекомендовал загружать шаблоны для директив из файлов.

Answer 2

Угловой не ожидает, что в вашем шаблоне будут сохранены пробельные символы пробела. Попробуйте эту версию, которая инкапсулированный в одинарные кавычки, имеет \r\n\t «s удалены, и не избежать обратной косой черты:

when('/customers', { 
     //templateUrl: 'customers.html' 
     controller: 'ListController', 
     template: '<div class="navigation-section" id="customers"><div class="section"><div class="text-input-container card"> <i class="icon-search text-input-icon"></i><input type="text" class="text-input" placeholder="Search" ng-model="query1" /> </div><div> </div></div><div class="section"><ul class="list"><li ng-repeat="customer in customers | filter:query1 | orderBy:[\'customer.information.name\',\'customer.information.phone\']" ripple><a href="#/customer/{{customers.indexOf(customer)}}"></a><button class="icon-button"><i class="icon-account-circle"></i></button> <span class="item-text">{{customer.information.name}}<span class="secondary-text">{{customer.information.phone}}</span> </span> <i class="icon-message item-action"></i></li></ul></div></div>' 
    })