AngularJSがコードを別に保持する際に混乱を招くMVC

Question

AngularJSを使用しているときに、DOM /ファイル構造全体でMVC分離コードについて少し混乱しています。

私はプロジェクトで仕事をするときに最もよく学びます。今、私は、ボタンが押されたときに整数を加算する単純なカウンタに取り組んでいます。私は働く一つの方法しか持っていないし、もっと良い方法を考えている。

今私はfrom AngularJS documentation itselfで作業しているコードでこれを動作させています。

これを行うには、これが最善の方法ではないと私はおそらく夢中に思っています。私の理解から、ng-clickは、コントローラー内の特定のコード範囲をトリガーする指令です。

DOM内でインクリメントコードがインラインになっているのはなぜですか？ MVCとして、コードは、メインコントローラのような場所にはないように整理する必要がありますか？js？インクリメント+ =関数をカウンタオブジェクトに入れようとしましたが、動作させることができませんでした。jsFiddleを参照してください。

<div ng-controller="MyCtrl"> 
    <button ng-click="char">Charged</button> 
     <span>Total: {{ count }}</span> 
</div> 

私は、式、フィルタ、およびディレクティブに基づいてAppsビュー情報を取得します。ディレクティブはHTMLにバインドして、HTMLの動作を変更します。クリック（ディレクティブセレクタ付き）コントローラは、AngularJSをトリガして、ページ全体をリロードすることなくデータを更新する機能を実行します。

モデルは全体の設定です。 ビューは、式、フィルタ、およびディレクティブです。 コントローラはHTMLディレクティブに必要なオブジェクトと関数を持つJSファイルのコードです。

ドキュメントの例では、指示ボタンタグ内にNGクリックでインラインコントローラーを持っている...

誰もが何かアドバイスはありますか？ありがとう:)

Answer 1

コントローラを介しての角度であることを行うための正しい方法があります：。 http://jsfiddle.net/zhxztysy/1/

あなたのフィドルはこの

<div ng-controller="MyCtrl"> 
    <button ng-click="charge(5)">Charged</button> 
     <span>Total: {{ count }}</span> 
</div> 
function MyCtrl($scope) { 
     $scope.count = 0; 
      $scope.charge = function (char) { 
     $scope.count += char; 
    }; 
} 

に変更し、この

<div ng-controller="MyCtrl"> 
    <button ng-click="char">Charged</button> 
     <span>Total: {{ count }}</span> 
</div> 

function MyCtrl($scope) { 
     $scope.count = 0; 
      $scope.count = Function (char) { 
     $scope.count += char; 
    };} 

のようでした

このようにすることもできます

<div ng-controller="MyCtrl"> 
    <button ng-click="charge()">Charged</button> 
     <span>Total: {{ count }}</span> 
</div> 
function MyCtrl($scope) { 
     $scope.count = 0; 
     $scope.chargingCount = 5; 
     $scope.charge = function() { 
     $scope.count += $scope.chargingCount; 
    }; 
} 

あなたのjsfiddleを編集しました。