ng-repeat in angular directive

Question

I am trying to create a custom select directive with some extra functionality.

.directive('singleSelect',function(){
restrict:'A'
scope:{
model:'='
}
link:function(elem,scope,attrs){
elem.bind('click',function(){
scope.vModel=model.slice(0,20);
});
controller:function($scope)
{
//some more manipulation with model and assign to vModel 
}
template:'<ul><li ng-repeat="item in vModel"></li><ul>'
});

The problem is that I am assigning the value to vModel but it is not getting updated in the template.

The answers are right about $apply but the code you posted is full of other problems too. Syntax errors like function(){ restrict: 'A', there is not much to click in empty '<ul>' element, parameters elem and scope are in the wrong order in the link function and in the end, when this finally works, it will just show bunch of bullets (if even that, depends on your css) because there is nothing inside the '<li>'. — noppa
– noppa, Commented May 5, 2016 at 16:34
Sorry My mistake. Actually it is E. Also parameter order is wrong. Thanks all for the answer. I have updated my code and it is working fine now :) — user2580925
– user2580925, Commented May 5, 2016 at 16:59

Pratik Bhattacharya · Accepted Answer · 2016-05-05 16:33:01Z

1

This is happening because you are updating your scope variable inside a jQuery selector. You need to use $scope.$apply to start the digest cycle which will update your model.

Try this:

.directive('singleSelect',function(){
restrict:'A'
scope:{
model:'='
}
link:function(scope, elem, attrs){
elem.bind('click',function(){
scope.$apply(function(){
   scope.vModel=model.slice(0,20);
})
});
controller:function($scope)
{
//some more manipulation with model and assign to vModel 
}
template:'<ul><li ng-repeat="item in vModel"></li><ul>'
});

edited May 5, 2016 at 16:33

answered May 5, 2016 at 16:00

Pratik Bhattacharya

3,7562 gold badges38 silver badges66 bronze badges

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

Comments

Eugene Hype · Accepted Answer · 2016-05-05 16:06:23Z

1

Note, that arguments in link function go in order just like below: link: function (scope, elem, attrs)

Try to use $apply method:

elem.bind('click',function(){
 scope.$apply(function(){
        scope.vModel=model.slice(0,20);
      }); 
});

And the best way to catch click event is use angular ng-click directive: https://docs.angularjs.org/api/ng/directive/ngClick

answered May 5, 2016 at 16:06

Eugene Hype

675 bronze badges

Collectives™ on Stack Overflow

ng-repeat in angular directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related