Menu
I would like to use the same HTML template in 3 places, just each time with a different model. I know I can access the variables from the template, but there names will be different.
Is there a way to pass a model to the ngInclude?
This is what I would like to achieve, of course the attribute add-variable does not work now. Then in my included template, I would acces the detailsObject and its properties.
<pane title="{{projectSummary.ProjectResults.DisplayName}}"> <h2>{{projectSummary.ProjectResults.DisplayName}}</h2> <ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include> </pane> <pane title="Documents" header="true"></pane> <pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}"> <h2>{{document.DisplayName}}</h2> <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': document}"></ng-include> </pane> <pane ng-repeat="header in [1]" title="Languages" header="true"></pane> <pane ng-repeat="language in projectSummary.ResultsByLanguagePairs" title="{{language.DisplayName}}"> <h2>{{document.DisplayName}}</h2> <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include> </pane> If I took a bad approach with using ng-include, is there something else I should try?
489
ngModel is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value.
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
ng-init directive It is used to declare and assign values to the variables for an AngularJS application.
The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope. You can specify that the binding should wait for a specific event to occur, or wait a specific number of milliseconds, and more, see the legal values listed in the parameter values below.
There is a rather simple solution, although I must admit, it's not what Misko would recommend. But if creating a directive is an overkill for you and getting Brice's patch is not feasible then the following will help you.
<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> It's quite evident why it works. See an example here: http://jsfiddle.net/Cndc6/4/
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
