angularjs-components

I'm trying to dynamically compile an Angular component using $compile , but the scope isn't passed to the components scope, but to the $parent scope instead. Here is a simple component that binds to a myTitle -attribute and presents it: app.component('myComponent', { bindings: { myTitle: '<' }, template: ` <div> <div>Doesn't work: {{ $ctrl.myTitle}}</div> <div>Works: {{ $parent.$ctrl.myTitle}}</div> </div>` }); Then in the controller (or directive, etc.) I compile it using $compile: app.controller('MainCtrl', function($scope, $element, $compile) { var template = '<my-component></my-component>'

Documentation for a change in $compile when upgrading from AngularJs 1.5 to 1.6 states: pre-assigning bindings on component/directive controller instances is disabled by default, which means that they will no longer be available inside the constructors. — AngularJS Developer Guide - Migrating to V1.6 - $compile The upgrade example in the documentation is as follows (shortened): Before .component('myComponent', { bindings: {value: '<'}, controller: function() { //... } }) After .component('myComponent', { bindings: {value: '<'}, controller: function() { this.$onInit = function() { // ... }; } }

I was wondering what is the best way to pass functions down through 2 or more levels of components? There's no simple way of skipping the function wrap when using '&' bindings? Here's an use case: angular.module('app', []).component('app', { controller: class AppController { doSomething (data) {} }, template: ` <sub-component on-do-something="$ctrl.doSomething(data)"> </sub-component> ` }) ps: I'm using ngRedux, so such scenario is very common EDIT: The problem is: for the code above to work, each inner component controller would look like this: .component('subComponent', { bindings: {