added ng:switch-when-default; changed $watch to always fire on init. (may be backward incompatible)

mhevery · mhevery · commit 0499c4727036 · 2010-11-10T21:01:17.000-08:00
diff --git a/src/Scope.js b/src/Scope.js
@@ -167,7 +167,7 @@ function createScope(parent, providers, instanceCache) {
 
     $watch: function(watchExp, listener, exceptionHandler) {
       var watch = expressionCompile(watchExp),
-          last;
+          last = {};
       listener = expressionCompile(listener);
       function watcher(){
         var value = watch.call(instance),
diff --git a/src/directives.js b/src/directives.js
@@ -622,9 +622,9 @@ angularDirective("ng:submit", function(expression, element) {
     </div>
  * @scenario
    it('should check ng:watch', function(){
-     expect(using('.doc-example-live').binding('counter')).toBe('1');
-     using('.doc-example-live').input('name').enter('abc');
      expect(using('.doc-example-live').binding('counter')).toBe('2');
+     using('.doc-example-live').input('name').enter('abc');
+     expect(using('.doc-example-live').binding('counter')).toBe('3');
    });
  */
 angularDirective("ng:watch", function(expression, element){
diff --git a/src/widgets.js b/src/widgets.js
@@ -462,28 +462,31 @@ angularWidget('ng:include', function(element){
  * Conditionally change the DOM structure.
  * 
  * @usageContent
- *   <any ng:switch-when="matchValue1"/>...</any>
- *   <any ng:switch-when="matchValue2"/>...</any>
+ * <any ng:switch-when="matchValue1">...</any>
+ *   <any ng:switch-when="matchValue2">...</any>
  *   ...
- *   <any ng:switch-when="matchValueN"/>...</any>
+ *   <any ng:switch-default>...</any>
  * 
  * @param {*} on expression to match against <tt>ng:switch-when</tt>.
  * @paramDescription 
  * On child elments add:
  * 
  * * `ng:switch-when`: the case statement to match against. If match then this
  *   case will be displayed.
+ * * `ng:switch-default`: the default case when no other casses match.
  *
  * @example
     <select name="switch">
       <option>settings</option>
       <option>home</option>
+      <option>other</option>
     </select>
     <tt>switch={{switch}}</tt>
     </hr>
     <ng:switch on="switch" >
       <div ng:switch-when="settings">Settings Div</div>
       <span ng:switch-when="home">Home Span</span>
+      <span ng:switch-default>default</span>
     </ng:switch>
     </code>
  *
@@ -495,6 +498,10 @@ angularWidget('ng:include', function(element){
  *   select('switch').option('home');
  *   expect(element('.doc-example ng\\:switch').text()).toEqual('Home Span');
  * });
+ * it('should select deafault', function(){
+ *   select('switch').option('other');
+ *   expect(element('.doc-example ng\\:switch').text()).toEqual('default');
+ * });
  */
 var ngSwitch = angularWidget('ng:switch', function (element){
   var compiler = this,
@@ -505,21 +512,26 @@ var ngSwitch = angularWidget('ng:switch', function (element){
       changeExpr = element.attr('change') || '',
       cases = [];
   if (!usingFn) throw "Using expression '" + usingExpr + "' unknown.";
+  if (!watchExpr) throw "Missing 'on' attribute.";
   eachNode(element, function(caseElement){
     var when = caseElement.attr('ng:switch-when');
-    if (when) {
-      cases.push({
-        when: function(scope, value){
-          var args = [value, when];
-          foreach(usingExprParams, function(arg){
-            args.push(arg);
-          });
-          return usingFn.apply(scope, args);
-        },
+    var switchCase = {
         change: changeExpr,
         element: caseElement,
         template: compiler.compile(caseElement)
-      });
+      };
+    if (isString(when)) {
+      switchCase.when = function(scope, value){
+        var args = [value, when];
+        foreach(usingExprParams, function(arg){
+          args.push(arg);
+        });
+        return usingFn.apply(scope, args);
+      };
+      cases.unshift(switchCase);
+    } else if (isString(caseElement.attr('ng:switch-default'))) {
+      switchCase.when = valueFn(true);
+      cases.push(switchCase);
     }
   });
 
@@ -532,10 +544,12 @@ var ngSwitch = angularWidget('ng:switch', function (element){
   return function(element){
     var scope = this, childScope;
     this.$watch(watchExpr, function(value){
+      var found = false;
       element.html('');
       childScope = createScope(scope);
       foreach(cases, function(switchCase){
-        if (switchCase.when(childScope, value)) {
+        if (!found && switchCase.when(childScope, value)) {
+          found = true;
           var caseElement = quickClone(switchCase.element);
           element.append(caseElement);
           childScope.$tryEval(switchCase.change, element);
@@ -550,7 +564,7 @@ var ngSwitch = angularWidget('ng:switch', function (element){
   };
 }, {
   equals: function(on, when) {
-    return on == when;
+    return ''+on == when;
   },
   route: switchRouteMatcher
 });
diff --git a/test/BinderTest.js b/test/BinderTest.js
@@ -607,13 +607,13 @@ BinderTest.prototype.testItShouldListenOnRightScope = function() {
       '<ul ng:init="counter=0; gCounter=0" ng:watch="w:counter=counter+1">' +
       '<li ng:repeat="n in [1,2,4]" ng:watch="w:counter=counter+1;w:$root.gCounter=$root.gCounter+n"/></ul>');
   c.scope.$eval();
-  assertEquals(0, c.scope.$get("counter"));
-  assertEquals(0, c.scope.$get("gCounter"));
+  assertEquals(1, c.scope.$get("counter"));
+  assertEquals(7, c.scope.$get("gCounter"));
 
   c.scope.$set("w", "something");
   c.scope.$eval();
-  assertEquals(1, c.scope.$get("counter"));
-  assertEquals(7, c.scope.$get("gCounter"));
+  assertEquals(2, c.scope.$get("counter"));
+  assertEquals(14, c.scope.$get("gCounter"));
 };
 
 BinderTest.prototype.testItShouldRepeatOnHashes = function() {
diff --git a/test/CompilerSpec.js b/test/CompilerSpec.js
@@ -14,7 +14,8 @@ describe('compiler', function(){
       watch: function(expression, element){
         return function() {
           this.$watch(expression, function(val){
-            log += ":" + val;
+            if (val)
+              log += ":" + val;
           });
         };
       }
diff --git a/test/directivesSpec.js b/test/directivesSpec.js
@@ -172,12 +172,12 @@ describe("directives", function(){
     var scope = compile('<div ng:watch="i: count = count + 1" ng:init="count = 0">');
     scope.$eval();
     scope.$eval();
-    expect(scope.$get('count')).toEqual(0);
+    expect(scope.$get('count')).toEqual(1);
 
     scope.$set('i', 0);
     scope.$eval();
     scope.$eval();
-    expect(scope.$get('count')).toEqual(1);
+    expect(scope.$get('count')).toEqual(2);
   });
 
   describe('ng:click', function(){
diff --git a/test/widgetsSpec.js b/test/widgetsSpec.js
@@ -430,7 +430,11 @@ describe("widget", function(){
 
   describe('ng:switch', function(){
     it('should switch on value change', function(){
-      compile('<ng:switch on="select"><div ng:switch-when="1">first:{{name}}</div><div ng:switch-when="2">second:{{name}}</div></ng:switch>');
+      compile('<ng:switch on="select">' +
+          '<div ng:switch-when="1">first:{{name}}</div>' +
+          '<div ng:switch-when="2">second:{{name}}</div>' +
+          '<div ng:switch-when="true">true:{{name}}</div>' +
+        '</ng:switch>');
       expect(element.html()).toEqual('');
       scope.select = 1;
       scope.$eval();
@@ -444,8 +448,28 @@ describe("widget", function(){
       scope.name = 'misko';
       scope.$eval();
       expect(element.text()).toEqual('second:misko');
+      scope.select = true;
+      scope.$eval();
+      expect(element.text()).toEqual('true:misko');
+    });
+    
+    it("should compare stringified versions", function(){
+      var switchWidget = angular.widget('ng:switch');
+      expect(switchWidget.equals(true, 'true')).toEqual(true);
     });
 
+    it('should switch on switch-when-default', function(){
+      compile('<ng:switch on="select">' +
+          '<div ng:switch-when="1">one</div>' +
+          '<div ng:switch-default>other</div>' +
+        '</ng:switch>');
+      scope.$eval();
+      expect(element.text()).toEqual('other');
+      scope.select = 1;
+      scope.$eval();
+      expect(element.text()).toEqual('one');
+    });
+    
     it("should match urls", function(){
       var scope = angular.compile('<ng:switch on="url" using="route:params"><div ng:switch-when="/Book/:name">{{params.name}}</div></ng:switch>');
       scope.url = '/Book/Moby';
@@ -459,7 +483,7 @@ describe("widget", function(){
       expect(match).toBeFalsy();
     });
 
-    it('should call init on switch', function(){
+    it('should call change on switch', function(){
       var scope = angular.compile('<ng:switch on="url" change="name=\'works\'"><div ng:switch-when="a">{{name}}</div></ng:switch>');
       var cleared = false;
       scope.url = 'a';
