Jon Harding Jon Harding - 4 months ago 20
AngularJS Question

Pass bindings to TemplateUrl in Angular's component

My component object looks like this:

var options = {
bindings: {
title: '<',
rows: '<'
},
controller: registers,
templateUrl: function ($element, $attrs) {
return '/app/dashboard/registers/register.html';
}
};


I need access to the bindings
title
and
rows
in my
register.html
markup. I understand
$element
and
$attrs
but I'm not quite sure how to inject that into a templateUrl which is a string reference to an HTML file.

I would like to be able to use those values in the template as such:

<p>Title: {{vm.title}}</p>
<p>Rows: {{vm.rows}}</p>


Can someone point me in a direction where the templateUrl can use the curly braces to embed the values of the bindings into the markup?

Answer

It isn't related to templateUrl function, no extra actions should be performed there.

If no controllerAs option is specified, controller identifier defaults to $ctrl, not vm. Scope properties should be available in template as

<p>Title: {{$ctrl.title}}</p>
<p>Rows: {{$ctrl.rows}}</p>