9

双方向バインディングの値を更新しないように見える Angular 1.5.3 コンポーネントがあります。私のコントローラーは、コンポーネントに渡される値を変更します。

コンポーネントは、コントローラーの初期化時にデフォルト値を読み取るように見えますが、その後は一方向にバインドされているかのように動作します。バインドされた値に対する将来の変更は、コンポーネントに読み込まれません。

これを同様の機能ディレクティブから変換したところ、双方向バインディングは問題なく機能しました。変更時イベントまたは同様のイベントはありますか? コンポーネントが不足していますか? コンポーネント テンプレートがバインドされた値を読み取れるように、特定のロジックをコンポーネント コントローラーに追加する必要がありますか?

コンポーネントを実装するメニュー テンプレート:

<div data-ng-controller="MenuCtrl as ctrl">
    <!-- below shows ctrl values updating when controller changes them -->
    <pre>{{ctrl.menu}}</pre>
    <pre>{{ctrl.settings}}</pre>
    <!-- changes not reflected in component -->
    <my-sub-menu menu="ctrl.menu" settings="ctrl.settings"></my-sub-menu>
</div>

サブメニュー コンポーネント:

(function () {
'use strict';
angular
    .module('myApp.components')
    .component('mySubMenu', {
        bindings: {
            menu: '=',
            settings: '='
        },
        templateUrl: 'subMenu.component.html',
        controller: function () {
            // implementation that reads menu and settings
        }
    });
})();

簡略化されたサブメニュー コンポーネント テンプレート:

<ul>
    <li ng-show="settings.menu1"><a href="/">Menu 1</a></li>
    <li ng-show="settings.menu2"><a href="/">Menu 2</a></li>
    <li ng-show="settings.menu3"><a href="/">Menu 3</a></li>
</ul>
<!-- changes to bound values not reflected in component template -->
<pre>{{menu}}</pre>
<pre>{{settings}}</pre>
4

1 に答える 1

9

コンポーネントのエイリアスがない限り、デフォルトのエイリアスを としてcontroller使用できます。コンポーネント定義オブジェクトにオプションを設定することでオーバーライドできます。controllerAs$ctrlcontrollerAs

マークアップ

<ul>
    <li ng-show="$ctrl.settings.menu1"><a href="/">Menu 1</a></li>
    <li ng-show="$ctrl.settings.menu2"><a href="/">Menu 2</a></li>
    <li ng-show="$ctrl.settings.menu3"><a href="/">Menu 3</a></li>
</ul>
<pre>{{$ctrl.menu}}</pre>
<pre>{{$ctrl.settings}}</pre>
于 2016-04-01T15:59:57.877 に答える