Angular 1.5 嵌套组件绑定父值答案

【问题标题】：Angular 1.5 Nested Component Bind parent ValueAngular 1.5 嵌套组件绑定父值
【发布时间】：2016-07-03 08:44:12
【问题描述】：

我是 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 控制器）

工作的Plunker：https://plnkr.co/edit/axQwTn?p=preview

提前致谢。

【问题讨论】：

标签： javascript angularjs components

【解决方案1】：

虽然使用“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。

【讨论】：

【解决方案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';
}

})();

希望对你有帮助，问候，强尼

【讨论】：

【解决方案3】：

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

在 Angular 1.5 中使用组件时，您可以通过 require 获取父组件，这将使父组件在 $onInit 之后可用，根据 Components Documentation：

请注意，在此期间所需的控制器将不可用控制器的实例化，但它们保证是在 $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;
  };
}

更新的 plunker 是 here。

【讨论】：