Angular 1.5 Komponente scheint nicht zu registrieren

Question

Ich schreibe gerade eine App mit Angular 1.5 .component() Methode. Mein Komponentencode ist wie folgt:

(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' 
    }); 

}()); 

und mein Template-Code wird wie folgt:

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

Das Problem, das ich habe ist, dass appPreloader meine Ansicht leer ist, und zum Beispiel {{appPreloader.testVar}} macht nichts .

Ich weiß, dass dies mit .components() 's isolieren Zielfernrohr in Verbindung steht, aber ich bin ziemlich ratlos, wie ich dies für alles einrichten sollte, wie es sollte.

Jeder Rat sehr geschätzt.

Prost

Answer 1

Es sei denn, Sie template/templateUrl mit component/directive haben, die Inhalte, die würden innerhalb directive/component, die Teil des DOM residiert nicht mit Komponentenkontext zusammengestellt. Sie sollten dieses innere HTML in Ihrer component Inside-Komponente template haben, damit es mit Komponentenkontext kompiliert wird.

Checkout Plunkr Here, hier können Sie innerhalb app-preloader sehen Sie können die Variablen (Kontext) von mainCtrl zugreifen.

Wohingegen, wenn Sie this plunkr überprüfen können, habe ich nur den inneren HTML der Komponente direkt in die Komponente template Eigenschaft verschoben, die zu arbeiten begann.