子组件中父组件的Angular（1.5）JS Access变量？

Question

我试图使用2个组件将票证列表构建的概念抽象为角度应用程序。

第一个组件 - ＆gt; （“智能组件”）使用$ http来提取数据并将其放入名为populatedList的数组中，该数组位于父（“gather”）组件控制器中。这部分有效。

第二部分 - ＆gt; （“哑组件”）对于来自父组件的populatedList var中的每个键值对，它应该创建一个列表项。 但是，即使我将其注册到同一模块，也永远不会调用第二个组件的onInit（）函数。 HTML模板代码在我通过浏览器查看时不会实例化。我的控制台上没有任何错误，所以我做错了什么？为什么我的第二个组件不起作用，即使我使用“require”从父组件获取信息。

我终于得到了我的子组件来查看pullTicketCtn控制器的填充“ticket”变量中的数据（通过屏幕截图显示），但是当我尝试console.log（vm.parentComp.tickets）或console.log时（ vm.tickets）它给了我一个空数组，即使我只是通过控制台执行console.log（vm.parentComp）和console.log（vm）以及SAW数组中的值。

所以现在console.log（vm.parentComp.tickets）和console.log（vm）都显示我的displayTicketsCnt和pullTicketsCnt控制器都有票据var，但我无法在子或console.log（）中访问它它。我究竟做错了什么？

pullticketCtn has the data/array

displayticketCtn has the data/array

第3张图显示了console.log（vm.parentComp）和的2个空数组[]和[] 的console.log（VM）;

     /*COMPONENTS*/
     /*Parent/smart */
   var gather = {  
    controller:pullTicketsCnt,
    controllerAs:'pullTicketsCntAs',
    bindings: {
        tickets: '=',
        client_id:'='
    }      
};

/* Child/dumb component*/
var  list =  {  
    transclude  : true,
    require:{
        /* Require the parent component (^ means its an ancestor)*/
        parentComp:'^gather'
    },
    template: [
        '<ul class="main_list">',
         '<li ng-repeat:"(key, value) in displayTicketsCntAs.tickets">',
        '<span>{{key}}</span>',
     '</li>',
        '</ul>',
    ].join(''),
    controller:displayTicketsCnt,
    controllerAs:'displayTicketsCntAs',
};

/*CONTROLLERS */
function pullTicketsCnt($http){

        $http ...
        this.tickets=temp.slice(0); //Get the array of populated data
        ...
    }
}




 function displayTicketsCnt(){
  var vm = this;
        vm.$onInit = function(){
           console.log('LIST-DATA component initialized');
           console.log(vm.parentComp);
           console.log(vm);
           vm.populated= (vm.parentComp.tickets).slice(0);
           /*The two lines below print [] the empty arrays */
           console.log(vm.parentComp.tickets); 
            console.log(vm.populated);
        }




}


function listCtrl(){
    this.tickets=[];
}

/*Declarations */

var app = angular.module('ticket', [])
.controller('listCtrl',listCtrl) /* Assume this is correct*/
.component('gather',gather) 
.component('list',list);

/* HTML*/ 
 <div ng-app="ticket"  ng-controller="listCtrl as vm" class="ticket_controller">
           <gather tickets="vm.tickets">
             <list populated="pullTicketsCntAs.tickets"></list>
            </gather>
        </div>  

Answer 1

transclude：true，应该是collect not list的一部分。

您可以使用

访问父控制器

要求：{     父母：'^^ gather'   }，