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) {
var watch = expressionCompile(watchExp),
last;
last = {};
listener = expressionCompile(listener);
function watcher(){
var value = watch.call(instance),

View file

@ -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){

View file

@ -462,10 +462,10 @@ 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
@ -473,17 +473,20 @@ angularWidget('ng:include', function(element){
*
* * `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
});

View file

@ -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() {

View file

@ -14,7 +14,8 @@ describe('compiler', function(){
watch: function(expression, element){
return function() {
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">');
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(){

View file

@ -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';