(
}
}
+/**
+ * Enables bindings processing for further instructions
+ * (used while processing "ngNonBindable" element's attribute).
+ */
+export function setBindingsEnabled(): void {
+ bindingsEnabled = true;
+}
+
+/**
+ * Disables bindings processing for further instructions
+ * (used while processing "ngNonBindable" element's attribute).
+ */
+export function setBindingsDisabled(): void {
+ bindingsEnabled = false;
+}
+
/**
* Constructs a TNode object from the arguments.
*
diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts
index 2851737dcc..0693075718 100644
--- a/packages/core/src/render3/jit/environment.ts
+++ b/packages/core/src/render3/jit/environment.ts
@@ -46,6 +46,8 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵnamespaceHTML': r3.namespaceHTML,
'ɵnamespaceMathML': r3.namespaceMathML,
'ɵnamespaceSVG': r3.namespaceSVG,
+ 'ɵsetBindingsEnabled': r3.setBindingsEnabled,
+ 'ɵsetBindingsDisabled': r3.setBindingsDisabled,
'ɵelementStart': r3.elementStart,
'ɵelementEnd': r3.elementEnd,
'ɵelement': r3.element,
diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts
index 5e959cb163..617890bc1a 100644
--- a/packages/core/test/render3/integration_spec.ts
+++ b/packages/core/test/render3/integration_spec.ts
@@ -7,12 +7,12 @@
*/
import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
-import {RenderFlags} from '@angular/core/src/render3';
+import {reference, RenderFlags} from '@angular/core/src/render3';
import {RendererStyleFlags2, RendererType2} from '../../src/render/api';
import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
-import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding, template} from '../../src/render3/instructions';
+import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, setBindingsEnabled, setBindingsDisabled, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding, template} from '../../src/render3/instructions';
import {InitialStylingFlags} from '../../src/render3/interfaces/definition';
import {RElement, Renderer3, RendererFactory3, domRendererFactory3, RText, RComment, RNode, RendererStyleFlags3, ProceduralRenderer3} from '../../src/render3/interfaces/renderer';
import {HEADER_OFFSET, CONTEXT, DIRECTIVES} from '../../src/render3/interfaces/view';
@@ -132,6 +132,132 @@ describe('render3 integration test', () => {
});
+
+ describe('ngNonBindable handling', () => {
+ it('should keep local ref for host element', () => {
+ /**
+ *
+ * Hello {{ name }}!
+ *
+ * {{ myRef.id }}
+ */
+ const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+ if (rf & RenderFlags.Create) {
+ elementStart(0, 'b', ['id', 'my-id'], ['myRef', '']);
+ setBindingsDisabled();
+ elementStart(2, 'i');
+ text(3, 'Hello {{ name }}!');
+ elementEnd();
+ setBindingsEnabled();
+ elementEnd();
+ text(4);
+ }
+ if (rf & RenderFlags.Update) {
+ const ref = reference(1) as any;
+ textBinding(4, interpolation1(" ", ref.id, " "));
+ }
+ }, 5, 1);
+
+ const fixture = new ComponentFixture(App);
+ expect(fixture.html).toEqual('Hello {{ name }}! my-id ');
+ });
+
+ it('should not have local refs for nested elements', () => {
+ /**
+ *
+ * {{ myInput.value }}
+ *
+ */
+ const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+ if (rf & RenderFlags.Create) {
+ elementStart(0, 'div');
+ setBindingsDisabled();
+ element(1, 'input', ['value', 'one']);
+ text(2, '{{ myInput.value }}');
+ setBindingsEnabled();
+ elementEnd();
+ }
+ }, 3, 0);
+
+ const fixture = new ComponentFixture(App);
+ expect(fixture.html).toEqual('{{ myInput.value }}
');
+ });
+
+ it('should invoke directives for host element', () => {
+ let directiveInvoked: boolean = false;
+
+ class TestDirective {
+ ngOnInit() {
+ directiveInvoked = true;
+ }
+
+ static ngDirectiveDef = defineDirective({
+ type: TestDirective,
+ selectors: [['', 'directive', '']],
+ factory: () => new TestDirective()
+ });
+ }
+
+ /**
+ *
+ * Hello {{ name }}!
+ *
+ */
+ const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+ if (rf & RenderFlags.Create) {
+ elementStart(0, 'b', ['directive', '']);
+ setBindingsDisabled();
+ elementStart(1, 'i');
+ text(2, 'Hello {{ name }}!');
+ elementEnd();
+ setBindingsEnabled();
+ elementEnd();
+ }
+ }, 3, 0, [TestDirective]);
+
+ const fixture = new ComponentFixture(App);
+ expect(fixture.html).toEqual('Hello {{ name }}!');
+ expect(directiveInvoked).toEqual(true);
+ });
+
+ it('should not invoke directives for nested elements', () => {
+ let directiveInvoked: boolean = false;
+
+ class TestDirective {
+ ngOnInit() {
+ directiveInvoked = true;
+ }
+
+ static ngDirectiveDef = defineDirective({
+ type: TestDirective,
+ selectors: [['', 'directive', '']],
+ factory: () => new TestDirective()
+ });
+ }
+
+ /**
+ *
+ * Hello {{ name }}!
+ *
+ */
+ const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
+ if (rf & RenderFlags.Create) {
+ elementStart(0, 'b');
+ setBindingsDisabled();
+ elementStart(1, 'i', ['directive', '']);
+ text(2, 'Hello {{ name }}!');
+ elementEnd();
+ setBindingsEnabled();
+ elementEnd();
+ }
+ }, 3, 0, [TestDirective]);
+
+ const fixture = new ComponentFixture(App);
+ expect(fixture.html).toEqual('Hello {{ name }}!');
+ expect(directiveInvoked).toEqual(false);
+ });
+ });
+
describe('Siblings update', () => {
it('should handle a flat list of static/bound text nodes', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {