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, May 09 '17 at 07:44
I mean I have created some basic directives recently, but not to emit or insert any HTML template. — Devraj Gadhavi, May 09 '17 at 07:48

tanmay · Accepted Answer · 2017-05-09T08:15:20.653

3

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 09 '17 at 08:15

answered May 09 '17 at 07:50

tanmay

7,761
2
19
38

Thank you for the quick response, I'll give it a try! – Devraj Gadhavi May 09 '17 at 07:53
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 May 09 '17 at 08:06
It only gets the `input` elements, not the ``s. Also, I am putting this directive inside a `` tag, like ``. But it is rendered somewhere else on my page not in the `` element. – Devraj Gadhavi May 09 '17 at 08:11
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: ``. But it does not replace the value in the expression with the parameter `Entity1`, it is replacing it with a blank. – Devraj Gadhavi May 09 '17 at 08:21
Maybe because I am passing it as a text variable, not as a `scope` object. Could this be the issue? – Devraj Gadhavi May 09 '17 at 08:22
@DevrajGadhavi yes, as I mentioned, you need to have `entityObj` as a variable in `$scope`. Though there is another way, you can have `entity: "@"` instead of `"="` in the directive definition.. and then pass it like ``. Notice the single quotes inside as well – tanmay May 09 '17 at 08:24
I didn't need the single quotes though, only the `@` instead of `=` did the trick. Putting it in the single quote was rendering it with the single quote. – Devraj Gadhavi May 09 '17 at 08:27
@DevrajGadhavi oh yeah, mistook visualizing it, glad it is working at last :) – tanmay May 09 '17 at 08:28
Yeah, your patience and time paid off to help me. Thank you so very much. Learned a great deal only from your answer and comments. Such as what restrict="A" and "E" are for. What "=" and "@" are for. – Devraj Gadhavi May 09 '17 at 08:37
@DevrajGadhavi no prob, glad it helped! – tanmay May 09 '17 at 08:38

AngularJS create partial template with parameter

1 Answers1