2017-04-06 9 views
1

私は新しい角度です。バーガーメニューにng-clickを追加しようとしています。多くの投稿をチェックし、適切な解決策を見つけられませんでした。Angularjsのクリックが発射されず、多くの解決策を試しました

https://jsfiddle.net/0b89qxx9/1/

HTML

<div class="left-nav" ng-app="free"> 
    <div class="menuburger" ng-controller="menuburgerController" ng-click="menubClick" > 
    <div class="menuburger-layer"></div> 
    <div class="menuburger-layer"></div> 
    <div class="menuburger-layer"></div> 
    </div> 
</div> 

JS

var appFree = angular.module('free', []); 
appFree.controller('menuburgerController', function($scope) { 
    $scope.menubClick = function($scope) { 
    alert('menu b clicked !') 
    }; 
}); 

はお時間をいただき、ありがとうございます!

+1

を使用すると、 '' NGクリック= "menubClickが" 'へ' NGクリック= "menubClickを()" に変更する必要があります。 – Brian

+0

それは動作します! @ブライアン@ Anvesh reddy @ Nawsen –

答えて

1

既存の答えはそれを動作させる方法を教えてくれますが、それらのどれもが、なぜわかりますありません。あなたのコントローラでそれを定義したとおりに

$scope.menubClick = function(){ 
    // whatever 
} 

あなたがconsole.log($scope.menubClick)を実行するのであれば、これは、あなたが得るまさに関数の定義である:

function(){// whatever} 

関数定義は、オブジェクトのプロパティに格納できるストリングだけです。あなたの場合、オブジェクトはコントローラの$scopeです。しかし、あなたは関数の定義を望んでいない、あなたは関数を実行したい。あなたは変数に()を追加する必要がある理由は、(その定義を保持します)です名前:

<... ng-click="menubClick()> 

関数定義を使用するには、あなたが実際にいくつかの他のオブジェクトにこのスクリプトを渡すためにそれを使用することができます(間違ってではありません)。しかし、あなたが使用するものを理解するのが最善です。その結果、期待される結果が得られます。

注:あなたの関数は、引数を持っている場合、彼らは正確に渡されます。

$scope.someFunc = function(a,b,c){} 
// and, in view 

ng-click="someFunc(a,b,c)" 
+0

ありがとうたくさんありがとう!今私の心は明らかです。 –

1

クリックイベントは、かっこで呼び出す必要がある関数を呼び出しています。 ng-click = "menubClick()"それを動作させるために

1

使用このライン

<div class="menuburger" ng-controller="menuburger" ng-click="menubClick()" > 

NG-クリックすると、ブラケットとmenubClick()を呼び出す必要があります。

関連する問題