角模板指令不能正常工作

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