AngularJS Directive Isolate scope behavior

Question

I'm working through some tutorials trying to firm up my grasp of isolate scope and I'm having some issues. I get the high concept but I'm trying to justify some behavior I'm seeing that I don't understand. At a high level the way I understand it, the options attached work like this:

@ - allows you to feed in a string & - provides one way data binding = - provides two way data binding

So considering the following code:

<div ng-app="choreApp">
  <div ng-controller="ChoreCtrl">
    <kid done="logChore(chore)"></kid>
  </div>
</div>

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

app.controller("ChoreCtrl", function($scope){
  $scope.logChore = function(chore){
    alert(chore + " is done!");
  };
});

app.directive("kid", function() {
  return {
    restrict: "E",
     scope: {
        done: "&"
     },
    template: '<input type="text" ng-model="chore">' +
      '{{chore}}' +
      '<div class="button" ng-click="done({chore: chore})">I\'m done</div>'
  };
});

The above is wired up ok, with the '&' the logChore function works, all is well.

The '@' doesn't work, as expected, since it is just reading in a string, when I click nothing happens.

However, I also expect '=' to work ok since it's just a two way binding, however what actually happens is the function executes three times without any action on my part (the click), then is seems to function as normal. Why does the function execute three times?

KayakDave · Accepted Answer · 2014-03-03 03:30:18Z

When you use two way binding ("=") with done="logChore(chore)", the results of calling logChore(chore) are assigned to done - not the function itself (as & does).

So every time Angular calls $watch to see if anything it's watching has changed the function logChore(chore) is called. Because of dirty checking $watch often evaluates the watch list multiple times per $digest loop- that's why you saw 3 executions (and you'd see more any time something happens that triggers a $digest).

In order to pass the function itself in when using = you can do this:

<kid done="logChore"></kid>

And change you template to pass in chore like so:

ng-click="done(chore)"

Here's a fiddle of that working.

Also, rather than thinking of @ as passing in a string I'd think of it more broadly as one-way data binding. It's one-way because a change on the parent scope will be reflected inside the directive, but a change in the directive's isolate scope won't be reflected in the parent.

Collectives™ on Stack Overflow

AngularJS Directive Isolate scope behavior

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related