Pass bindings to TemplateUrl in Angular's component

Question

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?

Ettaettari

Answer 1

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>

Here is a demo that shows this (thanks to @AWolf).

Wineshop

Here is a basic fiddle that's showing the usage of $ctrl in markup. estus added the answer faster so I just leave my prepared fiddle. – Duce

Could you answer the original question, please? I need to choose between two template urls depending on the value of one of the bindings passed as a parameter by the new UI-router... – Cabbagehead

@Cabbagehead Can you create a question that reflects your particular case? There's no good and way to do this. If there are no workarounds in your case, you will end up with requesting the template manually. – Wineshop