In a scenario where I have a custom directive nested inside a parent div with a controller that sets a variable value to its scope, like this:
html
<div ng-controller="mainCtrl">
<p>{{data}}</p>
<myDirective oncolour="green" offcolour="red" data="data"></myDirective>
</div>
javascript
app.controller("mainCtrl", function($scope){
$scope.data= 1;
});
app.directive("myDirective", function() {
return {
restrict: 'E',
scope: {
oncolour: '@',
offcolour: '@',
data: '='
},
template: '<p>{{data}} is {{state}}</p>',
controller: function($scope){
console.log($scope.data); //undefined!
/* logic to set $scope.state depending on $scope.data */
};
};
});
I am able to pass the value of data to the directive because I can see the value of {{data}} in the template being parsed accurately.
However, the issue arises when $scope.data appears as undefined in the directive's controller. It is crucial for me to implement certain logic there based on this variable, for instance, if data==1, then state="on", else state="off", so that I can correctly apply the oncolour and offcolour.
Does anyone have any suggestions on how this can be accomplished?