chore: rename if to ng-if
This commit is contained in:
parent
7dc524ed58
commit
d310a9c0b4
|
@ -7,13 +7,13 @@
|
|||
|
||||
import {CONST_EXPR} from './src/facade/lang';
|
||||
import {For} from './src/directives/for';
|
||||
import {If} from './src/directives/if';
|
||||
import {NgIf} from './src/directives/ng_if';
|
||||
import {NonBindable} from './src/directives/non_bindable';
|
||||
import {Switch, SwitchWhen, SwitchDefault} from './src/directives/switch';
|
||||
|
||||
export * from './src/directives/class';
|
||||
export * from './src/directives/for';
|
||||
export * from './src/directives/if';
|
||||
export * from './src/directives/ng_if';
|
||||
export * from './src/directives/non_bindable';
|
||||
export * from './src/directives/switch';
|
||||
|
||||
|
@ -58,5 +58,5 @@ export * from './src/directives/switch';
|
|||
*
|
||||
*/
|
||||
export const coreDirectives:List = CONST_EXPR([
|
||||
For, If, NonBindable, Switch, SwitchWhen, SwitchDefault
|
||||
For, NgIf, NonBindable, Switch, SwitchWhen, SwitchDefault
|
||||
]);
|
||||
|
|
|
@ -12,7 +12,7 @@ import {isBlank} from 'angular2/src/facade/lang';
|
|||
* # Example:
|
||||
*
|
||||
* ```
|
||||
* <div *if="errorCount > 0" class="error">
|
||||
* <div *ng-if="errorCount > 0" class="error">
|
||||
* <!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
|
||||
* {{errorCount}} errors detected
|
||||
* </div>
|
||||
|
@ -20,19 +20,19 @@ import {isBlank} from 'angular2/src/facade/lang';
|
|||
*
|
||||
* # Syntax
|
||||
*
|
||||
* - `<div *if="condition">...</div>`
|
||||
* - `<div template="if condition">...</div>`
|
||||
* - `<template [if]="condition"><div>...</div></template>`
|
||||
* - `<div *ng-if="condition">...</div>`
|
||||
* - `<div template="ng-if condition">...</div>`
|
||||
* - `<template [ng-if]="condition"><div>...</div></template>`
|
||||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[if]',
|
||||
selector: '[ng-if]',
|
||||
properties: {
|
||||
'condition': 'if'
|
||||
'ngIf': 'ngIf'
|
||||
}
|
||||
})
|
||||
export class If {
|
||||
export class NgIf {
|
||||
viewContainer: ViewContainerRef;
|
||||
protoViewRef: ProtoViewRef;
|
||||
prevCondition: boolean;
|
||||
|
@ -43,7 +43,7 @@ export class If {
|
|||
this.protoViewRef = protoViewRef;
|
||||
}
|
||||
|
||||
set condition(newCondition /* boolean */) {
|
||||
set ngIf(newCondition /* boolean */) {
|
||||
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
|
||||
this.prevCondition = true;
|
||||
this.viewContainer.create(this.protoViewRef);
|
|
@ -38,7 +38,7 @@ export class ViewSplitter extends CompileStep {
|
|||
var templateBindings = MapWrapper.get(attrs, 'template');
|
||||
var hasTemplateBinding = isPresent(templateBindings);
|
||||
|
||||
// look for template shortcuts such as *if="condition" and treat them as template="if condition"
|
||||
// look for template shortcuts such as *ng-if="condition" and treat them as template="if condition"
|
||||
MapWrapper.forEach(attrs, (attrValue, attrName) => {
|
||||
if (StringWrapper.startsWith(attrName, '*')) {
|
||||
var key = StringWrapper.substring(attrName, 1); // remove the star
|
||||
|
|
|
@ -20,7 +20,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
|||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
import {If} from 'angular2/src/directives/if';
|
||||
import {NgIf} from 'angular2/src/directives/ng_if';
|
||||
import {DomRenderer} from 'angular2/src/render/dom/dom_renderer';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
|
||||
|
@ -64,8 +64,8 @@ export function main() {
|
|||
it('should allow to destroy and create them via viewcontainer directives',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div><dynamic-comp #dynamic template="if: ctxBoolProp"></dynamic-comp></div>',
|
||||
directives: [DynamicComp, If]
|
||||
template: '<div><dynamic-comp #dynamic template="ng-if: ctxBoolProp"></dynamic-comp></div>',
|
||||
directives: [DynamicComp, NgIf]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp).then((view) => {
|
||||
|
|
|
@ -32,7 +32,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||
import {Attribute, Query} from 'angular2/src/core/annotations_impl/di';
|
||||
|
||||
import {If} from 'angular2/src/directives/if';
|
||||
import {NgIf} from 'angular2/src/directives/ng_if';
|
||||
import {For} from 'angular2/src/directives/for';
|
||||
|
||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
||||
|
@ -561,11 +561,11 @@ export function main() {
|
|||
tb.overrideView(MyComp, new View({
|
||||
template: `
|
||||
<some-directive>
|
||||
<p *if="true">
|
||||
<p *ng-if="true">
|
||||
<cmp-with-ancestor #child></cmp-with-ancestor>
|
||||
</p>
|
||||
</some-directive>`,
|
||||
directives: [SomeDirective, CompWithAncestor, If]
|
||||
directives: [SomeDirective, CompWithAncestor, NgIf]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
|
@ -728,8 +728,8 @@ export function main() {
|
|||
|
||||
it('should support render global events from multiple directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.overrideView(MyComp, new View({
|
||||
template: '<div *if="ctxBoolProp" listener listenerother></div>',
|
||||
directives: [If, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
|
||||
template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
|
||||
directives: [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
|
||||
}));
|
||||
|
||||
tb.createView(MyComp, {context: ctx}).then((view) => {
|
||||
|
@ -894,8 +894,8 @@ export function main() {
|
|||
it('should raise an error for missing template directive (2)', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
expectCompileError(
|
||||
tb,
|
||||
'<div><template *if="condition"></template></div>',
|
||||
'Missing directive to handle: <template *if="condition">',
|
||||
'<div><template *ng-if="condition"></template></div>',
|
||||
'Missing directive to handle: <template *ng-if="condition">',
|
||||
() => async.done()
|
||||
);
|
||||
}));
|
||||
|
@ -903,8 +903,8 @@ export function main() {
|
|||
it('should raise an error for missing template directive (3)', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
expectCompileError(
|
||||
tb,
|
||||
'<div *if="condition"></div>',
|
||||
'Missing directive to handle \'if\' in MyComp: <div *if="condition">',
|
||||
'<div *ng-if="condition"></div>',
|
||||
'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
|
||||
() => async.done()
|
||||
);
|
||||
}));
|
||||
|
|
|
@ -17,7 +17,7 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
|
|||
import {QueryList} from 'angular2/src/core/compiler/query_list';
|
||||
import {Query} from 'angular2/src/core/annotations_impl/di';
|
||||
|
||||
import {If, For} from 'angular2/angular2';
|
||||
import {NgIf, For} from 'angular2/angular2';
|
||||
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
@ -45,7 +45,7 @@ export function main() {
|
|||
it('should reflect dynamically inserted directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template =
|
||||
'<div text="1"></div>' +
|
||||
'<needs-query text="2"><div *if="shouldShow" [text]="\'3\'"></div></needs-query>' +
|
||||
'<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' +
|
||||
'<div text="4"></div>';
|
||||
|
||||
tb.createView(MyComp, {html: template}).then((view) => {
|
||||
|
@ -113,7 +113,7 @@ class TextDirective {
|
|||
|
||||
@Component({selector: 'my-comp'})
|
||||
@View({
|
||||
directives: [NeedsQuery, TextDirective, If, For]
|
||||
directives: [NeedsQuery, TextDirective, NgIf, For]
|
||||
})
|
||||
class MyComp {
|
||||
shouldShow: boolean;
|
||||
|
|
|
@ -19,12 +19,12 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
|
|||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {If} from 'angular2/src/directives/if';
|
||||
import {NgIf} from 'angular2/src/directives/ng_if';
|
||||
|
||||
export function main() {
|
||||
describe('if directive', () => {
|
||||
it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
|
||||
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
@ -35,7 +35,7 @@ export function main() {
|
|||
}));
|
||||
|
||||
it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
|
||||
var html = '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
@ -46,7 +46,7 @@ export function main() {
|
|||
}));
|
||||
|
||||
it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
|
||||
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.context.booleanCondition = false;
|
||||
|
@ -69,7 +69,7 @@ export function main() {
|
|||
}));
|
||||
|
||||
it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>';
|
||||
var html = '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.context.booleanCondition = false;
|
||||
|
@ -104,9 +104,9 @@ export function main() {
|
|||
it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html =
|
||||
'<div>' +
|
||||
'<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
|
||||
'<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
|
||||
'<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
|
||||
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
|
||||
'<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
|
||||
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
|
||||
'</div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
|
@ -132,7 +132,7 @@ export function main() {
|
|||
if (!IS_DARTIUM) {
|
||||
it('should not add the element twice if the condition goes from true to true (JS)',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
|
||||
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
@ -150,7 +150,7 @@ export function main() {
|
|||
|
||||
it('should not recreate the element if the condition goes from true to true (JS)',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
|
||||
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
@ -168,7 +168,7 @@ export function main() {
|
|||
if (IS_DARTIUM) {
|
||||
it('should not create the element if the condition is not a boolean (DART)',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
|
||||
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
expect(() => view.detectChanges()).toThrowError();
|
||||
|
@ -183,7 +183,7 @@ export function main() {
|
|||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@View({directives: [If]})
|
||||
@View({directives: [NgIf]})
|
||||
class TestComponent {
|
||||
booleanCondition: boolean;
|
||||
nestedBooleanCondition: boolean;
|
|
@ -144,12 +144,12 @@ export function main() {
|
|||
describe('elements with *directive_name attribute', () => {
|
||||
|
||||
it('should replace the element with an empty <template> element', () => {
|
||||
var rootElement = el('<div><span *if></span></div>');
|
||||
var rootElement = el('<div><span *ng-if></span></div>');
|
||||
var originalChild = rootElement.childNodes[0];
|
||||
var results = createPipeline().process(rootElement);
|
||||
expect(results[0].element).toBe(rootElement);
|
||||
expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template class="ng-binding" if=""></template></div>');
|
||||
expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *if=""></span>')
|
||||
expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template class="ng-binding" ng-if=""></template></div>');
|
||||
expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *ng-if=""></span>')
|
||||
expect(results[2].element).toBe(originalChild);
|
||||
});
|
||||
|
||||
|
|
|
@ -56,15 +56,15 @@ export function main() {
|
|||
@View({
|
||||
directives: [If, For, DummyComponent, DummyDirective, DynamicDummy],
|
||||
template: `
|
||||
<div *if="testingPlainComponents">
|
||||
<div *ng-if="testingPlainComponents">
|
||||
<dummy *for="#i of list"></dummy>
|
||||
</div>
|
||||
|
||||
<div *if="testingWithDirectives">
|
||||
<div *ng-if="testingWithDirectives">
|
||||
<dummy dummy-decorator *for="#i of list"></dummy>
|
||||
</div>
|
||||
|
||||
<div *if="testingDynamicComponents">
|
||||
<div *ng-if="testingDynamicComponents">
|
||||
<dynamic-dummy *for="#i of list"></dynamic-dummy>
|
||||
</div>
|
||||
`
|
||||
|
|
|
@ -3,7 +3,7 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
|
|||
import {PromiseWrapper} from 'angular2/src/facade/async';
|
||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {ScrollAreaComponent} from './scroll_area';
|
||||
import {If, For} from 'angular2/directives';
|
||||
import {NgIf, For} from 'angular2/directives';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {document} from 'angular2/src/facade/browser';
|
||||
|
||||
|
@ -14,7 +14,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
|
||||
@Component({selector: 'scroll-app'})
|
||||
@View({
|
||||
directives: [ScrollAreaComponent, If, For],
|
||||
directives: [ScrollAreaComponent, NgIf, For],
|
||||
template: `
|
||||
<div>
|
||||
<div style="display: flex">
|
||||
|
|
|
@ -10,7 +10,7 @@ import 'package:angular2/src/test_lib/benchmark_util.dart';
|
|||
<div style="display: flex">
|
||||
<scroll-area scroll-top="scrollTop"></scroll-area>
|
||||
</div>
|
||||
<div ng-if="scrollAreas.length > 0">
|
||||
<div *ng-if="scrollAreas.length > 0">
|
||||
<p>Following tables are only here to add weight to the UI:</p>
|
||||
<scroll-area ng-repeat="scrollArea in scrollAreas"></scroll-area>
|
||||
</div>
|
||||
|
|
|
@ -50,8 +50,8 @@ main() {
|
|||
selector: 'tree',
|
||||
map: const {'data': '=>data'},
|
||||
template: '<span> {{data.value}}'
|
||||
'<span ng-if="data.right != null"><tree data=data.right></span>'
|
||||
'<span ng-if="data.left != null"><tree data=data.left></span>'
|
||||
'<span *ng-if="data.right != null"><tree data=data.right></span>'
|
||||
'<span *ng-if="data.left != null"><tree data=data.left></span>'
|
||||
'</span>')
|
||||
class TreeComponent {
|
||||
var data;
|
||||
|
|
|
@ -23,7 +23,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
<div>
|
||||
<label>Title:</label> <br/>
|
||||
<input type="text" control="title"/>
|
||||
<div *if="! header.controls.title.valid && header.controls.title.dirty">
|
||||
<div *ng-if="! header.controls.title.valid && header.controls.title.dirty">
|
||||
Title is required
|
||||
</div>
|
||||
</div>
|
||||
|
@ -31,7 +31,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
<div>
|
||||
<label>Description:</label> <br/>
|
||||
<textarea control="description"></textarea>
|
||||
<div *if="! header.controls.description.valid && header.controls.description.dirty">
|
||||
<div *ng-if="! header.controls.description.valid && header.controls.description.dirty">
|
||||
Description is required
|
||||
</div>
|
||||
</div>
|
||||
|
@ -79,7 +79,7 @@ class HeaderFields {
|
|||
<option value="checkbox">Checkbox</option>
|
||||
<option value="textarea">Textarea</option>
|
||||
</select>
|
||||
<div *if="! question.controls.type.valid && question.controls.type.dirty">
|
||||
<div *ng-if="! question.controls.type.valid && question.controls.type.dirty">
|
||||
Type is required
|
||||
</div>
|
||||
</div>
|
||||
|
@ -87,15 +87,15 @@ class HeaderFields {
|
|||
<div>
|
||||
<label>Question:</label> <br/>
|
||||
<input type="text" control="questionText">
|
||||
<div *if="! question.controls.questionText.valid && question.controls.questionText.dirty">
|
||||
<div *ng-if="! question.controls.questionText.valid && question.controls.questionText.dirty">
|
||||
Question is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *if="question.contains('responseLength')">
|
||||
<div *ng-if="question.contains('responseLength')">
|
||||
<label>Response Length:</label> <br/>
|
||||
<input type="number" control="responseLength">
|
||||
<div *if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
|
||||
<div *ng-if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
|
||||
Length is required
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue