I am encountering an issue with Angular JS related to two directives that I have implemented.
angular.module('myModule', [])
.directive('myFirstDirective', function(){
return {
link: function (scope, elem, attr) {
var myAttributeToPass = attr.myFirstDirective;
scope.myAttr = myAttributeToPass;
},
controller: 'MyFirstController'
}
})
.controller('MyFirstController', function($scope){
this.returnTheParameter = function(){
return $scope.myAttr;
}
})
.directive('mySecondDirective', function(){
return {
require : ['ngModel', '^myFirstDirective'],
link : function($scope, element, attrs, ctrls) {
var ngModel = ctrls[0];
var myFirstCtrl = ctrls[1];
var theParamOfFirst = myFirstCtrl.returnTheParameter();
}
}
});
I initialize my first value with a string :
<div my-first-directive="foobar"> (... => my second directive is inside) </div>
The issue arises in the life cycle as the returned value is consistently undefined since the controller is invoked before the linking process. When attempting to use an isolated scope like so:
scope: {
"myProp": "@myFirstDirective"
}
It functions properly, but I prefer not to isolate the scope...
Do you have any suggestions or solutions?
Thank you very much!