angularjs指令不起作用（node.js和angularjs newbee）
[英]angularjs directive don't work (node.js and angularjs newbee)
问题描述
i'm learning AngularJS and Node.js. 
我正在学习AngularJS和Node.js。 I'm trying to build a small website ("hello website"), but i have a problem with angularjs directive (i guess). 我正在尝试建立一个小型网站（“ hello网站”），但是我对angularjs指令有疑问（我猜）。 This is my project structure 这是我的项目结构
root 根
+ angularFiles + angularFiles
------ angularMenu.js ------ angularMenu.js
+ templates +模板
------ menu.html ------ menu.html
- index.html -index.html
- servidor.js -servidor.js
as you can see, nothing special... the code of files: 如您所见，没有什么特别的...文件代码：
servidor.js (web server)
var port=9000;
//importamos librerias etc...
var express= require('express');
var app=express();
app.use(express.static(__dirname+'/'));
//rutas para las peticiones
app.get('/',function(req,res)
{
res.sendFile(__dirname+'/index.html');
console.log("index");
});
app.listen(port);
console.log("servidor lanzado y escuchando en puerto "+port);
the web server works 网络服务器正常工作
index.html
<!DOCTYPE html>
<html lang='es'>
<head>
<title>Colonias canguesas</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--css bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<!--carga de scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js'></script>
<script src="angularFiles/angularMenu.js"></script>
<div id="Wrapper">
<div id="navegacion" ng-app="menuApp">
<menuTemplate></menuTemplate>
</div>
<div id="cuerpo">
</div>
</div>
</body>
</html>
it's a normal index 这是一个正常的指数
menu.html
<nav class='navbar navbar-default navbar-fixed-top'>
<section ng-init="tab=1" class='container'>
<ul class='nav nav-pills'>
<!--<li ng-repeat="tabs in items.menu" ng-class="{active:tab === $index}"><a href ng-click="tab = $index">{{tabs}}</a></li>-->
<li ng-class="{active:tab===1}"><a href ng-click="tab = 1">Información <i class="glyphicon glyphicon-info-sign"></i></a></li>
<li ng-class="{active:tab===2}"><a href ng-click="tab = 2">Fotos <i class='glyphicon glyphicon-picture'></i></a></li>
<li ng-class="{active:tab===3}"><a href ng-click="tab = 3">Listado de gatos <i class='glyphicon glyphicon-list-alt'></i></a></li>
<li ng-class="{active:tab===4}"><a href ng-click="tab = 4">Contáctanos <i class='glyphicon glyphicon-envelope'></i></a></li>
<li ng-class="{active:tab===5}"><a href ng-click="tab = 5">Puntos de recogida <i class='glyphicon glyphicon-map-marker'></i></a></li>
<li ng-class="{active:tab===6}"><a href ng-click="tab = 6">Entidades colaboradoras <i class='glyphicon glyphicon-gift'></i></a></li>
<li ng-class="{active:tab===7}"><a href ng-click="tab = 7">Mercadillo <i class='glyphicon glyphicon-euro'></i></a></li>
<li ng-class="{active:tab===8}"><a href ng-click="tab = 8">Log in <i class='glyphicon glyphicon-user'></i></a></li>
</ul>
it's the template i want use to navigate 这是我要用于导航的模板
angularMenu.js
var menuApp=angular.module("menuApp",[]);
menuApp.config(function($logProvider)
{
$logProvider.debugEnabled(true);
})
//directivas
.directive("menuTemplate",function()
{
return{
restrict:'E',
templateUrl:'templates/menu.html',
replace: true
};
});
the angular menu file. 角度菜单文件。
Everything seems ok but when i use the directive to insert my menu template, it doesn't work, i only have a white page. 一切似乎都很好，但是当我使用指令插入菜单模板时，它不起作用，我只有白页。 The server is working without problems... where is the error? 服务器正在正常运行...错误在哪里？ why my directive don't shows the menu template?. 为什么我的指令不显示菜单模板？
i've tryed a lot of things, changed routes of my templateUrl directive, etc...and didn't worked for me. 我已经尝试了很多事情，更改了我的templateUrl指令的路由，等等...但对我没有用。 I did a controller that worked correctly but not the directive. 我做了一个正常工作的控制器，但没有运行指令。
Thanks a lot for your time! 非常感谢您的宝贵时间！
1 个解决方案
解决方案1
1 已采纳 2015-07-05 08:45:55
You've got two small problems. 您有两个小问题。 The first is the one that's causing the main issue. 第一个是导致主要问题的原因。
When you write a directive in AngularJS you have to use camelCase in your javascript but spinal-case in your html. 当您在AngularJS中编写指令时，您必须在JavaScript中使用camelCase，但在html中使用小写字母。
So in your directive, you've got it correctly named as: menuTemplate but in your html, you need to change it to: 因此，在您的指令中，将其正确命名为： menuTemplate但是在html中，需要将其更改为：
<menu-template></menu-template>
Also, in your template, make sure you don't forget to close your section and nav tags. 另外，请确保在模板中不要忘记关闭section和nav标签。
var menuApp=angular.module("menuApp",[]); menuApp.config(function($logProvider) { $logProvider.debugEnabled(true); }) //directivas .directive("menuTemplate",function() { return { restrict:'E', templateUrl:'templates/menu.html', replace: true }; });
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
<!--carga de scripts--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js'></script> <script src="angularMenu.js"></script> <div id="Wrapper"> <div id="navegacion" ng-app="menuApp"> <menu-template></menu-template> <!-- Below is your template --> <!-- I'm using the template cache so that I can 'fake' --> <!-- your file structure, since I can't reproduce it in --> <!-- the snippet environment. --> <!-- https://docs.angularjs.org/api/ng/service/$templateCache --> <script type="text/ng-template" id="templates/menu.html"> <nav class='navbar navbar-default navbar-fixed-top'> <section ng-init="tab=1" class='container'> <ul class='nav nav-pills'> <!--<li ng-repeat="tabs in items.menu" ng-class="{active:tab === $index}"><a href ng-click="tab = $index">{{tabs}}</a></li>--> <li ng-class="{active:tab===1}"><a href ng-click="tab = 1">Información <i class="glyphicon glyphicon-info-sign"></i></a></li> <li ng-class="{active:tab===2}"><a href ng-click="tab = 2">Fotos <i class='glyphicon glyphicon-picture'></i></a></li> <li ng-class="{active:tab===3}"><a href ng-click="tab = 3">Listado de gatos <i class='glyphicon glyphicon-list-alt'></i></a></li> <li ng-class="{active:tab===4}"><a href ng-click="tab = 4">Contáctanos <i class='glyphicon glyphicon-envelope'></i></a></li> <li ng-class="{active:tab===5}"><a href ng-click="tab = 5">Puntos de recogida <i class='glyphicon glyphicon-map-marker'></i></a></li> <li ng-class="{active:tab===6}"><a href ng-click="tab = 6">Entidades colaboradoras <i class='glyphicon glyphicon-gift'></i></a></li> <li ng-class="{active:tab===7}"><a href ng-click="tab = 7">Mercadillo <i class='glyphicon glyphicon-euro'></i></a></li> <li ng-class="{active:tab===8}"><a href ng-click="tab = 8">Log in <i class='glyphicon glyphicon-user'></i></a></li> </ul> </section> </nav> </script> </div> <div id="cuerpo"></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.