7

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>

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

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

4

2 に答える 2

10

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

<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 で見つけることができます。

于 2016-11-11T21:25:17.380 に答える
4

バインドしたい変数を明示的に指定する必要がありました。

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

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

于 2016-11-15T17:04:50.807 に答える