AngularJS create partial template with parameter

Question

I have gone through below SO questions to get what I want.

create a single html view for multiple partial views in angularjs

angularjs partial template with specific scope - looks close to what I want.

But I believe my case is different from all of them. Hence, the question.

I have got this HTML structure which needs to be repeated numerous times.

<tr>
    <td>
        Enitity1
    </td>
    <td>
        <input type="radio" name="entity1" value="option1" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option2" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option3" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option4" />
    </td>
    <td>
        <input type="radio" name="entity1" value="option5" />
    </td>
</tr>

I want to pass the name of the Entity as a parameter and render this HTML template based on the parameter.

I have created a template like below.

<tr>
    <td>
        {{entity}}
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option1" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option2" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option3" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option4" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option5" />
    </td>
</tr>

My controller

app.controller("entitiesController", ["$scope",
    function entitiesController($scope) {
        $scope.init = function init(entity) {
            $scope.entity= entity;
        };
    }
]);

And I am trying to render the same for multiple entities as below inside a <tbody> element.

<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity1')"></ng-include>
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity2')"></ng-include>
<!-- Some more entities here...-->

But it does not work. It does not throw any error as well in the console.

How do I go about this? What is the proper way of handling this? Is it possible to handle it with a template or should I just put HTML for all the entities manually?

@tanmay Well, I am relatively new to AngularJS. Can you please provide a brief idea how a directive can work in this situation? — Devraj Gadhavi
– Devraj Gadhavi, Commented May 9, 2017 at 7:44
I mean I have created some basic directives recently, but not to emit or insert any HTML template. — Devraj Gadhavi
– Devraj Gadhavi, Commented May 9, 2017 at 7:48

tanmay · Accepted Answer · 2017-05-09 08:15:20Z

4

You can have a directive to do this for you. Something like,

myApp.directive("myEntity", function() {
  return {
    restrict: "E",
    scope: {
      entity: "="
    },
    templateUrl: "Common/entities.html"
  }
})

Now, you can use the template you already created in Common/entities.html which is,

<tr>
    <td>
        {{entity}}
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option1" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option2" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option3" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option4" />
    </td>
    <td>
        <input type="radio" name="{{entity}}" value="option5" />
    </td>
</tr>

Finally, use it like <my-entity entity="entityObj"></my-entity> where entityObj is a variable in your $scope (or accordingly if you use controllerAs syntax)

EDIT: Other way is to have the directive as attribute and not element.

myApp.directive("myEntity", function() {
  return {
    restrict: "A",
    ...
  }
})

And, remove the <tr> from the template. Now, we can use it like,

<tbody>
  <tr my-entity entity="entityObj">
  </tr>
</tbody>

edited May 9, 2017 at 8:15

answered May 9, 2017 at 7:50

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

10 Comments

Devraj Gadhavi Over a year ago

Thank you for the quick response, I'll give it a try!

Devraj Gadhavi Over a year ago

Strange, it's working. However, it only emits the part where there are expressions in the template. That too not inside its parent element but somewhere else. Any ideas?

Devraj Gadhavi Over a year ago

It only gets the input elements, not the <td>s. Also, I am putting this directive inside a <tbody> tag, like <tbody><my-entities entity="entityObj"></my-entity></tbody>. But it is rendered somewhere else on my page not in the <tbody> element.

Devraj Gadhavi Over a year ago

Yeah, the rendering issue is gone now. It is rendering where it is supposed to. But it is not setting the values in the {{}} expressions. I am using it like this: <tr my-entity entity="Entity1"></tr>. But it does not replace the value in the expression with the parameter Entity1, it is replacing it with a blank.

Devraj Gadhavi Over a year ago

Maybe because I am passing it as a text variable, not as a scope object. Could this be the issue?

|

Collectives™ on Stack Overflow

AngularJS create partial template with parameter

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related