javascript - AngularJS Controller 未正确显示/隐藏

Question

我试图让内容在单击按钮时消失，然后在单击该按钮时显示一组新内容。我不能完全让它工作。我评论了每个部分在做什么。单击按钮时，第一部分不会消失。第二部分按预期工作，确实在单击按钮时消失，而第三部分没有在单击按钮时显示。非常感谢您的帮助，我期待从中学习!

我想通过添加一个 Controller ，它会一起发挥作用。

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;
  };
})

Answer 1

您将要隐藏的 div 包裹在要显示的 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>

编辑:在 Controller 中也发现了一个问题。你错过了 eventFinish 的结束}:

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