角度指令中模板的路径？答案

【问题标题】：Path for templates in angular directive?角度指令中模板的路径？
【发布时间】：2016-09-04 17:10:17
【问题描述】：

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

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

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

WARNING: Tried to load angular more than once

页面也陷入循环，重复地将 index.html 添加到页面。如果您从导航栏中转到我使用该指令的公司或工作选项卡，您可以看到应用程序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"
      }
    ]
  }
}

【问题讨论】：

该模板是否包含 ng-app 指令？如果您已经在主模板中添加了 ng-app，则可能会出现该消息，然后尝试加载另一个包含 ng-app 的模板。
不，ng-app 只在 index.html 文件中。
取决于您的服务器配置，但如果 '/' 在您的根目录中引用 index.html，那么我想正确的路径是 '/templates/searchbox-template.html'
我试过了，不行。
'/' 是否映射到视图 main.html？如果是这样，听起来您的服务器仅在views 目录下静态提供文件，并且不允许访问templates 目录。要对其进行测试，请尝试从templates 获取模板并将其放在views 下，然后相应地更改templateUrl。

标签： javascript angularjs angularjs-directive

【解决方案1】：

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

正如您所提到的，Angular 无法访问/找到该目录，因此它默认使用 otherwise 函数，加载 main.html 会一次又一次地无限重启问题。

编辑：

如果其他人有这个问题，dist 目录是生产版本，并使用 $templateCache 从单个文件中提供视图，但在视图合并到一个文件的步骤中，@987654330 @ 目录没有被考虑在内，因此无法找到。因此，在您的 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'
      }
    },

【讨论】：

【解决方案2】：

不要重定向到索引页面。因为您的应用在 index.html 上运行
因此，每当您重定向到索引页面时，应用程序都会重新启动。
取而代之的是使用另一个带有空白 url 的页面并重定向到它。
Like:-
创建一个带有空白 url 的 main.js 或 home.js js，例如 '/'。
因此，无论何时您将重定向到“/”，您的应用都不会一次又一次地启动。你不会得到任何这样的警告。

【讨论】：