Why aren't the values from my directive being passed into the function?

Question

Here is my directive:

function OrderCloudRepeatOrderDirective() {
    return {
        restrict: 'E',
        templateUrl: 'orderHistory/templates/repeatOrder.tpl.html',
        controller: 'RepeatOrderCtrl',
        controllerAs: 'repeat',
        scope: {
            orderid: '=',
            includeBilling: '@',
            includeShipping: '@'
        }
    }

}

Here is view for my directive:

<div class="btn btn-success" ng-click="repeat.reorder(orderid, includeBilling, includeShipping)" >Reorder</div>

Here it is actually in the HTML:

<ordercloud-repeat-order orderid="order.ID" includeBilling="true" includeShipping="true"></ordercloud-repeat-order>

Then I simply have a function tied to the ng-click directive that performs the logic. I realize the '@' values come back as a string and have accommodated for that. The orderID value comes through fine but when I step through my function I see that the other two values are undefined. Any ideas?

Answer 1

By naming convention (the capitalization of subsequent words) Angular is adding a dash to your parameter names when used as the HTML attribute of your element.

• includeBilling is used as include-billing="true"
• includeShipping is used as include-shipping="true"

Note you defined the orderid scope variable as entirely lowercase which is why that one is working as is.