feat(ngBindOnceDirs.js): implementation of simple bindOnce directives angular#5408

Signed-off-by: Josh Kurz <[email protected]>

Author: jkurz

angularFiles.js

@@ -46,6 +46,7 @@ angularFiles = {
     'src/ng/directive/form.js',
     'src/ng/directive/input.js',
     'src/ng/directive/ngBind.js',
+    'src/ng/directive/ngBindOnceDirs.js',
     'src/ng/directive/ngClass.js',
     'src/ng/directive/ngCloak.js',
     'src/ng/directive/ngController.js',

src/AngularPublic.js

@@ -48,6 +48,7 @@
     ngValueDirective,
     ngAttributeAliasDirectives,
     ngEventDirectives,
+    ngBindOnceDirectives,
 
     $AnchorScrollProvider,
     $AnimateProvider,
@@ -186,7 +187,8 @@ function publishExternalAPI(angular){
           ngInclude: ngIncludeFillContentDirective
         }).
         directive(ngAttributeAliasDirectives).
-        directive(ngEventDirectives);
+        directive(ngEventDirectives).
+        directive(ngBindOnceDirectives);
       $provide.provider({
         $anchorScroll: $AnchorScrollProvider,
         $animate: $AnimateProvider,

src/ng/directive/ngBindOnceDirs.js

@@ -0,0 +1,69 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name ng.directive:ngBindOnce
+ * @restrict AC
+ *
+ * @description
+ * The `ngBindOnce` attribute tells Angular to only set up an initial binding. After the specified value has been 
+ * set, then the watcher is destroyed. 
+ *
+ * ngBindOnce works with promise values or any other asynchrounous type of values that are not not set on the initial digest.
+ *
+ * @element ANY
+ * @param {expression} ngBindOnce {@link guide/expression Expression} to evaluate and set once.
+ *
+ * @example
+ * Notice how the text value is not changed when the scope value is changed.
+   <doc:example>
+     <doc:source>
+       <script>
+         function Ctrl($scope) {
+           $scope.name = 'Free Bird';
+         }
+       </script>
+       <div ng-controller="Ctrl">
+         Enter name: <input type="text" ng-model="name"><br>
+         Hello <span id="bindOnceTest" ng-bind-once-text="name"></span>!
+       </div>
+     </doc:source>
+     <doc:protractor>
+       it('should check ng-bind-once-text', function() {
+         var exampleContainer = $('.doc-example-live');
+         var nameInput = element(by.model('name'));
+
+         expect(exampleContainer.findElement(by.id('bindOnceTest')).getText()).toBe('Free Bird);
+         nameInput.clear();
+         nameInput.sendKeys('world');
+         expect(exampleContainer.findElement(by.id('bindOnceTest')).getText()).toBe('Free Bird');
+       });
+     </doc:protractor>
+   </doc:example>
+ */
+var ngBindOnceDirectives = {};
+forEach([{name: 'src', method: 'attr'}, {name: 'text', method: 'text'},
+         {name: 'href', method: 'attr'}, {name: 'class', method: 'addClass'},
+         {name: 'html', method: 'html'}, {name: 'alt', method: 'attr'},
+         {name: 'style', method: 'css'}, {name: 'value', method: 'attr'},
+         {name: 'id', method: 'attr'}, {name: 'title', method: 'attr'}],
+  function(v) {
+    var directiveName = directiveNormalize('ng-bind-once-' + v.name);
+    ngBindOnceDirectives[directiveName] = function() {
+      return {
+        link: function(scope, element, attr) {
+          var rmWatcher = scope.$watch(attr[directiveName], function(newV,oldV){
+            if(newV){
+              if(v.method === 'attr'){
+                element[v.method](v.name,newV);
+              } else {
+                element[v.method](newV);
+              }
+              rmWatcher();
+            }
+          });
+        }
+      };
+    };
+  }
+);

test/ng/directive/ngBindOnceDirsSpec.js

@@ -0,0 +1,62 @@
+'use strict';
+
+describe('bindOnce directives', function() {
+  var scope, $compile;
+
+  beforeEach(inject(function($injector) {
+    $compile = $injector.get('$compile');
+    scope = $injector.get('$rootScope');
+  }));
+
+
+  describe('Creating ngBindOnce* directive', function() {
+    
+      angular.forEach(['text','src','href','id','class','alt','value','title'], function(v){
+
+        var bindOnceNode;
+
+        beforeEach(function(){
+            scope.testValue = 'tester+tester+tester';
+            bindOnceNode = $compile('<div ng-bind-once-' + v + '="testValue"></div>')(scope);
+            scope.$apply();
+            expect(bindOnceNode).not.toBe(undefined);
+        }); 
+        
+        iit('should have the correct values for the bindOnce directive', function() {
+          if(v === 'text'){
+            expect(bindOnceNode[v]()).toBe('tester+tester+tester');
+          } else if(v === 'class'){
+            expect(bindOnceNode.hasClass('tester+tester+tester')).toBe(true);
+          } else {
+            expect(bindOnceNode.attr(v)).toBe('tester+tester+tester');
+          }
+        });
+
+        iit('should not have any watchers on the scope', function() {
+          expect(scope.$$watchers.length).toBe(0);
+        });
+      });
+
+  });
+
+  describe('Creating ngBindOnceHtml and ngBindOnceStyle directives', function() {
+        
+        iit('should set the correct html to the element and destroy the watchers', function() {
+          scope.testValue = '<p>No Bindings</p>';
+          var bindOnceHtmlNode = $compile('<div ng-bind-once-html="testValue"></div>')(scope);
+          scope.$apply();
+          expect(bindOnceHtmlNode.html()).toBe('<p>No Bindings</p>'); 
+          expect(scope.$$watchers.length).toBe(0);  
+        });
+
+        iit('should set the correct style to the element and destroy the watchers', function() {
+          scope.testValue = {width: '100px', height: '200px'};
+          var bindOnceStyleNode = $compile('<div ng-bind-once-style="testValue"></div>')(scope);
+          scope.$apply();
+          expect(bindOnceStyleNode.css('height')).toBe('200px'); 
+          expect(bindOnceStyleNode.css('width')).toBe('100px'); 
+          expect(scope.$$watchers.length).toBe(0);  
+        });
+
+  });
+});