Angular.JS directive not updating

Question

I am updating a scope array called $scope.arrangement using a click function, but this is not causing my directive to update and update the DOM.

/******************************************
  Sort function
******************************************/  

  $scope.sort = function() {
        $scope.arrangement.sort(function(a, b){
            var keyA = a.created,
        keyB = b.created
        // Compare the 2 dates
        if(keyA < keyB) return -1;
        if(keyA > keyB) return 1;
        return 0;
        })
        for (b=0;b<$scope.arrangement.length;b++) { 
            if($scope.arrangement[b].ord !== b) {
                console.log('order was '+$scope.arrangement[b].ord + " now " + b)
                $scope.arrangement[b].ord=b;
            }
        }
    }
})

/******************************************
  Directives
******************************************/

app.directive('item', function() {
  return {
    restrict: 'A',
    scope: {
      count: "=",
      arrangement: "="
    },
    link: function(scope,element,attrs) {
      console.log('updated')
      for (a=0;a<scope.arrangement.length;a++) {
        if (scope.arrangement[a].ord === scope.count) {
          element.html("Item "+scope.arrangement[a].id + " Created: " + scope.arrangement[a].created)
        }
      }
    }
  }
})

Here's a plunker: http://plnkr.co/edit/hT0HQ85yaPkQj2JcASrY

By clicking 'sort', I am expecting the $scope.sort function to run and this in turn to refresh my directive. What actually happens is the $scope.sort function runs but the directive does not update.

Note that I deliberately not using an ng-repeat here.

You seem to have the arrangement and counts set up as 2 way scope bound properties. However, you specify them as attributes. did you mean to use the '@' scope binding? — Vadim
– Vadim, Commented Aug 27, 2014 at 14:44
I thought that by binding them they would update the parent scope and therefore trigger the directive to update? Could you show me what you would change in plunker please? — hud
– hud, Commented Aug 27, 2014 at 14:59

Explosion Pills · Accepted Answer · 2014-08-27 15:16:56Z

2

The link function only runs one time. elem.html does not use data bindings, so this will just set up the HTML of the element initially when the directive is linked. You can set up a watch yourself:

scope.$watchCollection('arrangement', function () {
  for (a=0;a<scope.arrangement.length;a++) {
    if (scope.arrangement[a].ord === scope.count) {
      element.html("Item "+scope.arrangement[a].id + " Created: " + scope.arrangement[a].created)
    }
  }
});

Seems like it would be much easier to use built in directives, though:

<span ng-if="arr.ord == s.count" ng-repeat="arr in arrangement">
  Item {{arr.id}} Created: {{arr.created}}
</span>

answered Aug 27, 2014 at 15:16

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular.JS directive not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related