How can I make a two way binding in AngularJs? Detailed example included

Question

I can't figure this one on my own. Maybe I'm missing something. I have a controller and a directive which creates its own scope.

Plunker link : http://run.plnkr.co/plunks/wFV7d2blZKEXUgHIOxYo/

Here is the controller code which just creates 3 variables and exposes a "change" function for each one :

var myApp = angular.module("myApp",[]);

myApp.controller('MainController', function ( $scope, $rootScope ) {
  $rootScope.showStuff = true;
  $scope.showStuff2 = true;
  $scope.showStuffObj = { stuff : true };

  $scope.changeStuff = function () {
    $rootScope.showStuff = false;
  }

  $scope.changeStuff2 = function () {
    $scope.showStuff2 = false;
  }

  $scope.changeStuff3 = function () {
    $scope.showStuffObj.stuff = false;
  }
});

Coming up next, the directive:

myApp.directive("mydirective", function () {
  return {
    scope : {
      showStuff : "=",
      showStuff2 : "=",
      showStuffObj : '='
    },
    restrict : "EA",
    template : "<h2>Running</h2>",
    link : function ( $scope ) {
      console.log("running directive", $scope);
      $scope.$watch("showStuff", function () {
        console.log($scope.showStuff);
      });

      $scope.$watch("showStuff2", function () {
        console.log($scope.showStuff2);
      });

      $scope.$watch("showStuffObj", function () {
        console.log($scope.showStuffObj);
      });
    }
  };
});

Why do I get this ?

console results

If the two way binding works, I should see the real values of the variables, not undefined. Why doesn't the watch update when I update the variables? This is very confusing.

Your syntax while using camel case in angular in not correct stackoverflow.com/questions/15990122/… — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jun 17, 2013 at 7:58
so variable thisString will be accessed like attr "this-string" ? — Vlad Nicula
– Vlad Nicula, Commented Jun 17, 2013 at 8:12

Narretz · Accepted Answer · 2013-06-17 08:11:53Z

1

There are two problems:

As beniwal said, the attributes in the directives must be separated with dashes, while the local scope variables are in camelCase:

<mydirective show-stuff="showStuff" show-stuff2="showStuff2" show-stuff-obj="showStuffObj">

.

scope : {
  showStuff : "=",
  showStuff2 : "=",
  showStuffObj : "="
},

For watching to work In case of showStuffObj, you must a) deep-watch the object, or directly watch a property. Deep-watching is expensive, so only do it if it is really necessary:

Watching single property:

  $scope.$watch("showStuffObj.stuff", function () {
    console.log($scope.showStuffObj.stuff);
  });

Deep watch:

  $scope.$watch("localShowStuffObj", function () {
    console.log($scope.localShowStuffObj);
  }, true);

The third parameter of watch set to true turns on deep watching.

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

answered Jun 17, 2013 at 8:11

Narretz

4,9831 gold badge35 silver badges40 bronze badges

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

1 Comment

Vlad Nicula Over a year ago

thanks, I never dealt with camel case properties in angular before! :D

Collectives™ on Stack Overflow

How can I make a two way binding in AngularJs? Detailed example included

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related