Two way binding for ng-click directive in angularjs

Question

I have calling a function in two elements. when I triggering the function an on-click event then also it should be hit once more time for wherever I called that function.

//html

<button type="button" ng-click="{{myFunction()}}">click Me !!</button>
  <p ng-show="{{myFunction()}}">{{name}}</p>

//controller

myApp.controller('myController', function ($scope) {
  $scope.name = 'Helow World!';
  $scope.myFunction = function(){
    return true;
  };
});

I also tried with "" instead of {{}} for two way binding

  <button type="button" ng-click="myFunction()">click Me !!</button>
  <p ng-show="myFunction()">{{name}}</p>

Problem :

The function will be firing only one time. Show my p tag does not show.

Solution

I can use a scope object to Show|hide the p tag. But that's not my question.

Question

My question is, how to implement Two way binding for event(ng-click) same as works like ng-repeat,ng-model,mg-show,etc in angularjs?

are you getting any error in console?what kind of result you want? — Tejinder Singh, Jul 13 '17 at 06:49
The function will be firing only one time. Show my `p` tag does not show. — Ramesh Rajendran, Jul 13 '17 at 06:50
2. html will work you are wrong. And what do you mean with event two way binding ? what are you wanting to do ? — Burak Akyıldız, Jul 13 '17 at 06:53
ng-click event is a function not a variable so there will be no two way binding — Burak Akyıldız, Jul 13 '17 at 06:58
But I have assign the function in a variable : `$scope.myFunction =Function()....` — Ramesh Rajendran, Jul 13 '17 at 07:00
What you expect to happen when function has 'two way binding' ? — Burak Akyıldız, Jul 13 '17 at 07:03
it automatically calls the function on `ng-show` and it will always happen.What exactly you want to do? — Tejinder Singh, Jul 13 '17 at 07:05
i think you need to give one more variable for `ng-show` and set it true within `myFunction()`. right now what happen is when `myFunction()` returns it also sets `ng-click` as true. so the `myFunction()` method is gone. then it was something like `` — Pravesh Khatri, Jul 13 '17 at 07:05
If you mention a function in ng-show, it will get evaluated in the background at the runtime. This is termed as a two-way binding. What you are trying to accomplish is not gonna happen. — Ashish Lohia, Jul 13 '17 at 07:42

score 3 · Accepted Answer · answered Jul 13 '17 at 07:15

You're going about this wrong.

The angular directives work with angular expressions, that means that whatever you insert into e.g. ng-show is executed using $parse(expr)($scope) - that's the short version. So if your expression contains a function call, that function is called whenever the directive decides to execute the expression. In the case of ng-show, that happens on every digest cycle. in the case of ng-click that happens on the click event.

So when you use code like this: ng-show="myFunc()" and your function is defined like this:

$scope.myFunc = function() { return true; };

then on every digest, this function is executed and returns true to the ng-show. It doesn't have anything to do with what is going on in the ng-click directive.

What you're asking can't be done. Angular just doesn't work that way. The solution you state with

I can use a scope object to Show|hide the p tag. But that's not my question.

is your best and only option.

Two way binding for ng-click directive in angularjs

Problem :

Solution

Question

1 Answers1