Declared global vars, removed a lot of unnecessary code, got the $observe working, got karma working, started working on the tests.

RichardLitt · RichardLitt · commit 309486d2ccd8 · 2014-04-26T23:50:21.000-04:00
diff --git a/angularFiles.js b/angularFiles.js
@@ -53,6 +53,7 @@ angularFiles = {
     'src/ng/directive/ngController.js',
     'src/ng/directive/ngCsp.js',
     'src/ng/directive/ngEventDirs.js',
+    'src/ng/directive/ngId.js',
     'src/ng/directive/ngIf.js',
     'src/ng/directive/ngInclude.js',
     'src/ng/directive/ngInit.js',
diff --git a/src/AngularPublic.js b/src/AngularPublic.js
@@ -26,6 +26,7 @@
     ngControllerDirective,
     ngFormDirective,
     ngHideDirective,
+    ngIdDirective,
     ngIfDirective,
     ngIncludeDirective,
     ngIncludeFillContentDirective,
@@ -166,6 +167,7 @@ function publishExternalAPI(angular){
             ngController: ngControllerDirective,
             ngForm: ngFormDirective,
             ngHide: ngHideDirective,
+            ngId: ngIdDirective,
             ngIf: ngIfDirective,
             ngInclude: ngIncludeDirective,
             ngInit: ngInitDirective,
diff --git a/src/ng/directive/ngId.js b/src/ng/directive/ngId.js
@@ -1,127 +1,52 @@
 'use strict';
 
-function idDirective(name, selector) {
-  name = 'ngId' + name;
-  return ['$animate', function($animate) {
+function idDirective() {
+  return function() {
     return {
-      restrict: 'A',
       link: function(scope, element, attr) {
-        var oldVal;
+        var oldVal = attr['id'] ? attr['id'] : null ;
 
-        scope.$watch(attr[name], ngIdWatchAction, true);
+        scope.$watch(attr['ngId'], ngIdWatchAction, true);
 
         attr.$observe('id', function(value) {
-          ngIdWatchAction(scope.$eval(attr[name]));
+          ngIdWatchAction(scope.$eval(attr['ngId']));
         });
 
 
-        if (name !== 'ngId') {
-          scope.$watch('$index', function($index, old$index) {
-            // jshint bitwise: false
-            var mod = $index & 1;
-            if (mod !== old$index & 1) {
-              var id = typeofId(scope.$eval(attr[name]));
-              if (mod === selector) {
-                replaceId(id);
-              }
-            }
-          });
-        }
-
-        // Used in place of addClass and removeClass, as it must be unique.
-        function replaceId(id) {
-          attr.$attr('id', id)
-        }
-
-        // New
-        function uniqueId(id) {
-          /* Check if the id is unique throughout the view 
-          * Should search $index for the ID. 
-          */
-        }
-
-        // This is the joining function. This shouldn't exist
-        // function digestIdCounts (ids, count) {
-        //   var idCounts = element.data('$idCounts') || {};
-        //   var idsToUpdate = [];
-        //   forEach(ids, function (idName) {
-        //     if (count > 0 || idCounts[idName]) {
-        //       idCounts[idName] = (idCounts[idName] || 0) + count;
-        //       if (idCounts[idName] === +(count > 0)) {
-        //         idsToUpdate.push(idName);
-        //       }
-        //     }
-        //   });
-        //   element.data('$idCounts', idCounts);
-        //   return idsToUpdate.join(' ');
-        // }
-
-        //function updateClasses (oldClasses,  newClasses) {
-        //   var toAdd = arrayDifference(newClasses, oldClasses);
-        //   var toRemove = arrayDifference(oldClasses, newClasses);
-        //   toRemove = digestClassCounts(toRemove, -1);
-        //   toAdd = digestClassCounts(toAdd, 1);
-
-        //   if (toAdd.length === 0) {
-        //     $animate.removeClass(element, toRemove);
-        //   } else if (toRemove.length === 0) {
-        //     $animate.addClass(element, toAdd);
-        //   } else {
-        //     $animate.setClass(element, toAdd, toRemove);
-        //   }
-        // }
-
         function ngIdWatchAction(newVal) {
-          if (selector === true || scope.$index % 2 === selector) {
-            var newId = typeofId(newVal || []);
-            if (!oldVal) {
-              addId(newId);
-            } else if (!equals(newVal,oldVal)) {
-              var oldId = typeofId(oldVal);
-              updateId(oldId, newId);
-            }
+          var newId = typeofId(newVal || []);
+          if (!newId && !oldVal) {
+              console.log('Removing id');
+              element.removeAttr('id');
+          } else if (!newId && oldVal) {
+              console.log('Setting to old id:', oldVal, typeof(oldVal));
+              element.attr('id', oldVal);
+          } else {
+            console.log('Setting to newId:', newVal, typeof(newVal))
+            element.attr('id', newId);
           }
-          oldVal = copy(newVal);
-        }
+        };
       }
     };
 
-    function arrayDifference(tokens1, tokens2) {
-      var values = [];
-
-      outer:
-      for(var i = 0; i < tokens1.length; i++) {
-        var token = tokens1[i];
-        for(var j = 0; j < tokens2.length; j++) {
-          if(token == tokens2[j]) continue outer;
-        }
-        values.push(token);
-      }
-      return values;
-    }
-
     function typeofId (idVal) {
-      //if (isArray(classVal)) {
-      //  return classVal;
-      //} else if (isString(classVal)) {
       if (isString(idVal)) {
+        if (idVal.split(' ').length > 0) {
+          return idVal.split(' ')[0];
+        }
         return idVal;
       } else if (isObject(idVal)) {
         var ids = [], i = 0;
         forEach(idVal, function(v, k) {
-          // This should push for all classes. That isn't ideal. 
-          // We want it to only push for one.
           if (v) {
             ids.push(k);
-            // This should make it break after the first truthy value.
-            return ids;
           }
         });
-        return ids;
+        return ids[0];
       }
       return idVal;
-    }
-  }];
+    };
+  };
 }
 
 /**
@@ -136,139 +61,79 @@ function idDirective(name, selector) {
  * The directive operates in two different ways, depending on which of two types the expression
  * evaluates to:
  *
- * 1. If the expression evaluates to a string, the string should be one, unique id.
+ * 1. If the expression evaluates to a string, the string should be one id. If the string has multiple
+ * space-delimited ids, the first id is returned.
  *
- * 2. If the expression evaluates to an object, then for each key-value pair of the
- * object with a truthy value the corresponding key is used as an id.
+ * 2. If the expression evaluates to an object, then the key for the first key-value pair in the object
+ * to evaluate with a truthy value is used as an id.
  *
- * If the specified value evaluates as truthy, and there is already an existing id on that element,
- * it will overwrite that id.
+ * If there is already an existing id on that element, it will overwrite that id (if the specified key
+ * value pair is truthy, or if a valid string is used). When the expression changes, the previous id is
+ * set as the element attribute again. If there was no original id, and the expression does not evaluate
+ * as truthy, the id attribute is removed.
  *
- * If the specified value evaluates as truthy, but there is already an id or name set elsewhere with the same
- * value, it will not apply the id attribute, unless the name attribute is in the same element, and the element
- * in question is either: `A`, `APPLET`, `FORM`, `FRAME`, `IFRAME`, `IMG`, or `MAP`.
- *
- * When the expression changes, the previously added id is removed and only then is the
- * new id added.
- *
- * @animations
- * add - happens just before the class is applied to the element
- * remove - happens just before the class is removed from the element
+ * If there is already an id or name set elsewhere with the same value, it will apply the id attribute,
+ * which may result in invalid HTML.
  *
  * @element ANY
  * @param {expression} ngId {@link guide/expression Expression} to eval. The result
- *   of the evaluation can be a string with a single id name, or a map of unique id names
- *   to boolean values. In the case of a map, the names of the property whose value
- *   is truthy will be added as css id to the element.
- *
- * // Edited up to here.
+ *   of the evaluation can be a string with a single id name, or a map of id names
+ *   to boolean values. In the case of a map, the name of the first property whose value
+ *   to evaluate as truthy will be added as css id to the element.
  *
  * @example Example that demonstrates basic bindings via ngClass directive.
    <example>
      <file name="index.html">
-       <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
-       <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
-       <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
-       <input type="checkbox" ng-model="error"> error (apply "red" class)
+       <p ng-id="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
+       <input type="checkbox" ng-model="deleted"> deleted (apply "strike" id)<br>
+       <input type="checkbox" ng-model="important"> important (apply "bold" id)<br>
+       <input type="checkbox" ng-model="error"> error (apply "red" id)
        <hr>
-       <p ng-class="style">Using String Syntax</p>
+       <p ng-id="style">Using String Syntax</p>
        <input type="text" ng-model="style" placeholder="Type: bold strike red">
-       <hr>
-       <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
-       <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
-       <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
-       <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
      </file>
      <file name="style.css">
-       .strike {
+       #strike {
          text-decoration: line-through;
        }
-       .bold {
-           font-weight: bold;
+       #bold {
+         font-weight: bold;
        }
-       .red {
-           color: red;
+       #red {
+         color: red;
        }
      </file>
      <file name="protractor.js" type="protractor">
        var ps = element.all(by.css('p'));
 
-       it('should let you toggle the class', function() {
+       it('should let you toggle the id', function() {
 
-         expect(ps.first().getAttribute('class')).not.toMatch(/bold/);
-         expect(ps.first().getAttribute('class')).not.toMatch(/red/);
+         expect(ps.first().getAttribute('id')).not.toMatch(/bold/);
+         expect(ps.first().getAttribute('id')).not.toMatch(/red/);
 
          element(by.model('important')).click();
-         expect(ps.first().getAttribute('class')).toMatch(/bold/);
+         expect(ps.first().getAttribute('id')).toMatch(/bold/);
 
          element(by.model('error')).click();
-         expect(ps.first().getAttribute('class')).toMatch(/red/);
+         expect(ps.first().getAttribute('id')).toMatch(/red/);
        });
 
        it('should let you toggle string example', function() {
-         expect(ps.get(1).getAttribute('class')).toBe('');
+         expect(ps.get(1).getAttribute('id')).toBe('');
          element(by.model('style')).clear();
          element(by.model('style')).sendKeys('red');
-         expect(ps.get(1).getAttribute('class')).toBe('red');
+         expect(ps.get(1).getAttribute('id')).toBe('red');
        });
 
        it('array example should have 3 classes', function() {
          expect(ps.last().getAttribute('class')).toBe('');
          element(by.model('style1')).sendKeys('bold');
          element(by.model('style2')).sendKeys('strike');
          element(by.model('style3')).sendKeys('red');
-         expect(ps.last().getAttribute('class')).toBe('bold strike red');
+         expect(ps.last().getAttribute('id')).toBe('bold');
        });
      </file>
    </example>
-
-   ## Animations
-
-   The example below demonstrates how to perform animations using ngClass.
-
-   <example module="ngAnimate" deps="angular-animate.js" animations="true">
-     <file name="index.html">
-      <input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
-      <input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
-      <br>
-      <span class="base-class" ng-class="myVar">Sample Text</span>
-     </file>
-     <file name="style.css">
-       .base-class {
-         -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-         transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-       }
-
-       .base-class.my-class {
-         color: red;
-         font-size:3em;
-       }
-     </file>
-     <file name="protractor.js" type="protractor">
-       it('should check ng-class', function() {
-         expect(element(by.css('.base-class')).getAttribute('class')).not.
-           toMatch(/my-class/);
-
-         element(by.id('setbtn')).click();
-
-         expect(element(by.css('.base-class')).getAttribute('class')).
-           toMatch(/my-class/);
-
-         element(by.id('clearbtn')).click();
-
-         expect(element(by.css('.base-class')).getAttribute('class')).not.
-           toMatch(/my-class/);
-       });
-     </file>
-   </example>
-
-
-   ## ngClass and pre-existing CSS3 Transitions/Animations
-   The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
-   Upon animation ngAnimate will apply supplementary CSS classes to track the start and end of an animation, but this will not hinder
-   any pre-existing CSS transitions already on the element. To get an idea of what happens during a class-based animation, be sure
-   to view the step by step details of {@link ngAnimate.$animate#addclass $animate.addClass} and
-   {@link ngAnimate.$animate#removeclass $animate.removeClass}.
  */
-var ngIdDirective = idDirective('', true);
+var ngIdDirective = idDirective();
 
diff --git a/test/ng/directive/ngIdSpec.js b/test/ng/directive/ngIdSpec.js
@@ -0,0 +1,30 @@
+'use strict';
+
+describe('ngId', function() {
+  var element;
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should add new and remove old ids dynamically', inject(function($rootScope, $compile) {
+    element = $compile('<div id="existing" ng-id="dynId"></div>')($rootScope);
+    $rootScope.dynId = 'A';
+    $rootScope.$digest();
+    expect(element.attr('id') === 'existing').toBe(false);
+    expect(element.attr('id') === 'A').toBe(true);
+
+    // $rootScope.dynClass = 'B';
+    // $rootScope.$digest();
+    // expect(element.hasClass('existing')).toBe(true);
+    // expect(element.hasClass('A')).toBe(false);
+    // expect(element.hasClass('B')).toBe(true);
+
+    // delete $rootScope.dynClass;
+    // $rootScope.$digest();
+    // expect(element.hasClass('existing')).toBe(true);
+    // expect(element.hasClass('A')).toBe(false);
+    // expect(element.hasClass('B')).toBe(false);
+  }));
+
+});
diff --git a/test/ng/directive/ngIfSpec.js b/test/ng/directive/ngIfSpec.js
