Question

我是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>

我可以在com-bind中获得ct.name值。但无法在child-com-bind中获取cbsCusCompCntAs.name。（cbsCusCompCntAs是cbs-cus-comp控制器）

Working Plunker：https://plnkr.co/edit/axQwTn?p=preview

提前致谢。

Answer 1

在第一种情况下，您通过controllerAs直接引用控制器范围。

在角度1.5中使用组件时，您可以通过require获取父组件，这将使$onInit后var child = { require : {parentComp:'^cbsCusComp'}, template : 'Child : <b{{cbsCusChildCompCntAs.childComBind}}</b>', controller : cbsCusChildCompCnt, controllerAs: 'cbsCusChildCompCntAs' };的父级属性可用{/ 3}}：

请注意，所需的控制器在此期间不可用实例化控制器，但它们保证是就在$ onInit方法执行之前就可以使用了！

在您的特定情况下，您可以更新子组件以要求父级：

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

及其控制器以获取您需要的数据（我使用与您相同的名称来查看它的工作）：

start-figwheel!

更新的plunker是Components Documentation。

Answer 2

哇......真是个好例子...... 花了一段时间来分析它...所以，我写了自己的（我认为更具可读性）版本。我真的不知道如何使用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';
}

}）（）;

希望它有所帮助，问候，约翰尼

Answer 3

尽管使用“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。

Angular 1.5嵌套组件绑定父值

3 个答案: