在玉石中聲明的角度變量是未定義的

我做了一個簡單的使用角度的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）的，似乎值爲undefined

來源

2016-08-12 Lazarus Rising

你確定與Jade中的縮進無關嗎？您發佈的代碼似乎沒有正確縮進... – Dario

我不認爲有縮進問題，因爲：1）當縮進問題時，嘗試打開頁面會給我一個錯誤。在這種情況下，沒有錯誤，只有未定義的值。 2）爲了確保我也嘗試了從網上轉換html獲得的玉石版本。它可能會也可能不會是正確的，但我得到的結果與我自己寫的結果完全相同。 –

好的，所以我猜想在你發佈的代碼中沒有縮進的「內容二」只是一些錯誤的複製/粘貼，對吧？ – Dario

這工作：

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？

來源

2016-08-15 10:21:34 Dario

謝謝，我看到這段代碼實際上起作用。然而，當我複製粘貼到我的環境中，只更改應用程序名稱（我的應用程序被稱爲不同），它不會再工作。我認爲這個錯誤不是用玉，而是用js文件包含的方式。 –

在玉石中聲明的角度變量是未定義的

回答

相關問題