AngularJS Two Way Bind Property in Directive

Question

I have a custom directive:

.directive('test', function () {

    return {
        scope: {},

        link: function (scope, element, attr) {

            scope.$parent.$watch(attr.selectedItem, function(newValue, oldValue){
                scope.selectedItem = newValue;
            });
         }
}

This will one way bind my directive's scope's selectedItem property to the value set in the attribute as such

<div test selectedItem="thePropertyOnTheController"></div>

But what if I want to two way bind? Is there an easy way to set this up without $watch'ing the directive's scope's selectedItem property and $parse'ing the attr.selectedItem expression and calling assign witht he parsed expression on scope.$parent?

Use scope: { selectedItem: "=" } - it's all in the isolate scope documentation — New Dev
– New Dev, Commented Apr 15, 2015 at 12:42

Arepalli Praveenkumar · Accepted Answer · 2015-04-17 05:21:44Z

1

$scope.thePropertyOnTheController might have some value like "Hello"

HTML

   <div ng-repeat="photosets in userPhotoSetList">
     <photosets photosetsarray="photosets.photosetDetail">
  </div>

script :

.directive('photosets', function () {
  return {
      scope: {
               photosetslist : "=photosetsarray"
             },
      link: function (scope, element, attr) {
       console.log(scope.photosetslist);
       //"Hello" is output
     }
}

If you see photosetsarray="photosets.photosetDetail"" photosetsarray and

            scope: {
               photosetslist : "=photosetsarray" **//this name is same as assignee attr**
             },

leftside variable name in html must = right side variable name in directive

edited Apr 17, 2015 at 5:21

answered Apr 15, 2015 at 12:54

Arepalli Praveenkumar

1,3161 gold badge13 silver badges29 bronze badges

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

4 Comments

Jeff Over a year ago

What if I want to do this programmatically in code? Any easy way?

Arepalli Praveenkumar Over a year ago

leftside variable name in html must = right side variable name in directive

Jeff Over a year ago

Here's the reason I ask - this doesn't work: scope: { options: {imageIndex: '=popupImagesIndex'} }....so my idea is to accomplish the binding in the link function.

Arepalli Praveenkumar Over a year ago

imageIndex : '=popupImagesIndex' and photosetslist : "=photosetsarray" the left side assign photosetsarray must equal to right side variable of directive scope. scope: { photosetslist : "=photosetsarray" //this name is same as assignee attr }, AND also I suggest you to take variable as imageindex not like imageIndex Please check Edited answer

user3628773 · Accepted Answer · 2015-04-15 14:07:51Z

0

Be careful with variable naming in these situations. Binding to an attribute that is declared as camel case in the directive cannot be accessed as such from the DOM.

.directive('test', function () {
  return {
      scope: {
               item : "=selectedItem"
             },
      link: function (scope, element, attr) {
         //do some stuff
     }
}

So to correctly bind this attribute to a variable on the controller:

<div test selected-item="thePropertyOnTheController"></div>

answered Apr 15, 2015 at 14:07

user3628773

1 Comment

Jeff Over a year ago

I'm not sure what you're saying

Collectives™ on Stack Overflow

AngularJS Two Way Bind Property in Directive

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related