如何在Angular中隱藏顯示

Question

我是angular js的初學者

HTML

<div ng-app="myapp">
    <div ng-controller="maincontrol">
        <div ng-show="!vis"><a href="#/">show</a></div>
        <div ng-show="vis"><a href="#/contact">hide</a></div>
    </div>
    <div ng-view></div>
</div>

JS

var app = angular.module('myapp', ['ngRoute'])
app.controller('maincontrol', function ($scope) {
    $scope.vis = true;
     $scope.fun = function () {

        if ($scope.user == "home" && $scope.pass == "home") {
            console.log($scope.user, $scope.pass);
            $scope.vis = false;
        }
    }
})


app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'home.html'
        })
        .when('/contact', {
            templateUrl: 'contact.html'
        })
});

而且我還有兩個HTML頁面，例如

home.html的

<div ng-controller="maincontrol">
    <input ng-model="user"/>
    <input ng-model="pass"/>

    <div ng-click="fun()">
        click
    </div>
</div>

contact.html

<div>
    contact
</div>

我的期望是進入用戶並通過后。 如果單擊“單擊”，則需要顯示“顯示”標簽而不是“隱藏”。 請幫助我。

Answer 1

每個控制器都有自己的作用域，當您在fun（）上寫入$ scope.vis = false時，實際上是在maincontroler1作用域上創建了一個新變量。 如果您希望此變量影響綁定到maincontroler范圍的視圖，則不會發生。

我建議2個選擇：

1. 您可以為整個應用程序使用一個控制器（如果您在兩個標記中使用相同的控制器，盡管它是同一控制器 ， 但仍將創建一個新的作用域） ，這樣，從第一個視圖調用的fun（）方法將更改布爾值在單個控制器中，將影響第二個視圖。 請注意，當您使用ng-view時，您將必須從parent那里獲取變量 。

所以我用了這段代碼：

$parent.user 
$parent.pass

為您創建此工作插件 。

2. 使用服務在2個控制器之間共享可見布爾值。 您可以將此帖子用於此選項。
3. 您還可以使用子控制器的到達父控制器作用域，如果ng-view將嵌套在外部控制器中，則可以這樣做。 您可以將此帖子用作選項3。