javascript - Angular Directive(指令)中模板的路径？

Question

我为我的 Angular 应用程序创建了一个指令，在指令中我使用 templateUrl 来获取模板。

templateUrl: 'templates/searchbox-template.html',

这在我的本地服务器上运行良好，但当我将其托管在 firebase 上时，它反复发出此警告-

WARNING: Tried to load angular more than once

页面也陷入了循环，重复向页面添加 index.html。可以看到app here ，如果你从我使用指令的导航栏转到公司或工作选项卡。我无法弄清楚我应该使用什么路径来阻止它。这是应用程序的结构 -

.
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   ├── styles
│   ├── templates
│   └── views
├── bower_components
│   ├── angular
│   ├── angular-mocks
│   ├── angular-route
│   ├── animate.css
│   ├── bootstrap
│   ├── jquery
│   └── jssocials
├── bower.json
├── dist
│   ├── 404.html
│   ├── favicon.ico
│   ├── fonts
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   └── styles
├── firebase.json


.
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   ├── controllers
│   │   ├── directives
│   │   └── services
│   ├── styles
│   │   └── main.css
│   ├── templates
│   │   └── searchbox-template.html
│   └── views
│       ├── about.html
│       ├── companiesall.html
│       ├── company.html
│       ├── contact.html
│       ├── jobsall.html
│       └── main.html

如您所见，我的模板位于模板文件夹中。请帮我解决一下这个。谢谢。

更新 -据此answer ，该指令无法找到模板，因此一次又一次地加载 index.html -

.otherwise({
        redirectTo: '/'
      });

我只需要找出模板的正确路径。

这是 firebase.json json 文件的内容 -

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Answer 1

'/' 是否映射到 View main.html？如果是这样，听起来您的服务器只在 views 目录下静态提供文件，并且不允许访问 templates 目录。要对其进行测试，请尝试从模板中获取模板并将其放在 View 下，然后相应地更改 templateUrl。

正如您提到的，Angular 无法访问/找到目录，因此它默认使用 otherwise 函数，加载 main.html 再次重新启动问题无限循环。

编辑:

如果其他人遇到这个问题，dist 目录是生产版本并使用 $templateCache 从单个文件提供 View ，但在步骤中其中 View 合并到一个文件中 templates 目录未被考虑在内，因此无法找到。因此，在您的 Gruntfile.js 中，将模板的 src 更改为包含其他文件夹，如下所示:

ngtemplates: {
      dist: {
        options: {
          module: 'jobSeekerApp',
          htmlmin: '<%= htmlmin.dist.options %>',
          usemin: 'scripts/scripts.js'
        },
        cwd: '<%= yeoman.app %>',
        src: ['views/{,*/}*.html', 'templates/{,*/}*.html'],
        dest: '.tmp/templateCache.js'
      }
    },