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 

修复： 只需重命名布尔变量来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

Answer 2

无需创建两个按钮和两个功能。你可以做简单的方式是这样 -

<a ng-click="switchMode()">Switch Mode</a> 

JS：

$scope.offlineMode = true; 
$scope.switchMode = function() { 
    $scope.offlineMode = !$scope.offlineMode; 
}; 

，如果你想改变按钮上的文字，你可以做这样的：

<a ng-click="switchMode()"> 
    <span ng-if="offlineMode">Online Mode</span> 
    <span ng-if="!offlineMode">Offline Mode</span> 
</a> 

Answer 3

我不能解释为什么它不起作用，但考虑使用这种方法：

<a ng-click="toggle()">{{caption}}</a> 

$scope.online = true; 
$scope.caption = 'Offline Mode'; 
$scope.toggle = function() { 
    $scope.online = !$scope.online; 
    $scope.caption = $scope.online ? 'Offline Mode' : 'Online Mode'; 
    if ($scope.online) { 
    // do other things 
    } else { 
    // do other things 
    } 
}