angularjs 指令不起作用（node.js 和 angularjs newbee）答案

【问题标题】：angularjs directive don't work (node.js and angularjs newbee)angularjs 指令不起作用（node.js 和 angularjs newbee）
【发布时间】：2015-07-05 07:52:46
【问题描述】：

我正在学习 AngularJS 和 Node.js。我正在尝试建立一个小型网站（“hello website”），但我对 angularjs 指令有疑问（我猜）。这是我的项目结构

根
+ 角文件
------ 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);

网络服务器正常工作

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&oacute;n &nbsp;<i class="glyphicon glyphicon-info-sign"></i></a></li>
        <li ng-class="{active:tab===2}"><a href ng-click="tab = 2">Fotos &nbsp;<i class='glyphicon glyphicon-picture'></i></a></li>
        <li ng-class="{active:tab===3}"><a href ng-click="tab = 3">Listado de gatos &nbsp;<i class='glyphicon glyphicon-list-alt'></i></a></li>
        <li ng-class="{active:tab===4}"><a href ng-click="tab = 4">Cont&aacute;ctanos &nbsp;<i class='glyphicon glyphicon-envelope'></i></a></li>
        <li ng-class="{active:tab===5}"><a href ng-click="tab = 5">Puntos de recogida &nbsp;<i class='glyphicon glyphicon-map-marker'></i></a></li>
        <li ng-class="{active:tab===6}"><a href ng-click="tab = 6">Entidades colaboradoras &nbsp;<i class='glyphicon glyphicon-gift'></i></a></li>
        <li ng-class="{active:tab===7}"><a href ng-click="tab = 7">Mercadillo &nbsp;<i class='glyphicon glyphicon-euro'></i></a></li>
        <li ng-class="{active:tab===8}"><a href ng-click="tab = 8">Log in &nbsp;<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
          };
});

角度菜单文件。

一切似乎都很好，但是当我使用指令插入我的菜单模板时，它不起作用，我只有一个白页。服务器正常工作...错误在哪里？为什么我的指令不显示菜单模板？

我尝试了很多东西，改变了我的 templateUrl 指令的路由，等等……但对我没有用。我做了一个正常工作的控制器，但不是指令。

非常感谢您的宝贵时间！

【问题讨论】：

标签： angularjs node.js angularjs-directive

【解决方案1】：

你有两个小问题。第一个是导致主要问题的原因。

当您在 AngularJS 中编写指令时，您必须在 javascript 中使用 camelCase，但在 html 中使用脊柱大小写。

因此，在您的指令中，您已将其正确命名为：menuTemplate，但在您的 html 中，您需要将其更改为：

<menu-template></menu-template>

此外，在您的模板中，请确保您不要忘记关闭您的部分和导航标签。

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&oacute;n &nbsp;<i class="glyphicon glyphicon-info-sign"></i></a></li>
              <li ng-class="{active:tab===2}"><a href ng-click="tab = 2">Fotos &nbsp;<i class='glyphicon glyphicon-picture'></i></a></li>
              <li ng-class="{active:tab===3}"><a href ng-click="tab = 3">Listado de gatos &nbsp;<i class='glyphicon glyphicon-list-alt'></i></a></li>
              <li ng-class="{active:tab===4}"><a href ng-click="tab = 4">Cont&aacute;ctanos &nbsp;<i class='glyphicon glyphicon-envelope'></i></a></li>
              <li ng-class="{active:tab===5}"><a href ng-click="tab = 5">Puntos de recogida &nbsp;<i class='glyphicon glyphicon-map-marker'></i></a></li>
              <li ng-class="{active:tab===6}"><a href ng-click="tab = 6">Entidades colaboradoras &nbsp;<i class='glyphicon glyphicon-gift'></i></a></li>
              <li ng-class="{active:tab===7}"><a href ng-click="tab = 7">Mercadillo &nbsp;<i class='glyphicon glyphicon-euro'></i></a></li>
              <li ng-class="{active:tab===8}"><a href ng-click="tab = 8">Log in &nbsp;<i class='glyphicon glyphicon-user'></i></a></li>
            </ul>
          </section>
        </nav>      
      </script>
      
      
    </div>

    <div id="cuerpo"></div>
  </div>

【讨论】：

非常感谢！！！这让我快疯了！这些错误是你一生中永远不会忘记的错误 =)
是的，特别是因为控制台中没有错误。祝你好运！