feat($compile): allow $watchCollection to be used in bi-directional bindings

an asterisk can be specified in the binding definition to use $watchCollection instead of $watch.
e.g. scope: { prop: '=*' }

Author: gabrielm-infocorp

src/ng/compile.js

@@ -164,7 +164,9 @@
  *   value of `parentModel` on the parent scope. Any changes to `parentModel` will be reflected
  *   in `localModel` and any changes in `localModel` will reflect in `parentModel`. If the parent
  *   scope property doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You
- *   can avoid this behavior using `=?` or `=?attr` in order to flag the property as optional.
+ *   can avoid this behavior using `=?` or `=?attr` in order to flag the property as optional. If
+ *   you want to shallow watch for changes (i.e. $watchCollection instead of $watch) you can use
+ *   `=*` or `=*attr` (`=?*` or `=?*attr` if the property is optional).
  *
  * * `&` or `&attr` - provides a way to execute an expression in the context of the parent scope.
  *   If no `attr` name is specified then the attribute name is assumed to be the same as the
@@ -691,7 +693,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
   var EVENT_HANDLER_ATTR_REGEXP = /^(on[a-z]+|formaction)$/;
 
   function parseIsolateBindings(scope, directiveName) {
-    var LOCAL_REGEXP = /^\s*([@=&])(\??)\s*(\w*)\s*$/;
+    var LOCAL_REGEXP = /^\s*([@=&])(\??)(\*?)\s*(\w*)\s*$/;
 
     var bindings = {};
 
@@ -706,9 +708,10 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       }
 
       bindings[scopeName] = {
-        attrName: match[3] || scopeName,
+        attrName: match[4] || scopeName,
         mode: match[1],
-        optional: match[2] === '?'
+        optional: match[2] === '?',
+        collection: match[3] == '*'
       };
     });
 
@@ -1894,7 +1897,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                   return lastValue = parentValue;
                 };
                 parentValueWatch.$stateful = true;
-                var unwatch = scope.$watch($parse(attrs[attrName], parentValueWatch), null, parentGet.literal);
+                var unwatch = !definition.collection
+                    ? scope.$watch($parse(attrs[attrName], parentValueWatch), null, parentGet.literal)
+                    : scope.$watchCollection(attrs[attrName], parentValueWatch);
                 isolateScope.$on('$destroy', unwatch);
                 break;
 

test/ng/compileSpec.js

@@ -3065,6 +3065,8 @@ describe('$compile', function() {
             optref: '=?',
             optrefAlias: '=? optref',
             optreference: '=?',
+            colref: '=*',
+            colrefAlias: '=* colref',
             expr: '&',
             exprAlias: '&expr'
           },
@@ -3562,6 +3564,32 @@ describe('$compile', function() {
     });
 
 
+    describe('collection object reference', function() {
+     it('should update local when origin changes', inject(function() {
+       $rootScope.collection = [{
+         name: 'Gabriel',
+         value: 18
+       }, {
+         name: 'Tony',
+         value: 91
+       }];
+       $rootScope.query = "";
+       $rootScope.$apply();
+
+       compile('<div><span my-component colref="collection | filter:query">');
+
+       expect(componentScope.colref).toEqual($rootScope.collection);
+       expect(componentScope.colrefAlias).toEqual(componentScope.colref);
+
+       $rootScope.query = "Gab";
+       $rootScope.$apply();
+
+       expect(componentScope.colref).toEqual([$rootScope.collection[0]]);
+       expect(componentScope.colrefAlias).toEqual([$rootScope.collection[0]]);
+     }));
+    });
+
+
     describe('executable expression', function() {
       it('should allow expression execution with locals', inject(function() {
         compile('<div><span my-component expr="count = count + offset">');