javascript - ng-click 第二次无法使用 ng-hide 交互

Question

我有两个按钮，一次只出现其中一个。第一个称为“离线模式”，另一个称为“在线模式”。它们在 HTML 中的显示方式如下:

<a ng-hide="offlineMode == true" ng-click="offlineMode()">Offline Mode</a> 
<a ng-show="offlineMode == true" ng-click="onlineMode()">Online Mode</a>

当我第一次点击“离线模式”时，它成功切换到“在线模式”按钮。当我点击“在线模式”之后，它会切换回“离线模式”。在此之后按钮变得不可点击。它不进入函数内部。

JS:

$scope.offlineMode = function() {
    $scope.offlineMode = true;
    // do other things
};

$scope.onlineMode = function() {
    $scope.offlineMode = false;
    // do other things
};

Answer 1

您收到此错误是因为函数和标志变量的名称相同 offlineMode

查看此错误的控制台:

v2.offlineMode is not a function

修复:只需将 bool 变量重命名为 offline(或其他名称)

  $scope.offlineMode = function() {
      $scope.offline = true;
      // do other things
  };

  $scope.onlineMode = function() {
      $scope.offline = false;
      // do other things
  };  

并相应地更新 html

<a href="#" ng-hide="offline" ng-click="offlineMode()">Offline Mode</a><br> 
<a href="#" ng-show="offline" ng-click="onlineMode()">Online Mode</a>

注意 ng-hide 和 ng-show 的变化。您不需要每次都使用 true 评估 offline。

这是 demo