角度模板指令不起作用

angular template directive not working

本文关键字：指令 不起作用      更新时间：2023-09-26

我在角度中有这条路线

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

这是有效的，它显示正确。我决定去一个更大的

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

这不管用，为什么？

最好将模板放在文件中，并使用templateUrl加载。然而，如果你真的，真的需要用原始模板来实现它，那么你可以使用单引号而不是双引号，这样你就不必在模板字符串中转义双引号，所以类似的东西：

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

你也可以尝试做一些类似的事情：

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

我认为它应该起作用，并且会增加一点可读性。

您还可以将模板添加到缓存中，例如angular 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文件中包括你的angular应用程序以ng模板的脚本运行模板，这样你就可以放置

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

然后，将您作为id放入脚本标记中的字符串作为templateUrl传递

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

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

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>'
    })
相关文章：