Bound attribute empty in an angular directive

Question

I've a 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 only log the attributes of the directive.

Here is how I use that directive :

<rating mark="{{game.rating}}" style="font-size: 30px"></rating>

And here is the result of the web inspector :

As you can see, mark is empty mark="" on the first line. But after, it is filled in with its value mark="4.16".

The result is that if I console.log(scope.mark), I see 0 instead of 4.16.

I think it's because the 4.16 is retrieved from the database and, the code is executed before that {{game.rating}} is initialized in the controller.

So the question is, how to deal with this problem ? And how to access to the "4.16" ?

0 is the value of game.rating at the time of rendering the directive.But the value you find in dev console is the current value of mark evaluated after logging in the console. If you hover near the i you will find that message. — Raghu
– Raghu, Commented Jan 27, 2016 at 17:20
It's because you forgot to add scope: { mark: '=' } to your directive. Add it after restrict: 'EA' (although order doesn't matter). — jperezov
– jperezov, Commented Jan 27, 2016 at 18:14
you can use a $watch on the mark and check if value is greater than 0 and then do something like console.log(value) — Thiago Frias
– Thiago Frias, Commented Jan 27, 2016 at 19:19

Enver Dzhaparoff · Accepted Answer · 2016-01-27 18:11:00Z

Try to use angular promises in service, that receives data from api, and pass the state of deffered object to ng-if - this decision can help to set aside rendering of rating directive.

Simple example:

<div ng-app="ludaooApp">
  <div ng-controller="GameCtrl as 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);

JSFiddle

tala9999 · Accepted Answer · 2017-08-11 17:50:00Z

1

I think Enver's solution may work but it's over-complicated. The issue is caused by game.rating has not been completely bound when it's read. A more simple solution is to wait until binding of game.rating is completely done and assigned to mark attribute, as follows:

link: function (scope, element, attrs) {
    attrs.$observe("mark", function(value) {
        // read "mark" here
        console.log(attrs.mark);
    });
};

answered Aug 11, 2017 at 17:50

tala9999

1,7493 gold badges18 silver badges28 bronze badges

Comments

Brad Rem · Accepted Answer · 2016-01-27 18:29:13Z

0

I believe your directive is getting created before your {{game.rating}} has completed binding.

Try using ngAttr so that your attribute is defined only after the binding completes:

<rating ng-attr-mark="{{game.rating}}" style="font-size: 30px"></rating>

answered Jan 27, 2016 at 18:29

Brad Rem

6,0262 gold badges27 silver badges50 bronze badges

1 Comment

Georgy Over a year ago

Have the same issue, got undefined this way.

Collectives™ on Stack Overflow

Bound attribute empty in an angular directive

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related