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

Question

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

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');

javascript
angularjs

Answer 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

Answer 2

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');
      });
    });
  };
});