【发布时间】：2015-10-08 03:00:25
【问题描述】：
我在 Angular 中创建了我的第一个指令，该指令在我使用 Yeoman 自动生成的 mean.js 0.4-dev 堆栈垂直项目文件结构上运行。
当我使用 'template:' 属性时，该指令正确编译，但是当我尝试将内容移动到模板文件并使用 'templateUrl:' 属性时，它会加载未编译的 'layout.server.view.html ' 文件而不是我的 'contact-form.client.template.html' 文件。无论我将路径设置为什么，它似乎都找不到我的模板文件（我尝试了树上的所有路径）。
谁能看到我做错了什么。也许有人可以解释角度如何解析相对路径。
我的程序结构是这样的...我使用生成器均值的 0.4-dev 为联系表单生成了一个模块。该模块包含我的指令。我的文件结构是这样的：
/app
/config
/modules
/contact-forms
/client
/config
/controllers
contact-forms.client.controller.js
/views
contact-form.client.template.html <- 2. should load this
contact-forms.client.module.js
/core
/client
/views
home.client.view.html <- 1. <contact-form> directive here
/server
/controllers
/routes
/views
layout.server.view.html <- 3. instead loads this
/node_modules
/public
/uploads
我的指令代码是这样的：
contactForms.directive('contactForm',[function(){
return {
restrict: 'E',
transclude: 'true',
//template: '<div>hello world!</div>', <--this works
templateUrl: 'modules/contact-forms/client/views/contact-form.client.template.html'
};
}]);
而我的模板文件是这样的：
<div>
<form class="row col-md-6 col-md-offset-3 text-left">
<div class="form-group col-md-12">
<label for="Name">Name</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" class="form-control" id="inputEmail">
</div>
<div class="form-group col-xs-12">
<label for="emailSubject">Subject</label>
<input type="text" class="form-control" id="inputSubject">
</div>
<div class="form-group col-xs-12">
<label for="emailMessage">Message</label>
<input type="text" class="form-control" id="inputMessage">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
我看过一些关于此类问题的帖子，但似乎没有一个与我的用例相符。我正在运行本地快递服务器，所以我认为这篇文章不是问题 (Couldn't load template using templateUrl in Angularjs)。
这篇文章谈到 templateUrl 拼写错误，但我认为我的是正确的 (Angular directive templateURL not being loaded. Why?)
我从 angular github (https://github.com/angular/angular.js/issues/10965) 上的这篇文章了解到，angular.js 的默认行为是在找不到模板的情况下加载索引文件。 2 月 4 日的评论表明这是必须的。我的浏览器控制台没有错误，所以我不确定发生了什么。
我的 node.js 路由没有从 mean.js 堆栈的 Yeoman 安装中更改：
module.exports = function(app) {
// Root routing
var core = require('../controllers/core.server.controller');
// Define error pages
app.route('/server-error').get(core.renderServerError);
app.route('/not-found').get(core.renderNotFound);
// Define application route
app.route('/*').get(core.renderIndex);
};
和：
'use strict';
/**
* Render the main application page
*/
exports.renderIndex = function(req, res) {
res.render('modules/core/server/views/index', {
user: req.user || null
});
};
/**
* Render the server error page
*/
exports.renderServerError = function(req, res) {
res.status(500).render('modules/core/server/views/500', {
error: 'Oops! Something went wrong...'
});
};
/**
* Render the server not found page
*/
exports.renderNotFound = function(req, res) {
res.status(404).render('modules/core/server/views/404', {
url: req.originalUrl
});
};
我需要为模板添加路由吗？
【问题讨论】：
-
不确定您的快速路由是如何设置的......这确实是您需要寻找的地方。请注意，尽管您有拼写错误
modules与module -
谢谢，我更新了帖子
-
我正在使用由 yeoman 安装的默认 mean.js 路由。我在上面添加了一个关于它的注释。
-
在chrome的开发者工具中，在network选项卡中可以看到具体加载了哪些模板，也可能只是命名空间错误
标签： angularjs directive meanjs