Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 808380d

Browse files
committed
feat(compile): add human readable alternative to '@=&?'
support using `interpolate:<name>`, `bind:<name>`, `eval:<name>` and `bind:optional:<name>` instead of `@<name>`, `=<name>`, `&<name>` and `=?<name>` Closes #9125
1 parent f7a4a70 commit 808380d

File tree

2 files changed

+69
-17
lines changed

2 files changed

+69
-17
lines changed

src/ng/compile.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -575,7 +575,15 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
575575
var EVENT_HANDLER_ATTR_REGEXP = /^(on[a-z]+|formaction)$/;
576576

577577
function parseIsolateBindings(scope, directiveName) {
578-
var LOCAL_REGEXP = /^\s*([@=&])(\??)\s*(\w*)\s*$/;
578+
var LOCAL_REGEXP = /^\s*([@=&]|interpolate:|bind:|eval:)(\?|optional:)?\s*(\w*)\s*$/;
579+
var modeMap = {
580+
'@': '@',
581+
'=': '=',
582+
'&': '&',
583+
'interpolate:': '@',
584+
'bind:': '=',
585+
'eval:': '&'
586+
};
579587

580588
var bindings = {};
581589

@@ -591,8 +599,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
591599

592600
bindings[scopeName] = {
593601
attrName: match[3] || scopeName,
594-
mode: match[1],
595-
optional: match[2] === '?'
602+
mode: modeMap[match[1]],
603+
optional: match[2] !== undefined
596604
};
597605
});
598606

