Permalink
Browse files

feat($compile): add support for $observer deregistration

In order to make the behavior compatible with $rootScope.$watch and $rootScope.$on methods, and
make it possible to deregister an attribute observer, Attributes.$observe method now returns a
deregistration function instead of the observer itself.

BREAKING CHANGE: calling attr.$observe no longer returns the observer function, but a
    deregistration function instead.

    To migrate the code follow the example below:

    Before:

```
    directive('directiveName', function() {
      return {
        link: function(scope, elm, attr) {
          var observer = attr.$observe('someAttr', function(value) {
            console.log(value);
          });
        }
      };
    });
```

    After:

```
    directive('directiveName', function() {
      return {
        link: function(scope, elm, attr) {
          var observer = function(value) {
            console.log(value);
          };

          attr.$observe('someAttr', observer);
        }
      };
    });
```

Closes #5609
  • Loading branch information...
1 parent 78057a9 commit 299b220f5e05e1d4e26bfd58d0b2fd7329ca76b1 @caiotoon caiotoon committed with IgorMinar Jan 3, 2014
Showing with 19 additions and 5 deletions.
  1. +5 −2 src/ng/compile.js
  2. +14 −3 test/ng/compileSpec.js
View
@@ -775,7 +775,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
* @param {function(interpolatedValue)} fn Function that will be called whenever
the interpolated value of the attribute changes.
* See the {@link guide/directive#Attributes Directives} guide for more info.
- * @returns {function()} the `fn` parameter.
+ * @returns {function()} Returns a deregistration function for this observer.
*/
$observe: function(key, fn) {
var attrs = this,
@@ -789,7 +789,10 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
fn(attrs[key]);
}
});
- return fn;
+
+ return function() {
+ arrayRemove(listeners, fn);
+ };
}
};
@@ -1914,15 +1914,14 @@ describe('$compile', function() {
describe('interpolation', function() {
- var observeSpy, directiveAttrs;
+ var observeSpy, directiveAttrs, deregisterObserver;
beforeEach(module(function() {
directive('observer', function() {
return function(scope, elm, attr) {
directiveAttrs = attr;
observeSpy = jasmine.createSpy('$observe attr');
-
- expect(attr.$observe('someAttr', observeSpy)).toBe(observeSpy);
+ deregisterObserver = attr.$observe('someAttr', observeSpy);
};
});
directive('replaceSomeAttr', valueFn({
@@ -2020,6 +2019,18 @@ describe('$compile', function() {
}));
+ it('should return a deregistration function while observing an attribute', inject(function($rootScope, $compile) {
+ $compile('<div some-attr="{{value}}" observer></div>')($rootScope);
+
+ $rootScope.$apply('value = "first-value"');
+ expect(observeSpy).toHaveBeenCalledWith('first-value');
+
+ deregisterObserver();
+ $rootScope.$apply('value = "new-value"');
+ expect(observeSpy).not.toHaveBeenCalledWith('new-value');
+ }));
+
+
it('should set interpolated attrs to initial interpolation value', inject(function($rootScope, $compile) {
$rootScope.whatever = 'test value';
$compile('<div some-attr="{{whatever}}" observer></div>')($rootScope);

0 comments on commit 299b220

Please sign in to comment.