AngularJS : Data binding in directive template doesn't work with ng-repeat

Question

I created this simple plunker to demonstrate the problem:

http://plnkr.co/edit/xzgzsAy9eJCAJR7oWm74?p=preview

var app = angular.module('app',[]);

app.controller('ctrl',function($scope){
  $scope.items = {};
})

app.directive('myDirective',function(){
  return {
    restrict: 'E',
    scope: {
      item: "=item"
    },
    template: "<h2>ng-repeat: </h2>" +
    "<button ng-repeat='i in [1,2,3]' ng-click='item = true'>Set to true</button>" +
    "<h2>no ng-repeat: </h2>" + 
    "<button ng-click='item = false'>Set to false</button>"
  }
})

  <body ng-controller='ctrl'>
    <h1>Item: {{items.someItem}}</h1>
    <my-directive item='items.someItem'></my-directive>
  </body>

Two way data binding works when I pass a model to the directive, unless it is accessed from inside of ng-repeat. Why is this happening and how to solve this problem?

sheh · Accepted Answer · 2014-08-08 08:26:48Z

1

You find answer here. Briefly, ng-repeat create a new scope, a primitive data type (boolean, integer, ...) copied by value in the new scope. But objects ({}, []) copied by pointer (not value) and it be same in the new scope and parents scope.

Edited:

I solved your case plnkr

Html:

<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller='ctrl'>
    <h1>Item: {{items.someItem}}</h1>
    <my-directive item='items.someItem'></my-directive>
  </body>

</html>

JavaScript:

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.items = {};
})

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      extItem: "=item"
    },
    template: "<h2>ng-repeat: </h2>" +
      "<button ng-repeat='i in [1,2,3]' ng-click='intItem.val = true'>Set to true</button>" +
      "<h2>no ng-repeat: </h2>" +
      "<button ng-click='intItem.val = false'>Set to false</button>",
    link: function(scope, element, attrs) {
      scope.intItem = {
        val: scope.extItem
      };
      scope.$watch('intItem.val', function(){scope.extItem = scope.intItem.val})
    }
  }
})

In this solution I'm create internal object intItem with Boolean property val, which passed into ng-repeat and added $watch for intItem.val.

edited Aug 8, 2014 at 8:26

answered Aug 7, 2014 at 17:47

sheh

1,0331 gold badge9 silver badges31 bronze badges

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

2 Comments

tuks Over a year ago

Thanks for the reply. I figured that out, but is there a way to pass the object directly? Currently, for my directive, I don't always want to set someItem. I want to be able to pass it to the directive. So, my solution for now is to use attributes like this: <my-directive items='items' item='someItem'> , and then in directive ng-click="items[item] = true", but I think that's just wrong.

sheh Over a year ago

@tuks I'm changed my answer

Collectives™ on Stack Overflow

AngularJS : Data binding in directive template doesn't work with ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related