使用ng-click從控制器調用函數到我的視圖

Question

我有這兩個按鈕。

 <div class="btn-group" ng-init="showData = 1">
     <button ng-model="showData" type="button" ng-class='{"btn btn-primary": showData == 1, "btn btn-white": showData != 1}' ng-click="showData = 1">Headline</button>
     <button ng-click="eventDescription()" ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'  ng-click="showData = 2">Summary</button>
 </div>

在我的控制器中，我有一個調用WS的函數，在控制台中，我打印一條消息只是為了確保它能正常工作並且能夠看到它，我的函數是這樣的：

$scope.eventDescription = function () {

   some code goes here

    console.log("Service OK")

}

該功能代碼不相關，所以這就是為什么我沒有放入代碼

問題是，當我單擊該按鈕切換到該視圖時，什么也沒發生，所以我無法切換到該視圖，因此，如果我使用ng-click，我不會得到什么毛病。

也許我錯過了一些東西，但我對角剛還很陌生。

我也認為這是相關的，取決於按鈕的選擇，我調用不同的指令（我在其上渲染一些HTML），如下所示：

  <head-line-view ng-show="showData == 1"></head-line-view>
  <summary-view ng-show="showData == 2"></summary-view>

Answer 1

您在按鈕標簽中有2個ng-click屬性，請嘗試以下操作

 <button ng-click="eventDescription();showData = 2" ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'>Summary</button> 

Answer 2

在ng上單擊兩個按鈕時，它必須調用函數eventDescription。

在您的原始代碼中……第一個按鈕只是更改$ scope.showData的值。 第二個按鈕用ng鍵單擊兩次，一次執行“ eventDescription”而不是“ eventDescription（）”，另一個按鈕更改$ scope.showData的值。

如果在按鈕上單擊，想要更改$ scope.showData的值並調用$ scope.eventDescription函數，則只需在函數中進行更改即可。但是，可以在ng-click上執行以下操作：好

ng-click="showData = 1 && eventDescription()"

我寧願在函數中執行此操作，因為它將在html中占用更少的空間。

<div class="btn-group">
 <button ng-click="eventDescription(1)">Headline</button>
 <button ng-click="eventDescription(2)" >Summary</button>
</div>

$scope.eventDescription = function (viewNumber) {
    $scope.showData = viewNumber;
    console.log("Button Clicked");
}

Answer 3

您可以遵循以下幾點：

1. 您應該將ng-model用於不在其他標簽中的輸入字段，因此不應在按鈕標簽中使用
2. 最好在控制器$scope.showData = 1;進行初始化$scope.showData = 1;
3. btn類是常見的，因此無需在class="btn"中使用

因此您可以像這樣嘗試：

HTML：

<div class="btn-group">
     <button type="button" class="btn" ng-class="showData===1? 'btn-primary' : 'btn-white' " ng-click="showData = 1">Headline</button>
     <button type="button" class="btn" ng-class="showData===2? 'btn-primary' : 'btn-white' " ng-click="eventDescription()" >Summary</button>
 </div>

控制器：

$scope.showData = 1; // initialize

$scope.eventDescription = function () {
   $scope.showData = 2; // set 2 for showData
   //some code goes here
    console.log("Service OK")
};