AngularJS: Link function does not get evaluated attribute value -
i expect function step evaluated , result passed right link function. but, when link function called has nothing in $scope.name variable. $args.checkstep empty also. is 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 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 following code works:
<li check-step="{{1+step(1)}}">vestibulum efficitur</li> but doesn'nt:
<li check-step="{{step(1)}}">vestibulum efficitur</li> ?
the attribute value computed , put on isolate scope after invocation of link function. use $watch see 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
Comments
Post a Comment