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...
caiotoon authored and IgorMinar committed Jan 3, 2014
1 parent 78057a9 commit 299b220f5e05e1d4e26bfd58d0b2fd7329ca76b1
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);
};
}
};
View
@@ -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.