web-dev-qa-db-ja.com

ディレクティブでControllerAsを使用する

私はジョン・パパのangularJSスタイル・ガイド here を追いかけようとしており、controllerAsを使用するようにディレクティブを切り替え始めています。ただし、これは機能していません。私のテンプレートは、vmに割り当てられたものにアクセスできないようです。動作を示すこの非常に単純なplnkrの例を参照してください。

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular
    .module('app', []);

angular
    .module('app')
    .directive('test', test);

function test() {
    return {
        restrict: 'E',
        template: '<button ng-click="click">{{text}}</button>',
        controller: testCtrl,
        controllerAs: 'vm'
    }
}

angular
    .module('app')
    .controller('testCtrl', testCtrl);

function testCtrl() {
  var vm = this;
  vm.text = "TEST";
}
angularjsangularjs-directiveangularjs-controlleras
26
Ryan Langton

ControllerAs構文を使用する場合、通常のように$ scopeにアクセスしないと、変数vmがスコープに追加されるため、ボタンを次のようにする必要があります。

<button ng-click="click">{{vm.text}}</button>

_textの先頭にvm.が追加されていることに注意してください。

修正が適用されたPlunkのフォーク

Q：ディレクティブに属性として渡された属性にアクセスする方法を知っていますか？例：「scope：{text： '@'}」次に、コントローラーで$ scopeを使用し、vm.text = $ scope.textを設定する必要がありますか？

A：あなたが参照する記事には、 セクションy075 があり、まさにこのシナリオについて述べています。 bindToControllerを調べます。

return {
    restrict: 'E',
    template: '<button ng-click="click">{{text}}</button>',
    controller: testCtrl,
    controllerAs: 'vm',
    scope: {
        text: '@'
    },
    bindToController: true // because the scope is isolated
};

その後、vm.textにアクセスできるはずです。

37
Tr1stan

「controllerAs」を使用すると、コントローラーインスタンスエイリアス-vm（この場合）は、スコープの.vmプロパティとしてスコープに公開されます。

そのため、そのプロパティ（コントローラーのプロパティ）にアクセスするには、{{vm.text}}またはng-click="vm.click"を指定する必要があります。

4
New Dev

上記のように「controllerAs」構文を使用する場合、スコープはコントローラーの「this」参照にバインドされます。したがって、スコーププロパティを追加のオブジェクトリテラル（たとえば$ scope）に入れることなく、コントローラーにバインドされた新しい名前空間（'vm' here）を導入できます。したがって、コントローラーのスコープ内のすべてにアクセスするには、'vm'名前空間が必要です。

'<button ng-click="click">{{vm.text}}</button>'
1
Amardeep Kohli

controllerAs構文を使用する場合、使用する必要があります

bindToController: true

ディレクティブで機能します。

1
jitendra varshney