web-dev-qa-db-ja.com

Angular 1.5ネストされたコンポーネントバインド親値

Angularjsは初めてです。 angular 1.5ネストされたコンポーネントです。親コンポーネントのプロパティを子コンポーネントにバインドできますか？.

例：

<div ng-app='cbsApp' ng-controller='cbsCnt as ct'>
    <cbs-cus-comp com-bind='ct.name'>
        <child child-com-bind='cbsCusCompCntAs.name'></child>
    </cbs-cus-comp>
</div>

Ct.name値をcom-bindで取得できます。ただし、child-com-bindでcbsCusCompCntAs.nameを取得できません。 （cbsCusCompCntAsはcbs-cus-compコントローラーです）

ワーキングプランカー： https://plnkr.co/edit/axQwTn?p=preview

前もって感謝します。

javascriptangularjscomponents
8
Siva

最初のケースでは、controllerAsを介してコントローラースコープを直接参照しています。

angular 1.5でコンポーネントを使用する場合、requireを介して親コンポーネントを取得できます。これにより、$onInitの後に親のプロパティを使用できるようになります コンポーネントのドキュメント ：

必要なコントローラーは、コントローラーのインスタンス化中は使用できませんが、$ onInitメソッドが実行される直前に使用できることが保証されています。

特定のケースでは、childコンポーネントを更新して親を要求できます。

var child = {
    require     :  {parentComp:'^cbsCusComp'},
    template    :  'Child : <b{{cbsCusChildCompCntAs.childComBind}}</b>',
    controller  :  cbsCusChildCompCnt,
    controllerAs:  'cbsCusChildCompCntAs'
    };

必要なデータを取得するためのコントローラー（私はそれが機能することを確認するためにあなたと同じ名前を使用しました）：

function cbsCusChildCompCnt(){
  this.$onInit = function() {
    this.childComBind = this.parentComp.name;
  };
}

更新されたプランカーは here です。

7
bosch

「require」パラメーターを使用しても機能しますが、「require」パラメーターを使用する子として機能するコンポーネントと、子機能を使用する親として機能するコンポーネントとの間に緊密な関係が作成されます。

より良い解決策は、示されているようにコンポーネント通信を使用することです here 。

基本的には、次のように子コンポーネント定義でバインディング関数を定義します。

angular.module('app').component('componentName', {
templateUrl: 'my-template.html',
bindings: {
       myFunction: '&'
},
controller: function() { // Do something here}
});

次に、親マークアップで、呼び出す関数を提供し、

親HTML

<user-list select-user="$ctrl.selectUser(user)">
</user-list>

最後に、親コントローラーで、selectUser関数の実装を提供します。

これが動作する Plunk です。

4
Latin Warrior

なんて素晴らしい例でしょう...分析にしばらく時間がかかりました...それで、私は自分の（もう少し読みやすいと思う）バージョンを書きました。 Plunkerの操作方法が本当にわかりません...だから、ここにコードがあります... index.htmlファイルから抽出

<div ng-controller='appCtrl as ctrl'>
    <parent bind-id='ctrl.name'>
        <child bind-toid='parentCtrlAs.name'></child>
    </parent>
</div>

。jsファイル

(function () {
'use strict';

var 
    parentComponent =   
    {
        bindings    :   
        {
            bindId:'='
        },
        controller  : parentCtrl,
        controllerAs: 'parentCtrlAs',
        restrict    : 'A',
        transclude  : true,
        templateUrl : 'parent.html',
    };

var 
    childComponent =    
    {
        controller  : childCtrl,
        controllerAs: 'childCtrlAs',
        restrict    : 'A',
        require     :
        {
            myParent    :'^parent'
        },
        templateUrl :   'child.html',
};


angular
    .module('app', [])
    .controller('appCtrl'   , appCtrl)
    .component('parent'     , parentComponent)
    .component('child'      , childComponent);


function appCtrl(){
    this.name = 'Main..';
}

function childCtrl(){
    this.$onInit = function() {
        this.bindToid = this.myParent.name;
    };
}

function parentCtrl(){
    this.name   =   'Parent Component';
}

}）（）;

それが役に立てば幸い、よろしく、ジョニー

4
Johnny Driesen