web-dev-qa-db-ja.com

AngularJS 1.5-コンポーネントに双方向バインディングを設定する方法

Angular 1.Xのディレクティブは、デフォルトで双方向バインディングを持つように設定されています。コンポーネントにはデフォルトでスコープが分離されています。ビューは次のようになります。

<div class="my-view">
    {{controllerVariable}}
</div>

上記をディレクティブとして設定した場合、controllerVariableは次の状況で正しくロードされます。

<div ng-controller="myController">
    <my-view></my-view>
</div>

しかし、以下を使用してコンポーネントとして設定した場合：

myApp.component('myView', {
    templateUrl: '/path/to/view',
    bindings: '='
});

その場合、変数値は表示されません。追加しようとしました$ctrlを変数に：

<div class="my-view">
    {{$ctrl.controllerVariable}}
</div>

しかし、これは値も表示しません。

ここで何が欠けていますか？

angularjsangularjs-scopeangular-components
7
Lloyd Banks

バインドしたい変数を明示的に述べる必要がありました：

myApp.component('myView', {
    templateUrl: '/path/to/view',
    bindings: {
        controllerVariable: '@'
    }
});

また、controllerVariableは文字列なので、@記号バインディングを使用する必要がありました。

4
Lloyd Banks

ディレクティブからコンポーネントに値を渡す必要があります。

<my-view passed-var='ctrl.passedVar'></my-view>

そしてコンポーネント内：

myApp.component('myView', {
    templateUrl: '/path/to/view',
    bindings: {
        passedVar: '='
    },
    controller: function () {
      var vm = this;
      console.log(vm.passedVar);
    }
});

その後、例のようにコンポーネントでアクセスできるようになります

情報を処理するサービスを使用したり、ディレクティブのコントローラーにコンポーネントがアクセスできるようにするrequireを使用するなど、他にもいくつかの方法があります。上記の方法とその他の方法については、 https://docs.angularjs.org/guide/component を参照してください。

9
Gordnfreeman