角模板指令不能正常工作

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加载。但是，如果你真的需要使用原始模板，以实现它，那么你可以使用单引号，而不是双的，所以你不必逃避模板字符串中的双引号，所以某事像那：

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

您也可以尝试做某事喜欢：

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

，我认为它应该工作，并会readabilty增加一点。

您还可以添加模板缓存，例如角度ui boostrap在包含带模板的单个js文件tpls.js时执行此操作。 这是某事像这样：

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文件在您的角度应用程序运行模板脚本NG-模板，你把

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

然后，通作为templateUrl您在脚本标记中放置为id的字符串

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

其中一种方法应该可以解决您的问题。但我仍然建议从文件中加载指令模板。

Answer 2

Angular不会期望您模板中的所有已转义的空白字符。试试这个封装在单引号中的版本，已经删除了\r\n\t，并且没有反斜杠：

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>' 
    })