AngularJSコントローラが正しく表示されない/隠れている

Question

ボタンをクリックするとコンテンツが消えてしまい、そのボタンのクリックで新しいコンテンツが表示されています。私はこれを働かせることはできません。私は各セクションが何をしているのかコメントしました。最初のセクションは、ボタンクリックでが表示されません。 2番目のセクションは正常に動作し、はがボタンクリックで消え、3番目のセクションはボタンクリックで表示されません。私はこれから学ぶことを楽しみにしています！

コントローラーを追加することで、すべて一緒に機能すると思いました。

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> 

アンギュラ

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

EDIT：コントローラにも問題が見つかりました。あなたはeventFinishのclosingを見落としています：

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

Answer 2

同じコントローラをお互いに配置しないようにしてください。それは問題につながるだけです。代わりに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> 

JSは

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