Question

我理解 ng-if 为其中的变量创建自己的范围的概念。

在下面的代码中，我正在启用警告（带有确认和取消按钮），从显示警报按钮可以看到它正在执行其工作。

但是，显然当我试图达到相反的目的时，它并没有成功。似乎showEditAlert的设置对 ng-if 块没有影响。此设置是使用 showConfirm（）调用完成的，该调用又将 showEditAlert 的布尔值设置为 false （隐藏视图），而是，视图仍然有效。

         //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-if 来实现相同的目标（因为，它直接对DOM产生影响）

Answer 1

参见工作示例

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

角度ng - 如果不在范围函数（角度函数）下工作

2 个答案: