2

I'm new to AngularJS and I'm facing an issue related to Views. I have a model of this kind (pseudo-code)

class Contract{
  int IdContract;
  int Title;
  int IdPerson;
}

class Person{
  int IdPerson;
  string FirstName;
 string LastName;
}

Now, I should have a view contractEdit.html that matches this route myapp/contract/edit. In that view, there should be some sort of nested view for showing the Person details linked to the Contract I'm editing. How should I do that with Angular ? I'm confused with Views and Directives... Should it be a Directive ?

Any help would be much appreciated

Improve this question
2
  • You could use ng-include to pull in a partial to show the Person details. Commented Apr 12, 2013 at 3:07
  • sorry I just saw your post, I had missed it. Indeed, it seems possible to use ng-include, but as far as my research goes, it seems more common and more clean to use a directive, even though other people tend to say one should use ui-router. I think I'll go for the directive way. Commented Apr 13, 2013 at 15:32

2 Answers 2

Reset to default
2

There are multiple ways to solve this problem.

First is very simple, and very dirty, use ng-include. E.g. create a template file called PersontTmpl.html:

<div>
  {{person.firstName }} {{person.lastName}}
</div>

Now whenever you need to display a person, make sure that there is a person object in a scope, and add following line:

<ng-include src="'somepathToTemplate/PersonTmpl.html'"></ng-include>

Well this is dirty solution, because you will always have to expose person to the scope under the same name.

Second way is to create a directive:

angular.module('nameofyourmodule')
  .directive('person', function () {
    return {
      templateUrl: 'somepathToTemplate/PersonTmpl.html',
      restrict: 'AE',
      scope:{person:"="}
    };
  });

Now when you want to display 'currentPerson' you have to do following thing in other templates/views:

 <div person='currentPerson' />

This invocation will display person template initialised with 'currentPerson' object.

To really understand how directives work I recommend to watch Writing Directives (by Misko Hevery) presentation, or try reading official documentation

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I must have been through the entire documentation already, and it does not really provide any example to solve this specific (but extremely common) problem. So, thank you for giving me some clues. I've actually come to the conclusion that Directives are the way to go. My 'nested view' is actually a lot more complicated than just displaying a firstname and a lastname (but you'd have guessed that). So I'll need to have a controller for that directive too. But it seems possible, I just don't know if it's good practice to have a lot of logic in a directive...
@ Well, it is totally valid to have a controller in directive (there is a special param in directive definition object), also it is the only robust way to pass parameters into controller. Also directive itself will not contain any logic. All of it will be delegated into controller and template, directive itself will simply reuse it, and they will share the same scope. I can add example how to use controller in directive if you want to
it's ok, I've seen a bunch of examples online. But they are all very simple ones. I think I'll have to post a new question on SO to explain the full picture of what I'm trying to achieve. I need to play a bit with directives first. thanks!
0

It should not be directive.

You think about nested views and your right. Currently AngularJS doesn't support nested views but there is Router project which does

If you don't want to go that far then stick to views.

Improve this answer

3 Comments

I'm super super confused with Angular. I've come across this link (bennadel.com/blog/…) where this guy explains how he's developped a work-around to the lack of nested views. Then I've come accross this other link (jan.varwig.org/archive/…) where they guy explains that we should not use nested views and use directives instead. I've just been through the directive documentation. I'd be tempted to use them in this particular case. Then there's you, telling me I should not :)
As you noted first guy showed work around and that's good. I recommend that you read these github.com/angular-ui/ui-router/wiki and take a look at sample angular-ui.github.io/ui-router/sample As to the second guy he kinda has a point because people might have been approaching nested views the wrong way. UI router seems like a right way though. You can google other nested views related questions and it all points to Router
So both guys are right. That is hard to make a decision. I can see the point of ui-router because it seems more like I'm used to (I come from the ASP.net MVC world, where you have URL of the type /controller/action/parameter. On the other hand, ui-router seems to be a standalone project, which might never be part of Angular. I'm about to start a big project, so I'm a bit scared to start using this kind of projects (not that it's bad, but it may not be long-lasting. Hard life...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.