Angularjs 2-way data binding push object from directive to controller array

Question

I have a array defined in controller and passing it to directive using two way binding. In directive, i tried to pushed object into that array but it failed.

.controller("test", function($scope){
      $scope.myarr =[];

      $scope.$watch("myarr", function(newValue, oldValue){
         console.log($scope.myarr); //prints empty arr
     },true);
});

.directive('ptest', ['$compile', function($compile) {
    var object = {value: 'changed value'};
    return {
      restrict:"E"
      scope: {
            myarr:"="
      },
      template : "<div>{{iobj.value}}<div>",
      link: function(scope,elem,attr){
         myarr.push(object) ;
      }
    };
}]);

html

 <ptest myarr="myarr"></ptest>

George · Accepted Answer · 2016-06-10 12:08:44Z

1

Try scope.myarr.push(object); instead of myarr.push(object)

answered Jun 10, 2016 at 12:08

George

6,7592 gold badges31 silver badges36 bronze badges

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

1 Comment

Raphael Rafatpanah Over a year ago

Plunker attached: plnkr.co/edit/IhPxOnH3bBUBKojKMs98?p=preview Note: don't forget the comma after restrict:"E"

Hadi · Accepted Answer · 2016-06-10 12:48:29Z

1

as @George Lee said try scope.myarr.push(object); and also your directive have a mistake. after restrict:"E" you forgot put ,

 return {
  restrict:"E", // forgot put ','
  scope: {
        myarr:"="
  },
  template : "<div>{{iobj.value}}<div>",

// Code goes here

angular.module('app', [])

.controller("test", function($scope){
  $scope.myarr =[];

  
  $scope.$watch("myarr", function(newValue, oldValue){
    console.log($scope.myarr); //prints empty arr
  },true);
  
  $scope.addItem = function(){
      var object = {value: 'changed value2'};
       $scope.myarr.push(object);
    }
})

.directive('ptest', ['$compile', function($compile) {
  var object = {value: 'changed value'};
  return {
    restrict:"E",
    scope: {
      myarr:"="
    },
    template : '<div ng-repeat="item in myarr">{{item.value}}<div>',
    link: function(scope,elem,attr){
      scope.myarr.push(object) ;
    }
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-app="app" ng-controller="test">
     <ptest myarr="myarr"></ptest>
     <input type="button" ng-click="addItem()" value="add">
  </div>

edited Jun 10, 2016 at 12:48

answered Jun 10, 2016 at 12:20

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

1 Comment

Raphael Rafatpanah Over a year ago

I'll +1 this if you can figure out how to get the template to output value changed from the newly added value object.

Collectives™ on Stack Overflow

Angularjs 2-way data binding push object from directive to controller array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related