Multiple use of a template in the same page in AngularJS

Question

I have some repetitive components on my AngularJS page such as billingAddress, shippingAddress and primaryAddress. I have created a separate template file for address components and expected to be able to use ng-include to include the template thrice on my page. I am unable to find documentation around passing models to templates. What I am looking for is something like

<div ng-include="address.tpl.html" ng-model="{address: primaryAddress}"></div>
<div ng-include="address.tpl.html" ng-model="{address: billingAddress}"></div>
<div ng-include="address.tpl.html" ng-model="{address: shippingAddress}"></div>

Is this even possible as of now?

why not to make it as a directive?

Eugene P.
– Eugene P.

2014-06-02 15:48:55 +00:00
Commented Jun 2, 2014 at 15:48 — Eugene P.
– Eugene P., Commented Jun 2, 2014 at 15:48

1st4ck · Accepted Answer · 2014-06-02 15:55:57Z

1

his is for what directives are made.

angular.module('docsSimpleDirective', [])
  .directive('myAddress', function() {
    return {
      scope: {
          address : '='
      },
      templateUrl: 'address.tpl.html'
    };
  });

Then in your template simple use the $scope.address. On declaring the directive you should use it like this.

<my-address address="primaryAddress"><my-address>
<my-address address="billingAddress"><my-address>
<my-address address="shippingAddress"><my-address>

answered Jun 2, 2014 at 15:55

1st4ck

1,26711 silver badges11 bronze badges

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

2 Comments

Amit Over a year ago

I still think AngularJS should make it easier to pass in models to ngInclude's scope. The best practices lists tell me that directives are meant to be used when you have some DOM manipulation that you can't get away. But, I think directive is the only option I have at the moment.

1st4ck Over a year ago

Directives are usefull when you need to reuse some code that involves HTML. That is exacly what you needed here.

Collectives™ on Stack Overflow

Multiple use of a template in the same page in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related