Angular ng-click 只工作一次

Question

我需要在 div 之间切换。 Div class="wrapper" 必须默认可见。 Div class="form" 必须在管理员批准后显示。问题是当我点击 <a ng-click="toggle()"> 它只工作一次，之后没有任何反应。如果我将一些 ng-hide 添加到 'wrapper'，ng-click 有效，但 show/hide 仅 'form'。 <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 class（可在 angular.css 中找到，任何简单定义为 .ng-hide {display: none;}）到 show/hide 表单和包装器 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>

Angular ng-click 只工作一次

Angular ng-click works only once

angularjs

angularjs-ng-click

ng-class

ng-hide