When a directive called el2 is nested within another directive called el1, I face challenges in accessing variables that are "locally declared" in el1 (such as variables generated by ng-repeat, ng-init, etc) from el2.
For a practical example showcasing this issue, check out this fiddle. The code snippet is as follows:
var myApp = angular.module('myApp',[]);
// Defining the blue `el1` element containing a child `el2`:
myApp.directive('el1', function() {
return {
restrict: 'E',
link: function($scope) {
},
replace: true,
template: '<div ng-init="value1 = 1;">' +
'value1: {{ value1 }}' +
' <el2></el2>' +
'</div>',
scope: {
}
};
});
// Defining the green `el2` element:
myApp.directive('el2', function() {
return {
restrict: 'E',
link: function($scope) {
},
replace: true,
template: '<span ng-init="value2 = 2;">' +
'value1: {{ value1 || "UNDEFINED" }} value2: {{ value2 }}</span>',
scope: {
value1: '='
}
};
});
Is there a way to access value1 in the el2 directive without explicitly modifying the scope through the link function or controller?