javascript - Angular 指令模板抛出错误

Question

我在 Angular Directive(指令)模板方面遇到一些问题。

'use strict';

 function HomeDirective() {
  return {
    controller: 'homeController',
    template: require('./views/home.html'),

    restrict: 'AEC',
    scope: true
  }
}

module.exports = HomeDirective;

我的 View 文件夹中有一个模板。我的 View 是

<div>
<p>This is Home Page.You can nevigate to any page</p>
<p>The Content is {{test}}</p>
</div>

错误如下

<div>                                                                           
  ^                                                                               
ParseError: Unexpected token                                                        
at wrapWithPluginError (C:\Users\DAT-Asset-110\Desktop\Test 
Code\anguler_test_structure\node_modules\gulp-browserify\index.js:44:10) 

当我使用时它正在工作

'use strict';

 function HomeDirective() {
    return {
    controller: 'homeController',

   template: '<div><p>This is Home Page.You can nevigate to any page</p>
   <p>The Content is {{test}}</p></div>',
    restrict: 'AEC',
    scope: true
  }
 }

 module.exports = HomeDirective;

任何人都可以帮助我。问题是什么以及解决方案是什么？

Answer 1

使用 templateUrl 而不是模板:templateUrl: 'views/home.html'

'use strict';

 function HomeDirective() {
  return {
    controller: 'homeController',
    templateUrl: 'views/home.html',

    restrict: 'AEC',
    scope: true
  }
}

module.exports = HomeDirective;