AngularJS控制器無法正確顯示/隱藏

我試圖讓內容在按鈕單擊時消失，然後在該按鈕上單擊顯示一組新內容。我無法完成這項工作。我評論了每個部分正在做什麼。第一部分沒有按鈕點擊消失。第二款按預期工作，確實消失在按鈕點擊和第三款不會按鈕點擊顯示。非常感謝幫助，我期待着從中學習！AngularJS控制器無法正確顯示/隱藏

我想通過添加一個控制器它會一起工作。

HTML

<!-- THIS DOESN'T DISAPPEAR ON BUTTON CLICK --> 
<div ng-controller="EventCtrl" ng-hide="eventComplete"> 
    <h2>Example that doesn't disappear on button click</h2> 
</div> 

<!-- THIS WILL DISAPPEAR ON BUTTON CLICK --> 
<div ng-controller="EventCtrl" ng-hide="eventComplete"> 

    <div> 
     <h2>Example</h2> 
     <md-button ng-click="eventFinish();">Finish</md-button> 
    </div> 

    <!-- THIS DOESN'T SHOW ON BUTTON CLICK --> 
    <div ng-controller="EventCtrl" ng-show="eventComplete"> 
     <h2>Complete!</h2> 
    </div> 
</div>

ANGULAR

.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){ 
    var self = this; 
    $scope.eventComplete = false; 
    $scope.eventFinish=function(){ 
    console.log('eventFinish'); //This logs 
    $scope.eventComplete = true; 
    }; 
})

來源

2017-07-31 user5854648

你應該換所有的HTML的''

，這樣你就不用加NG-控制器多次。 –

你包裹要隱藏各地要顯示在div股利。下面的HTML應該可以解決問題：

<div ng-controller="EventCtrl"> 

    <div ng-hide="eventComplete"> 
     <h2>Example that doesn't disappear on button click</h2> 
    </div> 

    <div ng-hide="eventComplete"> 
     <div> 
      <h2>Example</h2> 
      <md-button ng-click="eventFinish();">Finish</md-button> 
     </div> 
    </div> 

    <div ng-show="eventComplete"> 
     <h2>Complete!</h2> 
    </div> 
</div>

編輯：在控制器中也發現了一個問題。您錯過了eventFinish的關閉}：

.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){ 
    var self = this; 
    $scope.eventComplete = false; 
    $scope.eventFinish = function() { 
     console.log('eventFinish'); 
     $scope.eventComplete = true; 
    }; 
})

來源

2017-07-31 15:40:45

這個答案是完美的，因爲它很好地解釋了並提供了一個合理的解決方案，與我目前的設置。它也解決了多重控制器問題，而無需以我目前的技能水平無法理解的方式重寫我的代碼。我感謝幫助！ – user5854648

@ user5854648非常歡迎您！ –

儘量避免將相同的控制器放置在彼此之內。這隻會導致問題。請使用Components。

但是如果你堅持使用控制器，你可以用這種方法解決問題。（代碼未測試）

HTML

<div ng-controller="EventCtrl"> 
    <div ng-if="showExample(1)"> 
     <h2>Example 1</h2> 
     <md-button ng-click="onClickExample(2);">Finish</md-button> 
    </div> 

    <div ng-if="showExample(2)">> 
     <h2>Example 2</h2> 
     <md-button ng-click="onClickExample(1);">Finish</md-button> 
    </div> 
</div>

.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){ 

    $scope.currentExample=1; 

    $scope.showExample = function(id){ 
    return $scope.currentExample === id; 
    } 

    $scope.onClickExample = function(id){ 
    $scope.currentExample = id; 
    } 
});

來源

2017-07-31 15:47:17

AngularJS控制器無法正確顯示/隱藏

回答

相關問題