Angular ng-click 只工作一次

Question

我需要在 div 之间切换。 div class="wrapper" 必须默认可见。 Div class="form" 必须在管理员批准后显示。问题是当我点击<a ng-click="toggle()"> 时它只工作一次，之后没有反应。如果我将一些ng-hide 添加到“包装器”，ng-click 有效，但仅显示/隐藏“表单”。 <a> 必须在控制器响应后显示，例如 class="form"。

HTML：

<div class="body" ng-class="{'show': show && showTemp}">
        <a ng-click="toggle()"></a>
        <div class="form"></div>
        <div class="wrapper"></div>
</div>

CSS：

.form {
    display: none;
}

.wrapper {
    display: block;
}

.show .form {
    display: block;
}

.show .wrapper {
    display: none;
}

控制器：

 $scope.show = false;
 $scope.showTemp = true;


 // response from admin
 $scope.$on('$show', function(e,data) {
                $scope.show = true;
                $scope.available = data;
            });


    // this click by user
    $scope.toggle = function() {
            $scope.showTemp = !$scope.showTemp;
        };

Answer 1

你为什么不能做一些更简单的事情，比如：

<div class="body" ng-init="showForm = false">
        <a ng-click="showForm = available && ? false : !showForm">Click</a>
        <div class="form" ng-show="showForm"></div>
        <div class="wrapper" ng-hide="showForm"></div>
</div>

通过使用ngInit，我将showForm 的默认值设置为false（您也可以从控制器执行此操作（$scope.showForm = false;），然后我切换ng-hide 类（可以找到在angular.css 中任何简单地定义为.ng-hide {display: none;}) 以显示/隐藏表单和包装器DIV。

当您单击按钮时，将评估以下条件：showForm = available && ? false : !showForm - 如果没有可用数据，showForm 将始终隐藏，如果有可用数据，它将在表单和包装器之间切换.

您还可以将ng-show="available" 添加到按钮，这样它只有在有数据时才可见，因为之前它什么都不做。一个工作示例：

angular.module('app',[]).controller('ctrl', function($scope) {
  $scope.setData = function(data) {
    $scope.available = data;
    $scope.showForm  = true;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
<div class="body" ng-init="showForm = false">
        <a ng-show="available" ng-click="showForm = !showForm">Click</a>
        <br>
        <div class="form" ng-show="showForm">THIS IS THE FORM<br>{{available | json}}</div>
        <div class="wrapper" ng-hide="showForm">THIS IS THE WRAPPER</div>
  
  <button ng-hide="available" ng-click="setData({val: 'test'})">SET MOCK DATA</button>
</div>
  </div>