EXCEPTION: Unexpected directive value 'undefined' on the View

[Zlatko Josic]

Hi,

I'm getting this exception: EXCEPTION: Unexpected directive value 'undefined' on the View of component.

I have component Application which contains EditView components. Every edit-view component can contain Dialog component.

I want Dialog component contains Application component. Dialog component contains own instance of Application component. 

I get above exception when I add Application component in declaration of Dialog component, 

@View({

templateUrl: "component/dialog/baf-dialog.html",

directives:[Appplication]

})

Thanks for any idea.

Zlatko

[Eric Martinez]

Zlatko,

you've need to show more code.

Here are my guessings

- Your component is Application, not Appplication (note the 3 p's)

- Your Application component is defined after your Dialog component, so you should have to use forwardRef

  like this :

directives : [(forwardRef() => Application)]

Regards,

[Zlatko Josic]

#1 It was my error in the post. In a code it is ok.

#2 I hold my components in folders. Application's folder is before Dialog's folder. I have tried with forwardRef (i see it for the first time) and I'am getting this error:

EXCEPTION: Unconditional component cycle in Application

this is application.ts:

import {Component, View} from "angular2/angular2";

import {EditView} from "component/editview/editview";

import {ApplicationModel} from "model/applicationmodel";

import {EditViewModel} from "model/editviewmodel";

import {NgFor, NgIf} from "angular2/angular2";

@Component({

selector: "application",

properties: ["model:model"]

})

@View({

templateUrl: "component/application/application.html",

directives: [EditView, NgFor, NgIf]

})

export class Application {

model: ApplicationModel;

isEditViewActive(editView: EditViewModel) {

return editView.active;

}

isForShow(index: number) {

if (index == 0) return true;

else false;

}

getClassForShow(editView: EditViewModel) {

if (editView.active) return "active";

else "";

}

private selectChild(model: EditViewModel){

if (model.children.length >0){

var active = model.children.filter(value =>value.active)

if (!active){

var child = model.children[0];

child.active = true;

this.selectChild(child);

}

}

}

}

editview.ts:

import {Component, View} from "angular2/angular2";

import {NgFor, NgIf} from "angular2/angular2";

import {Toolbar} from "component/toolbar/toolbar";

import {EditViewModel} from "model/editviewmodel";

import {TableEditView} from "component/editview/table-editview";

import {SingleEditView} from "component/editview/single-editview";

import {BafDialog} from "component/dialog/baf-dialog";

@Component({

selector: "editview",

properties: ["model:model"]

})

@View({

templateUrl: "component/editview/editview.html",

directives: [NgFor, NgIf, Toolbar, TableEditView, SingleEditView,EditView,BafDialog]

})

export class EditView {

model: EditViewModel;

isEditViewActive(editView: EditViewModel) {

return editView.active;

}

isForShow(index: number) {

if (index == 0) return true;

else false;

}

getClassForShow(editView: EditViewModel) {

if (editView.active) return "active";

else "";

}

private selectChild(model: EditViewModel) {

if (model.children.length > 0) {

var active = model.children.filter(value => value.active)

if (!active) {

var child = model.children[0];

child.active = true;

this.selectChild(child);

}

}

}

hasChildren() {

return this.model.children.length > 0;

}

isTableView() {

return this.model.isTableView();

}

selectView(type: number) {

this.model.selectView(type);

}

getTableClass() {

if (this.model.isTableView()) {

return "active";

}

else {

return "";

}

}

getSingleClass() {

if (!this.model.isTableView()) {

return "active";

}

else {

return "";

}

}

}

baf-dialog.ts:

import {Component,View,forwardRef} from "angular2/angular2";

import {EditViewModel} from "../../model/editviewmodel";

import {Application} from "component/application/application";

import {EditView} from "component/editview/editview";

import {Field} from "component/field/field";

 

@Component({

selector: "baf-dialog",

properties:["model"]

})

@View({

templateUrl: "component/dialog/baf-dialog.html",

directives:[(forwardRef(() => Application))]

})

export class BafDialog {

model: EditViewModel;

}

Zlatko

Zlatko

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/tDU5sw1vBwc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Eric Martinez]

Zlatko,

