在jade中声明的角度变量未定义答案

【问题标题】：Angular variable declared in jade is undefined在jade中声明的角度变量未定义
【发布时间】：2016-08-12 09:24:10
【问题描述】：

我制作了一个使用 Angular 的简单 html 页面。导航菜单包含 3 个链接。 Angular 的 ng-click 用于为代表页面（或视图）的三个 div 设置可见性 true 或 false。在 html 中它工作得很好，但我需要添加一些其他的功能，让我把它转换成玉。但是，ng-click 中的值现在是未定义的。以下是两个版本的代码：

HTML：

<nav class="navbar navbar-default" role="navigation">
      <div>
        <ul class="nav navbar-nav">
            <li><a href="" ng-click="view_one=true; view_two=false; view_three=false">First page</a></li>
            <li><a href="" ng-click="view_one=false; view_two=true; view_three=false">Second page</a></li>
            <li><a href="" ng-click="view_one=false; view_two=false; view_three=true">Third page</a></li>
        </ul>
      </div>
</nav>

<div class="container" ng-controller="mainController" ng-show='view_one'>
 Content 1
</div>

<div class="container" ng-controller="mainController" ng-show='view_two'>
 Content 2
</div>

<div class="container" ng-controller="mainController" ng-show='view_three'>
 Content 3
</div>

玉：

nav.navbar.navbar-default(role='navigation')
  .navbar-centre
    ul.nav.navbar-nav
      li
        a(href='', ng-click='view_one=true; view_two=false; view_three=false') First page
      li
        a(href='', ng-click='view_one=false; view_two=true; view_three=false') Second page
      li
        a(href='', ng-click='view_one=false; view_two=false; view_three=true') Third page

.container(ng-controller='mainController', ng-show='view_one')
 Content one
.container(ng-controller='mainController', ng-show='view_two')
Content two
.container(ng-controller='mainController', ng-show='view_three')
 Content three

通常，内容的语法与代码中的不同。三个视图正确显示，但在单击菜单时它们不会隐藏/显示。此外，当我打印任何变量（例如 view_one）时，似乎该值未定义

【问题讨论】：

你确定不是与 Jade 中的缩进有关吗？您发布的代码似乎没有正确缩进...
我不认为缩进有问题，因为：1）当缩进出现问题时，尝试打开页面会给我一个错误。在这种情况下，没有错误，只有未定义的值。 2）为了确保我还尝试了从在线转换 html 中获得的翡翠版本。它可能正确也可能不正确，但我得到的结果和我自己写的一样。
好的，所以我猜你发布的代码中没有缩进的“内容二”只是一些错误的复制/粘贴，对吧？
如前所述，这里的内容是 dummy content ，被替换为代码看起来更整洁更清晰

标签： html angularjs node.js pug

【解决方案1】：

这行得通：

html(ng-app="myApp")
  body
nav.navbar.navbar-default(role='navigation')
  div
    ul.nav.navbar-nav
      li
        a(href="",ng-click='view_one=true; view_two=false; view_three=false') First page
      li
        a(href="",ng-click='view_one=false; view_two=true; view_three=false') Second page
      li
        a(href="",ng-click='view_one=false; view_two=false; view_three=true') Third page
.container(ng-controller='mainController', ng-show='view_one')
  | Content 1
.container(ng-controller='mainController', ng-show='view_two')
  | Content 2
.container(ng-controller='mainController', ng-show='view_three')
  | Content 3

使用虚拟 JS：

var app = angular.module('myApp', []);
app.controller("mainController", function() {});

见 jsbin here。我认为你没有粘贴的代码有问题...也许你可以准备并提供一个jsbin？

【讨论】：

谢谢，我看到这段代码确实有效。但是，当我将其复制粘贴到我的环境中并仅更改应用程序名称（我的应用程序的名称不同）时，它不再起作用。我认为错误不在于jade，而在于js文件的包含方式。