angularjs指令不起作用（node.js和angularjs newbee）
我正在学习AngularJS和Node.js. 我试图build立一个小型网站（“你好网站”），但我有一个angularjs指令（我猜）的问题。 这是我的项目结构
根
+ angularFiles
—— angularMenu.js
+模板
—— menu.html
– index.html
– servidor.js
正如你所看到的，没有什么特别的…文件的代码：
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); Web服务器工作
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>
这是一个正常的指标
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>
这是我想用来导航的模板
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 }; });
angular度菜单文件。
一切似乎确定，但是当我使用该指令插入我的菜单模板，它不起作用，我只有一个白页。 服务器正在工作没有问题…错误在哪里？ 为什么我的指令不显示菜单模板？
我已经尝试了很多东西，改变了我的templateUrl指令的路线，等等，并没有为我工作。 我做了一个正确的工作，但不是指令的控制器。
非常感谢您的时间！
你有两个小问题。 首先是造成主要问题的那个。
当你在AngularJS中编写一个指令时，你必须在你的javascript中使用camelCase，但是在你的html中是这样的。
所以在你的指令中，你已经得到了正确的命名为： menuTemplate但在你的HTML，你需要改变它：
<menu-template></menu-template>
另外，在你的模板中，确保你不要忘记closures你的部分和导航标签。
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>