feat(ngRef): 3. bind to any expression

Closes #14080

Author: drpicox

docs/content/error/ngRef/badident.ngdoc

@@ -177,40 +177,33 @@
  * </example>
  *
  */
-var ngRefDirective = function() {
-  var ngRefMinErr = minErr('ngRef');
-
+var ngRefDirective = ['$parse',function($parse) {
   return {
     priority: -1,
     restrict: 'A',
     compile: function(tElement, tAttrs) {
       // gets the expected controller name, converts <data-some-thing> into "someThing"
       var controllerName = directiveNormalize(nodeName_(tElement));
 
-      // get the symbol name where to set the reference in the scope
-      var symbolName = tAttrs.ngRef;
-
-      if (symbolName && (!/^[$a-zA-Z_][$a-zA-Z0-9_]*$/.test(symbolName) ||
-          /^(null|undefined|this|\$parent|\$root|\$id)$/.test(symbolName))) {
-        throw ngRefMinErr('badident', 'alias \'{0}\' is invalid --- must be a valid JS identifier which is not a reserved name.',
-          symbolName);
-      }
+      // get the expression for value binding
+      var getter = $parse(tAttrs.ngRef);
+      var setter = getter.assign;
 
       return function(scope, element) {
         // gets the controller of the current component or the current DOM element
         var controller = element.data('$' + controllerName + 'Controller');
         var value = controller || element[0];
-        scope[symbolName] = value;
+        setter(scope, value);
 
-        // when the element is removed, remove it from the scope assignment (nullify it)
+        // when the element is removed, remove it (nullify it)
         element.on('$destroy', function() {
           // only remove it if value has not changed,
           // carefully because animations (and other procedures) may duplicate elements
-          if (scope[symbolName] === value) {
-            scope[symbolName] = null;
+          if (getter(scope) === value) {
+            setter(scope,  null);
           }
         });
       };
     }
   };
-};
+}];

src/ng/directive/ngRef.js

@@ -107,33 +107,12 @@ describe('ngRef', function() {
       expect($rootScope.myComponent).toBe(enteringController);
     }));
 
-    it('should throw if alias identifier is not a simple identifier',
-      inject(function($exceptionHandler) {
-      forEach([
-        'null',
-        'this',
-        'undefined',
-        '$parent',
-        '$root',
-        '$id',
-        'obj[key]',
-        'obj["key"]',
-        'obj[\'key\']',
-        'obj.property',
-        'foo=6'
-      ], function(identifier) {
-        var escapedIdentifier = identifier.replace(/"/g, '"');
-        var template = '<my-component ng-ref="' + escapedIdentifier + '"></my-component>';
-        var element = $compile(template)($rootScope);
-
-        expect($exceptionHandler.errors.length).toEqual(1, identifier);
-        expect($exceptionHandler.errors.shift()[0]).toEqualMinErr('ngRef', 'badident',
-            'alias \'' + identifier + '\' is invalid --- must be a valid JS identifier ' +
-            'which is not a reserved name');
-
-        dealoc(element);
-      });
-    }));
+    it('should allow bind to a parent controller', function() {
+      $rootScope.$ctrl = {};
+
+      $compile('<my-component ng-ref="$ctrl.myComponent"></my-component>')($rootScope);
+      expect($rootScope.$ctrl.myComponent).toBe(myComponentController);
+    });
 
   });