I am trying to pass a variable from my controller to a custom directive in AngularJS.
Controller:
angular.
module('orderOverview').
component('orderOverview', {
templateUrl: 'home-page/order-overview/order-overview.template.html',
controller: ['Orders',
function ControllerFunction(Orders) {
var self = this;
// Order Info
Orders.getOverview().$promise.then(function(data) {
self.LineItems = data;
});
// Order Info
}
]
});
Directive
angular.
module('myApp').
directive('gvInitializeOrderStatus', function() {
return {
scope: {
field: '@',
myData: '='
},
link: function(scope, element) {
console.log('field:', scope.field);
console.log('data:', scope.myData);
}
}
});
HTML
<div gv-initialize-order-status field="InquiryDone" myData="$ctrl.LineItems">
<span class="tooltiptext">Inquiry</span>
</div>
Although field logs properly when the page is loaded, data appears as undefined.
I have attempted various methods but am unable to resolve this issue. This should work as I intend it to in my mind.
In another section of the same template, I successfully passed data to a directive using ng-repeat. However, in this case, I do not want to use ng-repeat.
Successful ng-repeat HTML with passed data
<li ng-repeat="lineItem in $ctrl.LineItems">
<div class="status-circle"
ng-click="toggleCircle($event, lineItem, 'InquiryDone')"
field="InquiryDone" item="lineItem" gv-initialize-statuses>
<span class="tooltiptext">Inquiry</span>
</div>
</li>
In my other directive, gv-initialize-statuses, I utilized a similar concept in my scope object and used something like scope: { 'field': '=' } which worked effectively.
How can I achieve this without relying on ng-repeat?