スコープ関数（角関数）から機能しない場合の角度角度

Question

ng-ifというコンセプトは、その内部の変数に対して独自のスコープを作成することを理解しています。以下のコードで

、私はその仕事をしているショーアラートボタンから見えるように（確認して、ボタンをキャンセル）アラートを可能にしています。

しかし、明らかに私が反対を達成しようとすると、うまくいきません。 showheditAlertの設定は、ng-ifブロックのng-ifには影響しないようです。この設定はshowConfirm（）コールを使用して行われ、ブール値はshowEditAlertからに設定されます。（表示を非表示にします）が表示されたままになります。

  //Triggers Alert to show onClick 
     <button class="btn launchConfirm" ng-click="showEditAlert=true ">Show Alert</button> 


     <div ng-if="showEditAlert">     
      <div class="alert alert-danger alert-dismissible fade in " role="alert">     
       <button class="close" data-dismiss="alert" aria-label="close"> 
         <span aria-hidden="true">&times;</span> 
       </button> 
       <strong style="color:black">Proceed with edit options Please confirm?</strong> 

       <br> 
       <button class="btn btn-success btn-xs" 
         ng-click="$parent.enable = false; ShowConfirm()" > 
        confirm 
       </button> 
       <button class="btn btn-danger btn-xs " 
         ng-click="$parent.showEditAlert=false"> 
        cancel 
       </button>             
      </div> 
     <div> 

AngularJS

$scope.showEditAlert = false; //Initialization 

$scope.ShowConfirm = function() { 
    $scope.showEditAlert = false // This setting value is not effecting the ng-if block 
} 

、私はいくつかの範囲賢明な理解を逃しています知って、親切に鮮明な画像で私を助けて。本当に応答を感謝します。

PS。私はng-showとng-hideを使って解決策を得ました。しかし、その意図は、使用して同じことを達成することであるNG-場合

Answer 1

（、それが直接DOMに影響を持っているので）実施例細かい作業

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.showEditAlert = false; //Initialization 
 

 
$scope.ShowConfirm = function() { 
 
    $scope.showEditAlert = false // This setting value is not effecting the ng-if block 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    //Triggers Alert to show onClick 
 
     <button class="btn launchConfirm" ng-click="showEditAlert=true ">Show Alert</button> 
 

 

 
     <div ng-if="showEditAlert">     
 
      <div class="alert alert-danger alert-dismissible fade in " role="alert">     
 
       <button class="close" data-dismiss="alert" aria-label="close"> 
 
         <span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <strong style="color:black">Proceed with edit options Please confirm?</strong> 
 

 
       <br> 
 
       <button class="btn btn-success btn-xs" 
 
         ng-click="$parent.enable = false; ShowConfirm()" > 
 
        confirm 
 
       </button> 
 
       <button class="btn btn-danger btn-xs " 
 
         ng-click="$parent.showEditAlert=false"> 
 
        cancel 
 
       </button>             
 
      </div> 
 
     <div> 
 
</div>

Answer 2

そのを参照してください。 。

.controller('ExampleController', ['$scope', function($scope) { 

     $scope.showEditAlert = false; //Initialization 

     $scope.ShowConfirm = function() { 
      $scope.showEditAlert = false // This setting value is not effecting the ng-if block 
     }; 
    }]); 
    </script> 
    <form name="myForm" ng-controller="ExampleController"> 
     <button class="btn launchConfirm" ng-click="showEditAlert=true ">Show Alert</button> 


     <div ng-if="showEditAlert">     
      <div class="alert alert-danger alert-dismissible fade in " role="alert">     
       <button class="close" data-dismiss="alert" aria-label="close"> 
         <span aria-hidden="true">&times;</span> 
       </button> 
       <strong style="color:black">Proceed with edit options Please confirm?</strong> 

       <br> 
       <button class="btn btn-success btn-xs" 
         ng-click="$parent.enable = false; ShowConfirm()" > 
        confirm 
       </button> 
       <button class="btn btn-danger btn-xs " 
         ng-click="$parent.showEditAlert=false"> 
        cancel 
       </button>             
      </div> 
     </div> 
    </form> 

plunkr [ここ]（https://plnkr.co/edit/1D48TWXl8dInTlcVYjn3?p=preview）！