Angular 1.5 component not passing modal data

Question

Here is a plunker locted here:

https://plnkr.co/edit/V8lGOv44a95weFKipDYF?p=preview

app.component('exampleComponentTest', {
    bindings: {
        title: '='
    },
    template: '<h2>Title: {{exampleComponentTest.title}}</h2>',
    controller: function() {

    }
});

I created a custom component expecting it to accept the title attribute from the tag but it's not working as I expected. How do I get this to work properly?

Answer 1

While your code would have worked fine in the release candidates of 1.5, the naming convention for accessing the controller in component templates was changed in the final version. It now defaults to $ctrl .

app.component('exampleComponentTest', {
    bindings: {
        title: '='
    },
    template: '<h2>Title: {{$ctrl.title}}</h2>',
    controller: function() {

    }
});

Answer 2

By default the controller name bound in the view is $ctrl .

So if you want it to work, you should have the following template :

template: '<h2>Title: {{$ctrl.title}}</h2>'

If you want to use exampleComponentTest , you must add the property controllerAs in your component.

app.component('exampleComponentTest', {
    bindings: {
        title: '='
    },
    template: '<h2>Title: {{exampleComponentTest.title}}</h2>',
    controller: function() {

    },
    controllerAs: 'exampleComponentTest'
});