Angular 1.5 component not seeming to register

Question

I am currently writing an app using Angular 1.5's .component() method. My component code is as follows:

(function () {
  'use strict';

  function controllerFn($state) {

    console.log('controllerFn'); // this logs fine
    this.testVar = 'test me';

    this.onLoadComplete = function () {
      $state.go('main');
      console.log('load completed')
    };

  }

  APP.component('appPreloader', {
    controller: controllerFn,
    controllerAs: 'appPreloader'
  });

}());

and my template code is as follows:

<app-preloader class="page-preloader">
      {{appPreloader.testVar}}
      <preloader on-complete="appPreloader.onLoadComplete"></preloader>
</app-preloader>

The issue I am having is that appPreloader in my view is empty, and for example, {{appPreloader.testVar}} renders nothing.

I know this is related to .components()'s isolate scope, but I am pretty stumped as to how I should be setting this up for everything to work as should.

Any advice much appreciated.

Cheers

Answer 1

Unless you have template/templateUrl with component/directive, the content which resides inside directive/component that part of DOM would not compiled with component context. You should have that inner HTML in your component inside component template so that it would get compiled with component context.

Checkout Plunkr Here, here you can see inside app-preloader you can access the variables(context) of mainCtrl.

Whereas if you can check this plunkr I just moved the inner html of component directly to the component template property which started working.