Question

我正在学习AngularJS和Node.js.我正在尝试建立一个小型网站（“你好网站”），但我有一个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);

网络服务器正常工作

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指令的路线等等......并没有为我工作。我做了一个正常工作但不是指令的控制器。

非常感谢你的时间！

Answer 1

你有两个小问题。第一个是造成主要问题的那个。

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

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

<menu-template></menu-template>

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

＆＃13;

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
  };
});

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");

＆＃13;

  <!--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>

＆＃13;

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

1 个答案: