angularjs passing variables to components through html

Question

I currently have this component:

angular.module('myApp.viewVendor').
component('modifyOrder', {
templateUrl: 'app/view-vendor/confirm-order/modify-order.template.html',
bindings: {orderId: '<'},
controller: ['OrdersApi',
    class ModifyOrderComponent {
        constructor(OrdersApi) {
            this.OrdersApi = OrdersApi;
            this.vendorNotes = null;
            console.log(this.orderId)
        }
    }
]
});

And when I use this in my html:

<modify-order orderId={{$ctrl.orderId}}></modify-order>

I get 'undefined' printed to the console. Originally I was trying to pass it into an $mdDialog but that does not work either like so:

modifyOrder(ev) {
            this.$mdDialog.show({
                template: '<modify-order orderId="' + this.orderId + '"></modify-order>',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose:true
            })
                .then(function(answer) {

                }, function(error) {

                });
        }

It does not work with normal html or within the mdDialog. At this point I cannot tell if it is a mistake of syntax or something else.

In orderId={{$ctrl.orderId}} $ctrl refer to Controller of the Component embedding yours. Be careful with this, use the controllerAs. Btw, I think orderId="$ctrl.orderId" is a better syntax ;) — HollyPony
– HollyPony, Commented Apr 29, 2017 at 15:58

dinamix · Accepted Answer · 2017-04-29 16:33:25Z

1

This is a known bug in angular:

https://github.com/angular/material/issues/8409

answered Apr 29, 2017 at 16:33

dinamix

6618 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

angularjs passing variables to components through html

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related