ng-include passing parameters to templates

[martymartino]

Hi

Im trying to re-use a template on a page, with a slight variation (in this case, address input for delivery and address input for billing)

I have something like:

  <ng-include src="'partials/addressform.html'" onload="type='billing';"></ng-include>

  <ng-include src="'partials/addressform.html'" onload="type='delivery';"></ng-include>

However since the type is getting bound to the parent scope the second include wipes out the first so on the page they both appear as type delivery.

is there anyway to apply this onload expression to the child scope - i.e. the scope of the included template?

Any suggestions much appreciated

thanks

Martin

[Pawel Kozlowski]

Hmm, effectively, I would also expect onLoad to be executed in a
newly created scope...
Here is the jsFiddle illustrating the pb:
http://jsfiddle.net/pkozlowski_opensource/ecyDk/1/

I think we could open a bug report / feature request for this as for
me it would make sense to be able to specify an expression to be
evaluated in a child scope.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Brice Burgess]

Looking at the code for ngInclude it's clear that onLoad is executed on the directive's scope (the PARENT scope of the INCLUDED content/scope). Further, an "includeContentLoaded" is emitted from the child scope (broadcasted upwards, so that it will not reach the child scope). This event could theoretically be used to pass the `type=billing` assignment.. although being able to flag the onLoad expression to be evaluated against the include's scope would be helpful here. E.g. something like <ng-include src="'partials/addressform.html'" childOnload="type='billing';">.

Below is a relevant reference to the current (AngularJS 1.0.1) implementation of ngInclude

return {
restrict: 'ECA', ...
compile: function(element, attr) {
  var srcExp = attr.ngInclude || attr.src,
      onloadExp = attr.onload || '', ...
      autoScrollExp = attr.autoscroll;

  return function(scope, element) {...
    scope.$watch(srcExp, function(src) {
      if (src) {
        $http.get(src, {cache: $templateCache}).success(function(response) { ...

          childScope.$emit('$includeContentLoaded');
          scope.$eval(onloadExp);
        })....
      }
    });
  };
}
};

would submitting a patch to include childOnload behavior make sense && if so; what would you suggest the attribute be named?

> angular+unsubscribe@googlegroups.com.

[Pawel Kozlowski]

Hi Brice!

On Thu, Aug 2, 2012 at 9:59 PM, Brice Burgess <bric...@gmail.com> wrote:

> would submitting a patch to include childOnload behavior make sense && if
> so; what would you suggest the attribute be named?

If you ask me it would definitively make sense, this would enable
Tiles-like (http://tiles.apache.org/) way of composing includes, this
could be super-cool! As for naming - don't know: onLoaded? afterLoad?
onInclude?

Cheers,
Pawel

[Brice Burgess]

Pawel,

I liked the name of onInclude, because it nicely coincides with onLoad. I've made a patch and pull request which can be seen @
  https://github.com/angular/angular.js/pull/1227

A demo of this behavior using an Angular build with the above patch is available @
  http://jsfiddle.net/briceburg/NMmyY/1/

Hopefully the Angular gods will be able to get through issues+pull requests as per the blog post ! ;)

~ Brice

[martymartino]

Hi guys!

thanks so much for all this great info/help.

Brice, I hope your patch gets taken up, it's a great addition for just a few lines of code! I'm definitely going to use your patch!

As for naming; onInclude is nice, but I think that something like onLoadChild would be more informative (although uglier).

thanks again

Martin

[Denis Pshenov]

Take a look here for a simple solution: http://stackoverflow.com/a/20639139/220086

In short:

<div ng-repeat="name in ['A']" ng-include="'partial.html'"></div>

<div ng-repeat="name in ['B']" ng-include="'partial.html'"></div>

<script type="text/ng-template" id="partial.html"> <div>{{ name }}</div> <script>

[Michael Hopper]

Why not just use ng-init?  For example:

  <div ng-init="name = 'Mike'" ng-include="'partial.html'"></div>

[Andrew Pashkin]

+1 - seems like ngInit fits well for that purpose (and works too).

[Atluri Ajith Kumar]

ng-init doesn't work for me..

http://plnkr.co/edit/Yg7Xc6?p=preview

[Sander Elias]

Hi Atluri,

Sure it does: http://plnkr.co/edit/SKDCES?p=preview
In your version, both templates shared a single scope/controller. In a single scope, there can only be one scope.name
so If you change the name then, it will change everywhere where you are using it.

Regards
Sander

​

[Atluri Ajith Kumar]

got it! Thanks Sander. :)

[Kranthi Kiran]

adding an ng-if="'true'" inside the ng-include directive did the trick for me. I guess ng-if creates a new scope for the containing element.

In your case, the code would look like -

<ng-include src="'partials/addressform.html'" onload="type='billing';" ng-if="'true'"></ng-include>
 <ng-include src="'partials/addressform.html'" onload="type='delivery';" ng-if="'true'"></ng-include>

[Eric Eslinger]

Is there a reason you'd do it this way rather than making a custom directive with an isolate scope?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, 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.

[Luiz Rolim]

clever solution Kranthi.

thanks

[Naren]

Thanks a lot for the simple solution.