Question

如果您登录并注销，以下代码可以正常工作，但如果您尝试在此之后登录，则ng-click =＆＃34; login（）＆＃34;调用logout（）函数。 DOM正确更新。

.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();
}

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

Answer 1

我不认为将处理程序作为字符串传递给绑定数据是个好主意。此外，如果您看到控制台，您将看到解析器错误，因为ng-click需要一个表达式，并且插值的存在将使其成为无效表达式。为了回答你可以使用scope的{{3}}函数（它与javascript eval不同）可以根据范围评估有效的角度表达式，即：

 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>

此外，代码中也存在一些逻辑问题。

<强>演示

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>

但理想情况下，我宁愿做更多显式而不是做一些黑魔法 :)，即作为一种简单的方法，使用基于逻辑的点击处理程序渲染特定按钮处理方法调用通过绑定数据中的魔术字符串或传递函数引用。

Answer 2

其他几种可能性：

（1）由于某种原因，方法名称（可能是由于配置上的约定伪像）可能会干扰触发哪个方法。也：

（2）如果你混合绝对和相对定位，你可以有一个透明度与其下方（或旁边）重叠的元素。如果它是透明的，它可以完全重叠，同时仍然显示它。

离子/角度ng-click调用错误的功能

2 个答案: