ng-clickを使用してコントローラから自分のビューに関数を呼び出す

Question

私はこの2つのボタンを持っています。私のコントローラで

<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を呼び出す関数を持って、 私の機能は、このようなものは次のとおりです。

それは私がコード

ことだと私はへ]ボタンをクリックしたときに、Sを入れてdidntの理由ですので

$scope.eventDescription = function() { 

    some code goes here 

    console.log("Service OK") 

} 

機能コードは関係ありませんそのビューには何も起こりません、私はそのビューに切り替えることはできませんので、もし私がng-clickを使っていれば何が間違っているのか分かりません。

多分、私は何かが不足していますが、新しい角度に私は欠けています。してみてください、あなたはボタンタグで2 ngのクリックの属性を持つ

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

Answer 1

：

も私は、ボタンの選択に応じて、私はこのような異なるディレクティブを（私は彼らにいくつかのHTMLをレンダリング）を呼び出し、これは関連性があると思いますこの

<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の値を変更していました。 2回目のボタンは、eventDescription（）の代わりに 'eventDescription'を1回、$ scope.showDataの値を変更してng-clickを2回行っていました。

ボタンクリックで$ scope.showDataの値を変更し、$ scope.eventDescription関数を呼び出す場合は、関数内でそれを変更する必要があります...ただし、それはHTMLに少ないスペースを取るだろうと私は関数の中でそれをやって好む

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

としてもNGクリックします。

<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. あなたはとてもコントローラ$scope.showData = 1;
に初期化するために、より良いbuttonタグで
2. を使うべきではありませんタグを付け、他の入力フィールドではないためng-modelを使用する必要があります
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") 
};