5

angularのスタイルガイドに従おうとしていますが、thisinstedを使用する必要があると書かれていscopeます...

スタイルガイド

を使用できる場合、誰かが私に説明してもらえますthisか?

これが私の試みです.....私が間違っていることは何ですか?

フォームを切り替えようとしています....ここに私のhtmlコードがあります:

<a href="#" ng-click="formEdit(x)"  ng-if="!x.formEditShow">REPLY</a>
<a href="#" ng-click="formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>

クラシック$scopeでは、コントローラー内で次のようにします。

$scope.formEdit = function(data){
data.formEditShow = !data.formEditShow;
}

しかし、thisそれは次のように見えるはずです（しかし動作しません）：

var vm = this;
vm.formEdit = formEdit;

function formEdit(data){
    data.formEditShow = !data.formEditShow;
}

誰でもこれを理解するのを手伝ってもらえますか?

4

2 に答える 2

5

thisの代わりにコントローラーで (context) を使用している場合、コントローラー変数にアクセスするには、ページで html を定義する$scopeときに使用する必要があります。controllerAsビューにバインドされた変数を使用したいときはいつでも、コントローラーthisを使用できaliasます。以下vmはコントローラーのエイリアスです。

ng-controller="myController as vm"

次に、div内の変数であるコントローラーメソッドにアクセスするng-controllerときに、次のようなコントローラーのエイリアスを使用する必要がありますng-click="vm.formEdit(x)"

HTML

<a href="#" ng-click="vm.formEdit(x)"  ng-if="!x.formEditShow">REPLY</a>
<a href="#" ng-click="vm.formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>
于 2015-09-27T12:37:30.817 に答える
1

コントローラーの名前がFormControllerであると仮定します。

最初の一歩

最初のステップは、ルート (ng-controllerルーターを使用していない場合は値) を次のように宣言することです。

FormController as form // name it semantically instead of a generic name

上記の設定により、 angular はformのインスタンスとしてエイリアスされますFormController。

HTML テンプレート

次に、指定したエイリアス ( form )に従って html テンプレートを調整します。質問に関する重要な部分のみを保持するように、html を変更しました。form.reply関数とを呼び出していますform.close。

<a href="#" ng-click="form.reply()">REPLY</a>
<a href="#" ng-click="form.close()">CLOSE</a>

コントローラ宣言

上で書いたことによると、コントローラーは次のようになります。

myApp.controller('FormController', function () {
    var vm = this;

    vm.reply = function () {
        // ...
    }

    vm.close = function () {
        // ...
    }
}

var vm = this;線に注意してください。理論的には、この行を削除して、関数replyとオブジェクトを格納できます。ただし、コンテキストによっては、同じオブジェクトを参照していません。コールバック関数では、コントローラーではなくコールバック関数を参照します。そのため、コントローラーを参照する をキャッシュしています。コントローラーがビューを制御するため、通常、この参照にはviewmodelという名前を付けます。closethisthisthisthisvm

于 2015-09-27T12:41:17.090 に答える