javascript – Angular 1.5嵌套组件绑定父值

前端之家收集整理的这篇文章主要介绍了javascript – 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>

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

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

提前致谢.

解决方法

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

在角度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!

在您的特定情况下,您可以更新子组件以要求父组件:

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.

原文链接:https://www.f2er.com/js/159677.html

猜你在找的JavaScript相关文章