feat(ngRef): 2. bind dom element

Author: drpicox

src/ng/directive/ngRef.js

@@ -197,15 +197,16 @@ var ngRefDirective = function() {
       }
 
       return function(scope, element) {
-        // gets the controller of the current element (see jqLiteController for details)
+        // gets the controller of the current component or the current DOM element
         var controller = element.data('$' + controllerName + 'Controller');
-        scope[symbolName] = controller;
+        var value = controller || element[0];
+        scope[symbolName] = value;
 
         // when the element is removed, remove it from the scope assignment (nullify it)
         element.on('$destroy', function() {
-          // only remove it if controller has not changed,
-          // because it can happen that animations (and other procedures) may duplicate elements
-          if (scope[symbolName] === controller) {
+          // only remove it if value has not changed,
+          // carefully because animations (and other procedures) may duplicate elements
+          if (scope[symbolName] === value) {
             scope[symbolName] = null;
           }
         });

test/ng/directive/ngRefSpec.js

@@ -137,6 +137,17 @@ describe('ngRef', function() {
 
   });
 
+  it('should bind the dom element if no component', inject(function($compile, $rootScope) {
+    $compile('<span ng-ref="mySpan">my text</span>')($rootScope);
+    expect($rootScope.mySpan.textContent).toBe('my text');
+  }));
+
+  it('should nullify the dom element value if it is destroyed', inject(function($compile, $rootScope) {
+    var element = $compile('<div><span ng-ref="mySpan">my text</span></div>')($rootScope);
+    element.children().remove();
+    expect($rootScope.mySpan).toBe(null);
+  }));
+
   it('should be compatible with directives on entities with controller', function() {
     var myDirectiveController;