Created
August 1, 2014 20:33
-
-
Save aeisenberg/bd0b97a97a71606cfde6 to your computer and use it in GitHub Desktop.
Nested scopes in angular behave strangely because of prototypal inheritance.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js" type="text/javascript" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| angular.module('watchingApp', []) | |
| .controller('watchedController', function($scope) { | |
| $scope.value = 9; | |
| }) | |
| .directive('watching', function() { | |
| return { | |
| restrict: 'E', | |
| scope: { | |
| value: '=' | |
| }, | |
| link: function(scope, element, foo) { | |
| scope.clicked = function() { | |
| scope.value = scope.value+1; | |
| }; | |
| }, | |
| template: '<p>My value is {{value}}<br/><button ng-click="clicked()">Click me!</button></p>' | |
| }; | |
| }); | |
| </script> | |
| </head> | |
| <body id="watchingApp"> | |
| <div ng-controller="watchedController"> | |
| Value is {{value}}. This value and the next are always the same. | |
| <watching value="value"></watching> | |
| <div ng-if="true"> | |
| These next two values start the same, but after clicking one of their buttons, | |
| they diverge from the outer values. | |
| <watching value="value"></watching> | |
| <watching value="value"></watching> | |
| What is going on? | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment