Angular component expression binding without template

Question

I'm trying to output my scope data from my component, but having a hard time figuring out how to do it without a local template.

For different reasons I need to have the markup ind the HTML file and not being parsed in with the js load

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

HTML:

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

Non-working 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 this is what I want to avoid even though 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']);
});

Tried injecting $scope into myCtrl, with no new results controller: ['$scope', myCtrl] ... function myCtrl($scope)(){} — Rudi Ørnhøj
– Rudi Ørnhøj, Commented May 31, 2016 at 5:56

Daniel Higueras · Accepted Answer · 2016-06-03 09:33:47Z

1

A solution to what you need is using bindings to relate the component's inner private scope with the parent scope.

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

answered Jun 3, 2016 at 9:33

Daniel Higueras

2,40423 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rudi Ørnhøj Over a year ago

That's definantly an improvement, but not quite there yet (I might be to ignorant) What if I want something like this? plnkr.co/edit/9brxq887UBjjrlQabZt2?p=preview

Rudi Ørnhøj Over a year ago

+1for getting me this step - however I do need to get to what the plnkr I linked to shows before accepting the answer.

Daniel Higueras Over a year ago

I don't understand what you need. If you need more than one variable, just declare the binding for each one: plnkr.co/edit/7mZT7sd23AiMRUR3aQkc?p=preview

Rudi Ørnhøj Over a year ago

This is actually what I needed - but I did hope I could get alle variables in my controller's scope but only by binding the controller to the component element or by simply declaring the component.

Collectives™ on Stack Overflow

Angular component expression binding without template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related