Angular ng-click works only once

Question

I need to switch between to div's. Div class="wrapper" must be visible by default. Div class="form" must be shown after admin approve. The problem is when i click on <a ng-click="toggle()"> it works only once, and no reaction after. If i will add some ng-hide to 'wrapper', ng-click works, but show/hide only 'form'. <a> must be shown after controller response, like 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;
}

Controller:

 $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;
        };

Alon Eitan · Accepted Answer · 2016-07-17T14:20:12.207

2

Why can't you do something simpler like:

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

By using ngInit I'm setting a default value to showForm to false (You can do it from the controller as-well ($scope.showForm = false;) and then I toggle the ng-hide class (Which is found in angular.css any simply defined as .ng-hide {display: none;}) to show/hide the form and the wrapper DIVs.

When you click on the button the following condition is evaluated: showForm = available && ? false : !showForm - The showForm will always be hidden if there is no data available, and if there is data avalable, it will toggle between the form and the wrapper.

You can also add ng-show="available" to the button so it's only visible once there's data, because before it does nothing. A working example:

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>

edited Jul 17 '16 at 14:20

answered Jul 17 '16 at 12:33

Alon Eitan

11,997
8
49
58

must be shown only after response from controller: $scope.$on('$show', function(e,data) { $scope.show = true; $scope.available = data; }); – Serhio g. Lazin Jul 17 '16 at 12:52
So not sure I understand - What should happen before the response from the controller ` $scope.$on('$show', ,,,` when you click on the link? And btw - Did you intentionally wrapped the form and the wrapper inside the `A` tag? – Alon Eitan Jul 17 '16 at 12:54
1. Wrapper visible by default. Form - hidden 2. When controller responce: Form - visible, wrapper - hidden 3. When click, after controller responce - just switch between them. visible/hiiden – Serhio g. Lazin Jul 17 '16 at 12:58
I have added some changes, can you check please? If not, i'll remove my answer because I have to go and won't be able to answer for the next couple of horse – Alon Eitan Jul 17 '16 at 13:02
One update came, must be hidden by default and shown only after controller response once. After appearing must be always visible – Serhio g. Lazin Jul 17 '16 at 13:46
@Serhiog.Lazin In that case add `ng-show="available"` to the `` to make it hidden until the data exist (Where you set `$scope.available = data;` inside the event listener in the controller) – Alon Eitan Jul 17 '16 at 13:56
Thanks, but main issue still present.. ng-click still works only once – Serhio g. Lazin Jul 17 '16 at 14:07
@Serhiog.Lazin I have added a working example - note that the `SET MOCK DATA` button is there to simulate the event where you get the the data in your app – Alon Eitan Jul 17 '16 at 14:14
The same with your code. Click works only first time and then any reaction. I guess this 'on' event doesn't allow to change variable, when setted it inside "$scope.$on('$show', function(e,data) { $scope.showForm = true; $scope.available = data; });" – Serhio g. Lazin Jul 17 '16 at 15:03
@Serhiog.Lazin After you click on the `SET MOCK DATA` you can click on the `click` link to toggle between the two, it's working fine in my example (I have editted to example to make the link more noticeable) – Alon Eitan Jul 17 '16 at 15:40
Your example is absolutely amazing! It works. I have tried it one in one, but still have an issue with ones click working, as i wrote in previous comment it can be because $on event doesn't allow to change variable, after assignment inside it. $on - started and hangs. – Serhio g. Lazin Jul 17 '16 at 15:44
Where/How do you `$broadcast` the `$show` event? Can you edit your question and include that part too? I feel like I don't understand something basic here - Not sure if it's because of lack of details of some sort of stupidity on my side – Alon Eitan Jul 17 '16 at 15:48
It is sad to be dumb by my side. You are absolutely correct! Your code works very fine. Thank you! – Serhio g. Lazin Jul 18 '16 at 06:48

Angular ng-click works only once

1 Answers1