Angular binding component expression without template

Question

I am trying to derive data of my size from my component, but I can hardly figure out how to do this without a local template.

For various reasons, I need the markup to appear in the HTML file and not be parsed using js load

This is dummy code so far: (codepen: http://codepen.io/anon/pen/qNBBRN )

HTML:

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

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

And I want to avoid this, even if it works:

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

The solution to what you need is to use bindings to bind the component's internal private area to the parent area.

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: http://plnkr.co/edit/jLeDyBTFA9OU7oqK5HSI?p=preview