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

This commit is contained in:
Misko Hevery 2010-11-10 16:08:54 -08:00
parent 43a4ff4cdf
commit 0499c47270
7 changed files with 66 additions and 27 deletions

View file

@ -167,7 +167,7 @@ function createScope(parent, providers, instanceCache) {
$watch: function(watchExp, listener, exceptionHandler) { $watch: function(watchExp, listener, exceptionHandler) {
var watch = expressionCompile(watchExp), var watch = expressionCompile(watchExp),
last; last = {};
listener = expressionCompile(listener); listener = expressionCompile(listener);
function watcher(){ function watcher(){
var value = watch.call(instance), var value = watch.call(instance),

View file

@ -622,9 +622,9 @@ angularDirective("ng:submit", function(expression, element) {
</div> </div>
* @scenario * @scenario
it('should check ng:watch', function(){ 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'); 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){ angularDirective("ng:watch", function(expression, element){

View file

@ -462,10 +462,10 @@ angularWidget('ng:include', function(element){
* Conditionally change the DOM structure. * Conditionally change the DOM structure.
* *
* @usageContent * @usageContent
* <any ng:switch-when="matchValue1"/>...</any> * <any ng:switch-when="matchValue1">...</any>
* <any ng:switch-when="matchValue2"/>...</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>. * @param {*} on expression to match against <tt>ng:switch-when</tt>.
* @paramDescription * @paramDescription
@ -473,17 +473,20 @@ angularWidget('ng:include', function(element){
* *
* * `ng:switch-when`: the case statement to match against. If match then this * * `ng:switch-when`: the case statement to match against. If match then this
* case will be displayed. * case will be displayed.
* * `ng:switch-default`: the default case when no other casses match.
* *
* @example * @example
<select name="switch"> <select name="switch">
<option>settings</option> <option>settings</option>
<option>home</option> <option>home</option>
<option>other</option>
</select> </select>
<tt>switch={{switch}}</tt> <tt>switch={{switch}}</tt>
</hr> </hr>
<ng:switch on="switch" > <ng:switch on="switch" >
<div ng:switch-when="settings">Settings Div</div> <div ng:switch-when="settings">Settings Div</div>
<span ng:switch-when="home">Home Span</span> <span ng:switch-when="home">Home Span</span>
<span ng:switch-default>default</span>
</ng:switch> </ng:switch>
</code> </code>
* *
@ -495,6 +498,10 @@ angularWidget('ng:include', function(element){
* select('switch').option('home'); * select('switch').option('home');
* expect(element('.doc-example ng\\:switch').text()).toEqual('Home Span'); * 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 ngSwitch = angularWidget('ng:switch', function (element){
var compiler = this, var compiler = this,
@ -505,21 +512,26 @@ var ngSwitch = angularWidget('ng:switch', function (element){
changeExpr = element.attr('change') || '', changeExpr = element.attr('change') || '',
cases = []; cases = [];
if (!usingFn) throw "Using expression '" + usingExpr + "' unknown."; if (!usingFn) throw "Using expression '" + usingExpr + "' unknown.";
if (!watchExpr) throw "Missing 'on' attribute.";
eachNode(element, function(caseElement){ eachNode(element, function(caseElement){
var when = caseElement.attr('ng:switch-when'); var when = caseElement.attr('ng:switch-when');
if (when) { var switchCase = {
cases.push({
when: function(scope, value){
var args = [value, when];
foreach(usingExprParams, function(arg){
args.push(arg);
});
return usingFn.apply(scope, args);
},
change: changeExpr, change: changeExpr,
element: caseElement, element: caseElement,
template: compiler.compile(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){ return function(element){
var scope = this, childScope; var scope = this, childScope;
this.$watch(watchExpr, function(value){ this.$watch(watchExpr, function(value){
var found = false;
element.html(''); element.html('');
childScope = createScope(scope); childScope = createScope(scope);
foreach(cases, function(switchCase){ foreach(cases, function(switchCase){
if (switchCase.when(childScope, value)) { if (!found && switchCase.when(childScope, value)) {
found = true;
var caseElement = quickClone(switchCase.element); var caseElement = quickClone(switchCase.element);
element.append(caseElement); element.append(caseElement);
childScope.$tryEval(switchCase.change, element); childScope.$tryEval(switchCase.change, element);
@ -550,7 +564,7 @@ var ngSwitch = angularWidget('ng:switch', function (element){
}; };
}, { }, {
equals: function(on, when) { equals: function(on, when) {
return on == when; return ''+on == when;
}, },
route: switchRouteMatcher route: switchRouteMatcher
}); });

View file

@ -607,13 +607,13 @@ BinderTest.prototype.testItShouldListenOnRightScope = function() {
'<ul ng:init="counter=0; gCounter=0" ng:watch="w:counter=counter+1">' + '<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>'); '<li ng:repeat="n in [1,2,4]" ng:watch="w:counter=counter+1;w:$root.gCounter=$root.gCounter+n"/></ul>');
c.scope.$eval(); c.scope.$eval();
assertEquals(0, c.scope.$get("counter")); assertEquals(1, c.scope.$get("counter"));
assertEquals(0, c.scope.$get("gCounter")); assertEquals(7, c.scope.$get("gCounter"));
c.scope.$set("w", "something"); c.scope.$set("w", "something");
c.scope.$eval(); c.scope.$eval();
assertEquals(1, c.scope.$get("counter")); assertEquals(2, c.scope.$get("counter"));
assertEquals(7, c.scope.$get("gCounter")); assertEquals(14, c.scope.$get("gCounter"));
}; };
BinderTest.prototype.testItShouldRepeatOnHashes = function() { BinderTest.prototype.testItShouldRepeatOnHashes = function() {

View file

@ -14,7 +14,8 @@ describe('compiler', function(){
watch: function(expression, element){ watch: function(expression, element){
return function() { return function() {
this.$watch(expression, function(val){ this.$watch(expression, function(val){
log += ":" + val; if (val)
log += ":" + val;
}); });
}; };
} }

View file

@ -172,12 +172,12 @@ describe("directives", function(){
var scope = compile('<div ng:watch="i: count = count + 1" ng:init="count = 0">'); var scope = compile('<div ng:watch="i: count = count + 1" ng:init="count = 0">');
scope.$eval(); scope.$eval();
scope.$eval(); scope.$eval();
expect(scope.$get('count')).toEqual(0); expect(scope.$get('count')).toEqual(1);
scope.$set('i', 0); scope.$set('i', 0);
scope.$eval(); scope.$eval();
scope.$eval(); scope.$eval();
expect(scope.$get('count')).toEqual(1); expect(scope.$get('count')).toEqual(2);
}); });
describe('ng:click', function(){ describe('ng:click', function(){

View file

@ -430,7 +430,11 @@ describe("widget", function(){
describe('ng:switch', function(){ describe('ng:switch', function(){
it('should switch on value change', 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(''); expect(element.html()).toEqual('');
scope.select = 1; scope.select = 1;
scope.$eval(); scope.$eval();
@ -444,8 +448,28 @@ describe("widget", function(){
scope.name = 'misko'; scope.name = 'misko';
scope.$eval(); scope.$eval();
expect(element.text()).toEqual('second:misko'); 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(){ 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>'); 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'; scope.url = '/Book/Moby';
@ -459,7 +483,7 @@ describe("widget", function(){
expect(match).toBeFalsy(); 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 scope = angular.compile('<ng:switch on="url" change="name=\'works\'"><div ng:switch-when="a">{{name}}</div></ng:switch>');
var cleared = false; var cleared = false;
scope.url = 'a'; scope.url = 'a';