test/ng/compileSpec.js

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3006,14 +3006,21 @@ describe('$compile', function() {
30063006
scope: {
30073007
attr: '@',
30083008
attrAlias: '@attr',
3009+
attrVerbose: 'interpolate:',
3010+
attrAliasVerbose: 'interpolate:attr',
30093011
ref: '=',
30103012
refAlias: '= ref',
3013+
refVerbose: 'bind:',
3014+
refAliasVerbose: 'bind: ref',
30113015
reference: '=',
30123016
optref: '=?',
30133017
optrefAlias: '=? optref',
3014-
optreference: '=?',
3018+
optrefVerbose: 'bind:optional:',
3019+
optrefAliasVerbose: 'bind:optional: optref',
30153020
expr: '&',
3016-
exprAlias: '&expr'
3021+
exprAlias: '&expr',
3022+
exprVerbose: 'eval:',
3023+
exprAliasVerbose: 'eval:expr'
30173024
},
30183025
link: function(scope) {
30193026
componentScope = scope;
@@ -3277,68 +3284,83 @@ describe('$compile', function() {
32773284

32783285
describe('attribute', function() {
32793286
it('should copy simple attribute', inject(function() {
3280-
compile('<div><span my-component attr="some text">');
3287+
compile('<div><span my-component attr="some text" attr-verbose="some text">');
32813288

32823289
expect(componentScope.attr).toEqual('some text');
32833290
expect(componentScope.attrAlias).toEqual('some text');
3284-
expect(componentScope.attrAlias).toEqual(componentScope.attr);
3291+
expect(componentScope.attrVerbose).toEqual('some text');
3292+
expect(componentScope.attrAliasVerbose).toEqual('some text');
32853293
}));
32863294

32873295
it('should set up the interpolation before it reaches the link function', inject(function() {
32883296
$rootScope.name = 'misko';
3289-
compile('<div><span my-component attr="hello {{name}}">');
3297+
compile('<div><span my-component attr="hello {{name}}" attr-verbose="hello {{name}}">');
32903298
expect(componentScope.attr).toEqual('hello misko');
32913299
expect(componentScope.attrAlias).toEqual('hello misko');
3300+
expect(componentScope.attrVerbose).toEqual('hello misko');
3301+
expect(componentScope.attrAliasVerbose).toEqual('hello misko');
32923302
}));
32933303

32943304
it('should update when interpolated attribute updates', inject(function() {
3295-
compile('<div><span my-component attr="hello {{name}}">');
3305+
compile('<div><span my-component attr="hello {{name}}" attr-verbose="hello {{name}}">');
32963306

32973307
$rootScope.name = 'igor';
32983308
$rootScope.$apply();
32993309

33003310
expect(componentScope.attr).toEqual('hello igor');
33013311
expect(componentScope.attrAlias).toEqual('hello igor');
3312+
expect(componentScope.attrVerbose).toEqual('hello igor');
3313+
expect(componentScope.attrAliasVerbose).toEqual('hello igor');
33023314
}));
33033315
});
33043316

33053317

33063318
describe('object reference', function() {
33073319
it('should update local when origin changes', inject(function() {
3308-
compile('<div><span my-component ref="name">');
3320+
compile('<div><span my-component ref="name" ref-verbose="name">');
33093321
expect(componentScope.ref).toBe(undefined);
3310-
expect(componentScope.refAlias).toBe(componentScope.ref);
3322+
expect(componentScope.refAlias).toBe(undefined);
3323+
expect(componentScope.refVerbose).toBe(undefined);
3324+
expect(componentScope.refAliasVerbose).toBe(undefined);
33113325

33123326
$rootScope.name = 'misko';
33133327
$rootScope.$apply();
33143328

33153329
expect($rootScope.name).toBe('misko');
33163330
expect(componentScope.ref).toBe('misko');
33173331
expect(componentScope.refAlias).toBe('misko');
3332+
expect(componentScope.refVerbose).toBe('misko');
3333+
expect(componentScope.refAliasVerbose).toBe('misko');
33183334

33193335
$rootScope.name = {};
33203336
$rootScope.$apply();
33213337
expect(componentScope.ref).toBe($rootScope.name);
33223338
expect(componentScope.refAlias).toBe($rootScope.name);
3339+
expect(componentScope.refVerbose).toBe($rootScope.name);
3340+
expect(componentScope.refAliasVerbose).toBe($rootScope.name);
33233341
}));
33243342

33253343

33263344
it('should update local when both change', inject(function() {
3327-
compile('<div><span my-component ref="name">');
3345+
compile('<div><span my-component ref="name" ref-verbose="name">');
33283346
$rootScope.name = {mark:123};
33293347
componentScope.ref = 'misko';
33303348

33313349
$rootScope.$apply();
33323350
expect($rootScope.name).toEqual({mark:123});
33333351
expect(componentScope.ref).toBe($rootScope.name);
33343352
expect(componentScope.refAlias).toBe($rootScope.name);
3353+
expect(componentScope.refVerbose).toBe($rootScope.name);
3354+
expect(componentScope.refAliasVerbose).toBe($rootScope.name);
33353355

33363356
$rootScope.name = 'igor';
33373357
componentScope.ref = {};
33383358
$rootScope.$apply();
33393359
expect($rootScope.name).toEqual('igor');
33403360
expect(componentScope.ref).toBe($rootScope.name);
33413361
expect(componentScope.refAlias).toBe($rootScope.name);
3362+
expect(componentScope.refVerbose).toBe($rootScope.name);
3363+
expect(componentScope.refAliasVerbose).toBe($rootScope.name);
33423364
}));
33433365

33443366
it('should not break if local and origin both change to the same value', inject(function() {
@@ -3455,44 +3477,60 @@ describe('$compile', function() {
34553477

34563478
describe('optional object reference', function() {
34573479
it('should update local when origin changes', inject(function() {
3458-
compile('<div><span my-component optref="name">');
3459-
expect(componentScope.optRef).toBe(undefined);
3460-
expect(componentScope.optRefAlias).toBe(componentScope.optRef);
3480+
compile('<div><span my-component optref="name" optref-verbose="name">');
3481+
expect(componentScope.optref).toBe(undefined);
3482+
expect(componentScope.optrefAlias).toBe(undefined);
3483+
expect(componentScope.optrefVerbose).toBe(undefined);
3484+
expect(componentScope.optrefAliasVerbose).toBe(undefined);
34613485

34623486
$rootScope.name = 'misko';
34633487
$rootScope.$apply();
34643488
expect(componentScope.optref).toBe($rootScope.name);
34653489
expect(componentScope.optrefAlias).toBe($rootScope.name);
3490+
expect(componentScope.optrefVerbose).toBe($rootScope.name);
3491+
expect(componentScope.optrefAliasVerbose).toBe($rootScope.name);
34663492

34673493
$rootScope.name = {};
34683494
$rootScope.$apply();
34693495
expect(componentScope.optref).toBe($rootScope.name);
34703496
expect(componentScope.optrefAlias).toBe($rootScope.name);
3497+
expect(componentScope.optrefVerbose).toBe($rootScope.name);
3498+
expect(componentScope.optrefAliasVerbose).toBe($rootScope.name);
34713499
}));
34723500

34733501
it('should not throw exception when reference does not exist', inject(function() {
34743502
compile('<div><span my-component>');
34753503

34763504
expect(componentScope.optref).toBe(undefined);
34773505
expect(componentScope.optrefAlias).toBe(undefined);
3478-
expect(componentScope.optreference).toBe(undefined);
3506+
expect(componentScope.optrefVerbose).toBe(undefined);
3507+
expect(componentScope.optrefAliasVerbose).toBe(undefined);
34793508
}));
34803509
});
34813510

34823511

34833512
describe('executable expression', function() {
34843513
it('should allow expression execution with locals', inject(function() {
3485-
compile('<div><span my-component expr="count = count + offset">');
3514+
compile('<div><span my-component expr="count = count + offset" ' +
3515+
'expr-verbose="count = count + offset">');
34863516
$rootScope.count = 2;
34873517

34883518
expect(typeof componentScope.expr).toBe('function');
34893519
expect(typeof componentScope.exprAlias).toBe('function');
3520+
expect(typeof componentScope.exprVerbose).toBe('function');
3521+
expect(typeof componentScope.exprAliasVerbose).toBe('function');
34903522

34913523
expect(componentScope.expr({offset: 1})).toEqual(3);
34923524
expect($rootScope.count).toEqual(3);
34933525

34943526
expect(componentScope.exprAlias({offset: 10})).toEqual(13);
34953527
expect($rootScope.count).toEqual(13);
3528+
3529+
expect(componentScope.exprVerbose({offset: 1})).toEqual(14);
3530+
expect($rootScope.count).toEqual(14);
3531+
3532+
expect(componentScope.exprAliasVerbose({offset: 10})).toEqual(24);
3533+
expect($rootScope.count).toEqual(24);
34963534
}));
34973535
});
34983536

@@ -3510,14 +3548,20 @@ describe('$compile', function() {
35103548
expect(componentScope.$$isolateBindings.attr.mode).toBe('@');
35113549
expect(componentScope.$$isolateBindings.attr.attrName).toBe('attr');
35123550
expect(componentScope.$$isolateBindings.attrAlias.attrName).toBe('attr');
3551+
expect(componentScope.$$isolateBindings.attrVerbose.attrName).toBe('attrVerbose');
3552+
expect(componentScope.$$isolateBindings.attrAliasVerbose.attrName).toBe('attr');
35133553
expect(componentScope.$$isolateBindings.ref.mode).toBe('=');
35143554
expect(componentScope.$$isolateBindings.ref.attrName).toBe('ref');
35153555
expect(componentScope.$$isolateBindings.refAlias.attrName).toBe('ref');
3556+
expect(componentScope.$$isolateBindings.refVerbose.attrName).toBe('refVerbose');
3557+
expect(componentScope.$$isolateBindings.refAliasVerbose.attrName).toBe('ref');
35163558
expect(componentScope.$$isolateBindings.reference.mode).toBe('=');
35173559
expect(componentScope.$$isolateBindings.reference.attrName).toBe('reference');
35183560
expect(componentScope.$$isolateBindings.expr.mode).toBe('&');
35193561
expect(componentScope.$$isolateBindings.expr.attrName).toBe('expr');
35203562
expect(componentScope.$$isolateBindings.exprAlias.attrName).toBe('expr');
3563+
expect(componentScope.$$isolateBindings.exprVerbose.attrName).toBe('exprVerbose');
3564+
expect(componentScope.$$isolateBindings.exprAliasVerbose.attrName).toBe('expr');
35213565

35223566
var firstComponentScope = componentScope,
35233567
first$$isolateBindings = componentScope.$$isolateBindings;

0 commit comments

Comments
 (0)