angularjs: single html template for multiple controllers

Question

I have been thinking this question for a while, what's best practice to reuse html template in angularjs given the view(html) is bound to controller in case of two-way data binding ?

for example:

<a ng-repeat="(uuid, parent) in pageData.parents" class="list-group-item list-group-item-padding"  ng-click="click(parent.uuid)">
    <table class="table-grid">
        <tbody>
        <tr>
            <td>
                {{parent.name}}
            </td>
            <td>
                <span class="pull-right {{parent.stateCss}} state-label-font">{{parent.state}}</span>
            </td>
        </tr>
        </tbody>
    </table>
</a>

in above snip of code, the view is bound to some controller let's say ParentController, you can see all data in view are named after 'parent'. Now I have another controller say ChildController which wants to reuse the same html piece of code but the data are named after 'child'. That says data binding in this example will change to {{child.name}}, {{child.stateCss}} ...

the way Angularjs binds model to view kind of causes a lot of duplicate html code even they look quite similar. Actually not Angularjs, server side MVC framework has the same problem as long as you hard code model variable name in view file for later rendering.

I saw some web application not using MVC has a few html code which setup basic skeleton of page, then uses JQuery to dynamically feed data to view in programming way. This JQuery way is not my preference but it does save lots of html code, a application I think is fairly complex only as ~1000 html code that accomplishes tasks like ~10 sub pages, list, wizards ...

In angularjs, one solution I can imagine is replacing model variables in view with customized directive to change their scope/controller at runtime. Or having a directive receiving a configuration object which generates html element binding to configured controller/scope in compiling time.

what's your thought?

Daniel Schaffer · Accepted Answer · 2013-09-12 02:14:46Z

2

The Angular UI Bootstrap project accomplishes this using a combination of directives and the $templateCache service. Essentially, $templateCache is prepopulated with the HTML template and given a static url like template/somedirective/snippetname.html. Then, the directive specifies that url as its templateUrl. Take a look at the Writing Directives (Long Version) section of the guide, or even better, look at some source code!

answered Sep 12, 2013 at 2:14

Daniel Schaffer

58.1k32 gold badges120 silver badges166 bronze badges

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

1 Comment

zx_wing Over a year ago

yes. Angular UI is an example of reuse, the dialog is a good example. it seems to make reuse is a advanced topic which is not easy to master

digao_mb · Accepted Answer · 2013-09-12 02:08:19Z

0

I think for reuse of html the proper solution is to make custom directives. They are a little difficult at first, but you can gain a lot of productivity with them.

answered Sep 12, 2013 at 2:08

digao_mb

1,29416 silver badges23 bronze badges

Collectives™ on Stack Overflow

angularjs: single html template for multiple controllers

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related