why interpolation works inside ng-show and not inside ng-click

Question

// template

      <div ng-controller="myController">
        <input type="text" ng-model="name">
        <p>{{name}}</p>
        <p>{{10+10}}</p>
        <button type="button" ng-click="{{myFunction()}}">click Me !!</button>

        <p ng-show="{{myFunction()}}">The name is {{ name | uppercase }}</p>

      </div>

// Controller

myApp.controller('myController', function ($scope) {

  $scope.name = 'Ranka';
  $scope.myFunction = function(){
    return true;
  };

});

Here it is failing in case of ng-click

angular.js:14525 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{myFunction()}}] starting at [{myFunction()}}].

Farci

Interpolation is not needed for ng-show and it is advised not to trigger events on ng-show, since it will increase your memory usage. Events should be triggered only on things like ng-click,ng-change etc... where you don't need any interpolation as all these are angular directives – Funds

I think it's nice question if the question is related with two way binding in function. – Lookthrough

Answer 1

Just use without the expression,

<button type="button" ng-click="myFunction()">click Me !!</button>

Mudcat

Yes, I can do that but why I can't do what I trying as ng-click simply require angularjs expression. – Farci

Answer 2

ng-show and ng-click are already an inbuild directive in angularjs. So, we no need to put it in curly braces for these expressions.

Without controller we doing the context in html itself. Use ng-init directive use to define as a variable you like and override the variable in ng-click as you want

<div ng-controller="MyCtrl" ng-init="showName = false;">
 <input type="text" ng-model="name">
        <p>{{name}}</p>
        <p>{{10+10}}</p>
        <button type="button" ng-click="showName = true">click Me !!</button>

        <p ng-show="showName">The name is {{ name | uppercase }}</p>
</div>

controller:

var myApp = angular.module('myApp',[]);

    function MyCtrl($scope) {
       $scope.name = 'Ranka';
    }

Working Fiddle

Rhythmandblues

sorry but my question is why can't we add interpolation in expression if we are allowed to do it inside ng-show attribute? – Farci

For anything which we need one way binding we will use curly braces(interpolation). But for ng-show directive its by nature referring the model and hence not required interpolation over there. – Rhythmandblues

Answer 3

try this simple way

    <button type="button" ng-click="{{ myFunction(); isShow = false}}">click Me !!</button>

    <p ng-show="{{isShow}}">The name is {{ name | uppercase }}</p>

and controller should be like,

var myApp = angular.module('myApp',[]);
       function MyCtrl($scope) {
       $scope.isShow= true;
       $scope.name = 'hallow world!';
    }

Lookthrough