3

AngularJS で controllerAs 構文を使用する場合、ng-click などのハンドラーを定義するのに最適な場所はどこですか? コントローラーまたはスコープ (リンク関数で定義) で?

それで、あなたは使用しますか：

angular.module('app', []).
    controller('myDirective', function(){
        return {
            template: '<div><button ng-click=vm.onClick()></button></div>',
            controller: function(){
                var vm = this;

                vm.onClick = function(){
                    vm.myValue = vm.doSomethingFancy();
                };

                this.doSomethingFancy = function(){};
            }
        }
    });

または：

angular.module('app', []).
    controller('myDirective', function () {
        return {
            template: '<div><button ng-click=onClick()></button></div>',
            require: 'myDirecive',
            controller: function () {
                var vm = this;

                this.doSomethingFancy = function () {
                    vm.myValue = 'somethingfancy';
                };
            },
            link: function (scope, elem, attr, ctrl) {
                scope.onClick = function () {
                    ctrl.doSomethingFancy();
                }
            }
        }
    });

コントローラーは値を割り当てるだけで、イベント処理はリンク関数で行われるため、私は実際には2番目のものを気に入っています。

とにかく...あなたの考えを教えてください。

4

2 に答える 2

2

すべてが決まったルールというわけではありませんが、ガイドラインとして以下を使用できます。

関心の分離

  • コントローラーでモデル データを変更する
  • ディレクティブで DOM/UI を変更する

あなたのモデルで（スコープ上で）doSomethingFancy何か凝ったことをしますか？-- コントローラーを使いましょう。

ユーザー インターフェイスでdoSomethingFancy何か凝ったことをしますか? -- リンクで移動

レース条件

  • テンプレートのコンパイル前にコントローラ コードが実行される
  • テンプレートのコンパイル後にリンク関数が実行されます

これは完全に正しいわけではありません: prelink メソッドを使用することもできます。

常識

リンク メソッドに単純な小さな関数を配置してコードを読みやすくする場合は、リンク メソッドを使用します。設計しすぎて、いくつかのルールに従うだけでは良いことではありません:) MV* パターンはガイドラインです。

于 2015-04-10T12:46:31.193 に答える
1

要するに 、実際の違いはありません。コントローラー関数が先に実行されますが、通常は問題ありません。ハンドラーに外部サービスに依存する複雑なロジックがない場合 - それらをリンクに配置するか、そうでない場合 - コントローラーの方が優れています

短編小説： 同様の質問があり、より詳細に回答されています：

ディレクティブを定義するときの「コントローラー」、「リンク」、および「コンパイル」機能の違い

于 2015-04-10T12:47:36.610 に答える