feat($compile): add allOrNothing attr interpolation

btford · Apr 30, 2014 · 438348a · 438348a
1 parent 6bc2fac
commit 438348a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -641,6 +641,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
     var Attributes = function(element, attr) {
       this.$$element = element;
       this.$attr = attr || {};
+      this.$$allOrNothingAttr = {};
     };
 
     Attributes.prototype = {
@@ -768,6 +769,22 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         });
       },
 
+      /**
+       * @ngdoc method
+       * @name $compile.directive.Attributes#$setAllOrNothing
+       * @function
+       *
+       * @description
+       * Changes the behavior of an interpolated attribute to use "all or nothing" mode.
+       *
+       * This means that the attribute's interpolated value is `undefined` unless all
+       * interpolated expressions are defined.
+       *
+       * @param {string} key Normalized key. (ie ngAttribute) .
+       */
+      $setAllOrNothing: function(key) {
+        this.$$allOrNothingAttr[key] = true;
+      },
 
       /**
        * @ngdoc method
@@ -1865,11 +1882,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                 // initialize attr object so that it's ready in case we need the value for isolate
                 // scope initialization, otherwise the value would not be available from isolate
                 // directive's linking fn during linking phase
-                attr[name] = interpolateFn(scope);
+                attr[name] = interpolateFn(scope, attr.$$allOrNothingAttr[name]);
 
                 ($$observers[name] || ($$observers[name] = [])).$$inter = true;
                 (attr.$$observers && attr.$$observers[name].$$scope || scope).
-                  $watch(interpolateFn, function interpolateFnWatchAction(newValue, oldValue) {
+                  $watch(function (scope) {
+                    return interpolateFn(scope, attr.$$allOrNothingAttr[name]);
+                  }, function interpolateFnWatchAction(newValue, oldValue) {
                     //special case for class attribute addition + removal
                     //so that class changes can tap into the animation
                     //hooks provided by the $animate service. Be sure to

diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -2074,6 +2074,29 @@ describe('$compile', function() {
       expect(observeSpy).toHaveBeenCalledOnceWith('bound-value');
     }));
 
+    it('should observe interpolated attrs in allOrNothing mode', inject(function($rootScope, $compile) {
+      directive('someAttr', function() {
+        return function(scope, elm, attr) {
+          attr.$setAllOrNothing('someAttr');
+        }
+      });
+
+      $compile('<div some-attr="{{first}} {{second}}" observer></div>')($rootScope);
+
+      // should be async
+      expect(observeSpy).not.toHaveBeenCalled();
+
+      $rootScope.$apply(function() {
+        $rootScope.first = 'A';
+      });
+      expect(observeSpy).toHaveBeenCalledOnceWith(undefined);
+
+      $rootScope.$apply(function() {
+        $rootScope.second = 'B';
+      });
+      expect(observeSpy).toHaveBeenCalledWith('A B');
+    }));
+
 
     it('should return a deregistration function while observing an attribute', inject(function($rootScope, $compile) {
       $compile('<div some-attr="{{value}}" observer></div>')($rootScope);