Angular 1.5 嵌套组件绑定父值

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

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

提前致谢。

Answer 1

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

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

Note that the required controllers will not be available during the instantiation of the controller, but they are guaranteed to be available just before the $onInit method is executed!

在您的特定情况下，您可以更新 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。

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" 参数有效，但它在用作 child 的组件和用作 "require" 参数的组件之间创建了紧密绑定关系parent，消耗 child 功能。

更好的解决方案是使用组件通信，如图 here 所示。

基本上，你在child组件定义中定义一个绑定函数，像这样，

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

然后，在 parent 标记中，您提供一个函数来调用，

Parent HTML

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

最后，在 parent 控制器中，提供 selectUser 函数的实现。

这是一个有效的 Plunk。

Angular 1.5 嵌套组件绑定父值

Angular 1.5 Nested Component Bind parent Value

javascript

components

angularjs