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