that's a lot of code, but this is what I see

@View({
 templateUrl: "component/editview/editview.html",
 directives: [NgFor, NgIf, Toolbar, TableEditView, SingleEditView,EditView,BafDialog]
})


export class EditView {

In the directives property you are calling 'EditView', the class itself, and it isn't yet defined, and in that same class you are calling 'EditViewModel', so I'm pretty sure that in your directives property it should say 'EditViewModel' instead of 'EditView'.

From my first answer I recommended you to use forwardRef, it was just a guess, but from your project structure you don't need it, so you can have it like it was at the beginning.

Eric,

[Zlatko Josic]

All models are just classes which models concept of model for every component. For example, EditView component has EditViewModel and etc.

EditView component has a template which can contain many EditView components, this is the way how we model master/detail forms. 

So, EditView must be in directives of EditView component and it works fine.

Ok, but with forwardRef I'm getting different exception, in both cases, with and without forwardRef, stack trace does not tell me much.

Zlatko

--

[Eric Martinez]

Zlatko,

it's quite hard to see what's going on. The error message should specify which component is failing (part that you missed in the first message).

See that you are importing correctly every component, see that every component is working separately, and this might be hard, but try to reproduce the error in a plnkr because I honestly see nothing wrong, but that's because I can't test your code. And I would recommend you to remove forwardRef, you don't need it, so you can stick to the original error.

Regards,

[Zlatko Josic]

It looks like it is not possible to have component which refers to parent, parent of parent,...component. If I in BafDialog replace Application component (which is from upper level) with some other component It works. I will ask on angular2 mailing list about it. Maybe it's restriction.

Zlatko

--

[Zlatko Josic]

I have looked at angular2 mailing list  at github. They suggest for problems sending mail to stackoverflow.

So I've posted there:

http://stackoverflow.com/questions/32691899/angular-2-child-component-refers-to-parent-component

Zlatko

[Zlatko Josic]

Finally I have managed it. I've needed two forwardRef. BafDialog is before EditView so I have to use forwardRef in EditView.

But I had to use forwardRef in BafDialog for Application component even the Application component was defined before BafDialog.

@Eric thank you.

Zlaja

On Monday, September 21, 2015 at 11:41:30 AM UTC+2, Zlatko Josic wrote:

I have looked at angular2 mailing list  at github. They suggest for problems sending mail to stackoverflow.

So I've posted there:

http://stackoverflow.com/questions/32691899/angular-2-child-component-refers-to-parent-component

Zlatko

On Mon, Sep 21, 2015 at 11:07 AM, Zlatko Josic <zlatko...@gmail.com> wrote:

It looks like it is not possible to have component which refers to parent, parent of parent,...component. If I in BafDialog replace Application component (which is from upper level) with some other component It works. I will ask on angular2 mailing list about it. Maybe it's restriction.

Zlatko

On Mon, Sep 21, 2015 at 4:17 AM, Eric Martinez <eric.ma...@gmail.com> wrote:

Zlatko,

it's quite hard to see what's going on. The error message should specify which component is failing (part that you missed in the first message).

See that you are importing correctly every component, see that every component is working separately, and this might be hard, but try to reproduce the error in a plnkr because I honestly see nothing wrong, but that's because I can't test your code. And I would recommend you to remove forwardRef, you don't need it, so you can stick to the original error.

Regards,

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/tDU5sw1vBwc/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.

[Zlatko Josic]

Sorry, I haven't <application> tag i BafDialog html template, so it worked. When I put tag in template I have same problem again.

Zlaja

[Zlatko Josic]

Putting forwardRef in BafDialog for Application component has sense. Without forwardRef I'am getting undefined for BafDialog directives. 

With forwardRef compiler is able to find Application directive in BafDialog component and I dont get this error, but I get other error:

Unconditional component cycle in Application

I will try to figure out what is going here.

 

Zlaja

[Zlatko Josic]

I've solved it, definitely now :) I've change model little. Now I have Application -> EditView-> adding BafDialog dynamically -> Application.

In another words I add BafDialog using DynamicComponentLoader. This allows me have deep structure, Application component in BafDialog can have BafDialog also, what was the goal.

Once again, thank you Eric.

Zlaja