Angular 1.5嵌套组件

Question

I have a container component that has 2 other controllers nested in it. I have them set up like so container -> component1 and container -> component2

My train of thought here was that I could transclude the HTML from my page into my container component. <container> <component1></component1> <component2></component2></container>

and then in the container HTML <div ng-init="vm.init()" ng-transclude></div>

Problem is, my container isn't running at all, I added a console log to its init function and no code is running. While component1 and component2 run their init's.

Seems to be a large amount of documentation covering older angular versions. Which tell me that they need to be nested like so <div ng-controller="parentController"> <div ng-controller="childController"></div> </div

How do you nest components into each other in 1.5?

Answer 1

Looks like the issue was that I was attempting to put a ng-init and ng-transclude in the same element. My guess is that ng-transclude overrides everything in the element it is on.

so I moved the ng-init to another element and its working fine

<div ng-transclude ng-init="vm.init()"></div>

changed to

<div ng-init="vm.init()"> <section ng-transclude ></section> </div>