vbarbarosh vbarbarosh - 28 days ago 9
AngularJS Question

AngularJS: Link function does not get evaluated attribute value

I expect that function

step
will be evaluated and its result will be passed right to the
link
function. But, when
link
function get called it has nothing in
$scope.name
variable.
$args.checkStep
is empty also. Is is by design?

HTML

<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angularjs link function doesn not get evaluated paramter</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<br>
<br>

<div class="container">
<custom-include src="inc/homepage.html" prefix="homepage" suffix="" tag="release"></custom-include>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>

</body>
</html>


JS

(function () {

var app = angular.module('app', []);

app.directive('customInclude', function () {
return {
restrict: 'E',
scope: {
type: '@'
},
link: function ($scope, $elem, $attr) {
var prefix = $attr.prefix || '',
suffix = $attr.suffix || '';
$scope.step = function (s) {
console.log('step', prefix, s, suffix);
return prefix + s + suffix;
};
},
template: function (elem, attr) {
return `
<h2>Fusce lorem ante</h2>
<ul>
<li check-step="{{step(1)}}">Vestibulum efficitur</li>
<li check-step="{{step(2)}}">Arcu vitae iaculis sodales</li>
<li check-step="{{step(3)}}">Ligula ex interdum neque</li>
<li check-step="{{step(4)}}">Ac iaculis felis lectus in purus.</li>
</ul>
`;
}
};
});

app.directive('checkStep', function () {
return {
restrict: 'A',
scope: {
name: '@checkStep'
},
link: function ($scope, $elem, $attr) {
console.log('link', $scope.name);
}
};
});

})();


---- Update ----

Why did the following code works:

<li check-step="{{1+step(1)}}">Vestibulum efficitur</li>


But this doesn'nt:

<li check-step="{{step(1)}}">Vestibulum efficitur</li>


?

JSBin
Plunker

Answer

The attribute value is computed and put on the isolate scope after invocation of the link function. Use a $watch to see the eventual value:

app.directive('checkStep', function () {
    return {
        restrict: 'A',
        scope: {
            name: '@checkStep'
        },
        link: function ($scope, $elem, $attr) {
            //console.log('link', $scope.name);
            //use $watch
            $scope.$watch("name", function(newValue) {
                console.log('link', newValue);
            });
        }
    };
});

The DEMO on PLNKR