Angular Component Ausdruck Bindung ohne Vorlage

Question

Ich versuche, meine Scope-Daten aus meiner Komponente ausgeben, aber es ist schwer herauszufinden, wie es ohne eine lokale Vorlage zu tun.

Aus verschiedenen Gründen muss ich die Auszeichnungs ind die HTML-Datei haben und nicht

mit der js Last analysiert in werden Dies ist der Dummy-Code bisher: (codepen: http://codepen.io/anon/pen/qNBBRN)

HTML:

<comp> 
    {{ $ctrl.testing }} 
</comp> 

Nicht funktionierende JS-Code:

angular 
     .module('Test', []) 
     .component('comp', { 
     controller: myCtrl, 
     }); 

function myCtrl() { 
    var model = this; 
    model.testing = '123'; 
} 

document.addEventListener('DOMContentLoaded', function() { 
    angular.bootstrap(document, ['Test']); 
}); 

Und das ist, was ich auch vermeiden will, obwohl es funktioniert:

angular 
    .module('Test', []) 
    .component('comp', { 
    controller: myCtrl, 
    template: '{{ $ctrl.testing }}', 
    }); 

function myCtrl() { 
    var model = this; 
    model.testing = '123'; 
} 

document.addEventListener('DOMContentLoaded', function() { 
    angular.bootstrap(document, ['Test']); 
}); 

Answer 1

Eine Lösung zu dem, was Sie brauchen, ist mit Bindungen der Komponente inneren privaten Rahmen mit dem übergeordneten Bereich beziehen.

JS

angular 
    .module('Test', []) 
    .component('comp', { 
    controller: myCtrl, 
    bindings: { 
     testing: '=' 
    } 
    }); 

function myCtrl() { 
    var model = this; 
    model.testing = '123'; 
} 

HTML

<comp testing="$ctrl.testing"> 
    {{ $ctrl.testing }} 
</comp> 

Plunkr Beispiel: http://plnkr.co/edit/jLeDyBTFA9OU7oqK5HSI?p=preview