Currently, we are encountering some unusual behavior regarding the binding of a function to a directive scope. Check out an example on JSBin.
Here's the scenario - we have a directive with a scope object structured like this:
scope: { fn: '&', val: '@' }
The directive showcases the result of fn in two instances. Firstly, we display the evaluated result in the template, then we exhibit the outcome when evaluated in the link function:
<div><code>fn (&)</code>: {{fn()}}</div>
<div><code>fn result ($scope.result = $scope.fn()) </code>: {{result}}</div>
Subsequently, we utilize this scope in another directive:
app.directive('rootDirective', function() {
function link($scope, $elem, $attrs) {
$scope.name = 'directive with scope';
}
return {
scope: 'isolate',
replace: true,
restrict: 'E',
link: link,
template: [
'<div add-scope-directive="">',
' <div ng-repeat="n in [1]">',
' <sub-dir val="{{val}}" fn="fn()" name="{{n}}"></sub-dir>',
' </div>',
' <sub-dir val="{{val}}" fn="fn()" name="{{name}}"></sub-dir>',
'<div>'
].join('\n')
};
});
Within the top node of this directive, another directive called add-scope-directive is applied. In this directive, we define fn which returns "add-scope-directive - fn".
Expectantly, we anticipate the result of fn ("add-scope-directive - fn") to remain consistent across the directive. Nonetheless, the result from the link function of the child directive 'sub-dir' differs when it's not used in a repeater - instead deriving from the function in the MainCtrl.
Our query is - are our presumptions accurate, signaling a potential bug? Or should we anticipate the observed behavior, and if so, what is the rationale behind it?