javascript - Bound attribute empty in an angular directive -
i've simple directive
'use strict'; angular.module('ludaooapp') .directive('rating', function () { return { templateurl: 'app/rating/rating.html', restrict: 'ea', link: function (scope, element, attrs) { scope.mark = attrs.mark; console.log(attrs); }; })
this directive log attributes of directive.
here how use directive :
<rating mark="{{game.rating}}" style="font-size: 30px"></rating>
and here result of web inspector :
as can see, mark empty mark=""
on first line. after, filled in value mark="4.16"
.
the result if console.log(scope.mark)
, see 0 instead of 4.16.
i think it's because 4.16 retrieved database and, code executed before {{game.rating}}
initialized in controller.
so question is, how deal problem ? , how access "4.16" ?
try use angular promises in service, receives data api, , pass state of deffered object ng-if - decision can set aside rendering of rating directive.
simple example:
<div ng-app="ludaooapp"> <div ng-controller="gamectrl game"> <rating mark="{{game.rating}}" ng-if="game.$promise.status"></rating> </div> </div> (function(angular){ "use strict"; angular.module('ludaooapp',[]) .controller('gamectrl', ['$timeout', '$q', function($timeout, $q){ var game = this; var deferred = $q.defer() game.$promise = deferred.promise.$$state $timeout(function(){ game.rating = 4.16; deferred.resolve(); },3); }]) .directive('rating', function () { return { restrict: 'ea', link: function (scope, element, attrs) { scope.mark = scope.$eval(attrs.mark); console.log(attrs); } }; }) })(window.angular);
Comments
Post a Comment