Javascript 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>

<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>

---

将要隐藏的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>

---

尽量避免将同一控制器放置在彼此内部。那只会导致问题。而是使用

但如果你坚持使用控制器，你可以用这种方法解决它。（代码未测试）

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>

<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>

---

您应该将所有html包装在

中，这样您就不必多次添加ng控制器。这个答案非常完美，因为它经过了很好的解释，并为我当前的设置提供了一个逻辑解决方案。它还解决了多控制器问题，没有重写我的代码，以我目前的技能水平无法理解。我感谢你的帮助！

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