ionic/angular ng-click calls wrong function

Question

The following code works fine if you log in and logout, but if you try to login after that the ng-click="login()" calls the logout() function. The DOM is update correctly.

.controller('AppCtrl', function($scope) {
function updateMenu(){
    $scope.customMenuItems = [];
    if(loggedin){
        $scope.customMenuItems.push({'text':'Login','click':'login()'});
    }else{
        $scope.customMenuItems.push({'text':'Logout','click':'logout()'});
    }
}
updateMenu();

$scope.login(){
loggedin= true; 
updateMenu();
}

$scope.logout(){
loggedin= false;
updateMenu();
}

and menu.html

 <ion-list>
     <ion-item menu-close ng-click="{{item.click}}" ng-repeat="item in customMenuItems track by $index">
         {{item.text}}
     </ion-item>
 </ion-list>

Hmm... I'm not sure passing a function name as a string is a good approach. Why not handle that logic in your controller? Also, double braces aren't needed inside ngClick. — isherwood
– isherwood, Commented Oct 21, 2015 at 21:33
it doesn't work without double braces. item.click wont substituted. — Nabil Sham
– Nabil Sham, Commented Oct 21, 2015 at 21:37
Why not add the right function directly, {'text':'Login','click': $scope.login}? — Josef Engelfrost
– Josef Engelfrost, Commented Oct 21, 2015 at 21:44

PSL · Accepted Answer · 2015-10-21 21:43:36Z

I do not think it is a good idea to pass the handler as string on the bound data. Also if you see the console you will see parser error because ng-click needs an expression and presence of interpolation will make it an invalid expression. For the answer sake you could use $eval function of the scope (it is not same as javascript eval) that can evaluate valid angular expression against the scope, i.e something like:

 ng-click="$eval(item.click)"

<ion-item menu-close ng-click="$eval(item.click)" ng-repeat="item in customMenuItems track by $index">
     {{item.text}}
 </ion-item>

Also there are some logic issues in the code as well.

Demo

angular.module('app', []).controller('AppCtrl', function($scope) {
  var loggedin = false;

  function updateMenu() {
    $scope.customMenuItems = [];
    if (!loggedin) {
      $scope.customMenuItems.push({
        'text': 'Login',
        'click': 'login()'
      });
    } else {
      $scope.customMenuItems.push({
        'text': 'Logout',
        'click': 'logout()'
      });
    }
  }

  updateMenu();

  $scope.login = function() {
    loggedin = true;
    console.log("login");
    updateMenu();
  }

  $scope.logout = function() {
    loggedin = false;
    console.log("logout");
    updateMenu();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">

  <div menu-close ng-click="$eval(item.click)" ng-repeat="item in customMenuItems track by $index">
    {{item.text}}
  </div>
</div>

But ideally i would prefer doing it more explicitly than doing some black magic :), i.e as a simple approach render specific button with click handler based on the logic instead of handling the method calls via magic string in the data being bound or passing function references around.

micahhoover · Accepted Answer · 2016-11-02 15:46:39Z

0

A couple other possibilities:

(1) For some reason method names (perhaps due to a convention-over-configuration artifact) can interfere with which method gets fired. Also:

(2) If you mix absolute and relative positioning you can have an element with transparency that overlaps something below (or beside) it. It can completely overlap it while still showing it if it is transparent.

edited Nov 2, 2016 at 15:46

answered Nov 2, 2016 at 14:47

micahhoover

2,1608 gold badges35 silver badges57 bronze badges

Collectives™ on Stack Overflow

ionic/angular ng-click calls wrong function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related