0

I'm a AngularJS newbie.

I am looking to pass data when loading partials.

I'd like to have a directive that would allow for dynamic attributes. For example, in a view where an object "company" is defined on the scope I could have:

<partial url:"employees/index.html" query_string: "Fun House Inc" employees="company.employees">

and in a view where the object "employee" is defined:

<partial url:"employees/show.html" employee="employee">

Below is a directive I have written (in coffeescript) that almost works. In the above example the query_string attribute gets passed (thanks to the scope[k] = v in the link function) but the employees attribute does not namely it passes the string not the evaluated object.

App.directive "partial", ->
  restrict: "E"

  scope:
    attribute: "@"
    expression: "&"
    model: "="
    array: "="
    data: "="

  templateUrl: (el,attrs)->
    "/assets/partials/" + attrs.url

  link: (scope,el,attrs)->
    for k, v of attrs
      scope[k] = v if (k[0] != "$" && !scope[k]?)

In this directive I have defined array, model, and data so I can hack around my problem by doing something like

<partial url:"employees/index.html" query_name: "Fun House Inc" array="company.employees">

and

<partial url:"employees/show.html" model="employee">

in my views. That said I am not super happy with this solution and I am surprised there isn't a ready made solution out there. Am I going about this all wrong? Is there a better way to do this, or a way to fix my directive so that it works the way I want it to?

brook
  • 247
  • 2
  • 15

1 Answers1

0

So, what is essentially being proposed is a way to initialize data for a particular view. If that is the case, a different controller really should be specified for each view. This is exactly the approach that the official Angular tutorial takes.

I'd recommend taking a look at the tutorial chapters on routing (defining template paths and controllers assigned to those paths) and custom services (getting data from an external source, and then initializing $scope variables for two separate controllers). What you're describing really is built into Angular as a fundamental application architecture, and I'd recommend not making a directive to try and duplicate what Angular already handles well.

user3043124
  • 488
  • 1
  • 3
  • 10
  • Thanks for the links. I am not sure if they are what I am looking for though. I am imagining a single view with several of these partials loaded into it. I come from a rails background and am wanting to structure my code similarly as I do with rails (**maybe this is the wrong approach?**). To let you know where I am going with this... I have a complicated schema ModelA has_many ModelB's which has_many ModelC's which has_one ModelD and so forth. I'd like to create a form which will allow me to create/edit the entire tree (ModelA and all its children/grandchildren) on single page. – brook Jan 08 '14 at 05:42
  • Gotcha. It does seem like there are similar questions on the site, such as http://stackoverflow.com/questions/13422966/how-to-specify-model-to-a-nginclude-directive-in-angularjs. – user3043124 Jan 08 '14 at 05:50
  • that one is very close - there are a lot of similar questions but i haven't found any that handle my requirements: dynamic url for the templateUrl (my directive solves this), dynamic data passed both as strings (such as the "query_string" above in which does work with my directive) as well as objects that need to processed (such as "company.employees" which I can only get to work by having explicitly named parameters like **array** and **data** ). thanks again for your help though. I hadn't gone through the tutorial you sent and though its not what I needed here it is going to be useful to me – brook Jan 08 '14 at 05:56