How to push element to an array in a directive - AngularJS

Question

I have a directive in angular that resembles this:

.directive('forexample', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
        elm.on('click', function() {
            scope.$apply(function () {
            ctrl.$setViewValue('value');

Called from something like:

<button forexample ng-model="mymodel">Do It</button>

So obviously

$scope.mymodel; // equals value

What I want is to push('value'); to the model from the directive so in the end after clicking "Do It" a few times, you'd get:

$scope.mymodel; // equals array('value,'value','value');

Tosh · Accepted Answer · 2013-01-28 06:12:00Z

1

Given $scope.mymodel is already defined as Array, then following should work.

app.directive("forexample", function() {
  return function( scope, elm, attrs ) {
    elm.bind("click", function( evt ) {
      scope.$apply(function( scope ) {
        scope[ attrs.ngModel ].push('value');
      });
    });
  };
});

answered Jan 28, 2013 at 6:12

Tosh

36k11 gold badges67 silver badges58 bronze badges

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

2 Comments

drew schmaltz Over a year ago

question, if scope[ attrs.ngModel ]; can be used what is the advantage of using ctrl.$setViewValue in a directive?

Tosh Over a year ago

To be honest, I've never used ctrl.$setViewValue and I do not know for sure. (But I guess it can be used if the isolated scope cases.)

pkozlowski.opensource · Accepted Answer · 2013-01-28 08:42:31Z

1

The ngModel controller is usually used with input-type directives where the 2-way data binding shows its full power. But judging from your example the full machinery of the ngModel might not be required in your case. Your example doesn't explain what you are trying to do, functionally speaking, so I'm just assuming that you want to push value to an array in response to click events. If so, the easiest way of approaching this is by using the $eval method on a scope:

.directive('forexample', function() {
    return {
      link: function(scope, elm, attrs, ctrl) {
        var modelArray = scope.$eval(attrs.forexample);

        elm.bind('click', function() {            
            scope.$apply(function () {
              modelArray.push('value');
            });
        });
      }
    };
  });

The above directive can be used in a template like so:

<button forexample="somearray">Do It</button>

And here is the working plunk: http://plnkr.co/edit/xc5mui9xbxIWHxcvAjqR?p=preview

answered Jan 28, 2013 at 8:42

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

1 Comment

drew schmaltz Over a year ago

I'm actually accessing a phonegap camera, but I didn't want to include all of the extra code. Basically, the camera returns the fileURI that I then upload with phonegap all in the same directive. My plan is to set a status in the directive after the camera returns the fileURI (so users see it's uploading), I'm going to upload it, then I'm going to set the status to finished and push() the result (file_id and url) to the model and eventually save it again as part of a larger content type.

Collectives™ on Stack Overflow

How to push element to an array in a directive - AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related