Question

我制作了一个简单的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

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

Answer 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中声明的角度变量是未定义的

1 个答案: