Question

我有角度

的这条路线

Parcelable

这样可以正常显示。我决定要更大一点

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

这不起作用的原因？

Answer 1

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

Main.js

您也可以尝试做某事：

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

我认为它应该可行并且会增加一点读数。

您还可以将模板添加到缓存中，例如当您包含带有模板的单个js文件时，角度ui boostrap会执行此操作，tpls.js为1。它是这样的：

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

您还可以在主html文件中包含角度应用运行模板作为带有ng-template的脚本，以便您放置

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

然后，将作为id放在脚本标记

中的字符串作为templateUrl传递

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

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

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

角模板指令不起作用

2 个答案: