1

私はスーパーヒーロー フレームワークの AngularJS にまったく慣れていません。そのため、管理者が選択チェックボックスで満たされたテーブルを介して Web サイト内の他のユーザーのアクセス許可を変更できるようにする単純な SPA を開発しようとしていたときに、問題が発生しました。定義$scope.checkedしたのは、管理者が選択したユーザーの数$scope.mainCheckBoxと、3 つの状況のそれぞれで主要なチェックボックス (Gmail のものなど) の正しい CSS クラスを保持するユーザーを把握できるようにするためです: すべてのユーザー選択されている、ユーザーが選択されていない、および部分的に選択されています。この単純なロジックは次のようになります。

$scope.updateMainCheckBox = function(){

    if(this.checked==this.users.length) this.mainCheckBox = "qm-icon-checked";
    else if(!this.checked) this.mainCheckBox = "";
    else this.mainCheckBox = "qm-icon-minus";

};

他のチェックボックスの ng-click イベント コールバックの最後でこれを実行すると、このコードはクラスを正しく選択できましたが、クラスをmainCheckBox. すべてを変更this.mainCheckBoxする$scope.mainCheckBoxと、すべてがうまくいき、ページは期待どおりに動作します。

したがって、バニラ Jsthisはオブジェクトへの参照であることはわかっていwindowますが、AngularJS には独自のイベント処理ループがあるため、現在はそうではないと思います。とが見つかった$scopeので、への参照であると予想していましたが、明らかにそうではありません。それで、ここで何が起こっているのですか？また、これを実装するためのより「角度のある」方法はありますか?checkedusers

4

1 に答える 1

2

あなたはほとんど正しいです-あなたの関数の場合this、スコープを参照しました。しかし、それは参照しませんでした$scope; 代わりに、$scopeの子の 1 つを参照しました。

これを試してください: いくつかのステートメントを追加して変数console.logの ID をログアウトし、次にコールバックでスコープの ID を追加します。$scopethis

$scope.updateMainCheckBox = function(){
  console.log('$scope:', $scope.$id);
  console.log('this:', this.$id);
  // ...
};

IDが違うことがわかります。これは、ngRepeatディレクティブが親からプロトタイプとして継承するスコープである子スコープを作成するためです。これは、そのスコープの値に直接割り当てると、親スコープに到達しないことを意味します$scope。

Mark Rajcokによる優れた (そして長い) "The Nuances of Scope Prototypal Inheritance"を読むことを強くお勧めします。子スコープでこの一見奇妙な動作が見られる理由を説明します。( AngularJS wiki にもコピーがあります。)

于 2013-05-12T02:30:25.007 に答える