AngularJS pass variable through to a template

Question

I want to pass a variable or text through to a template so that it shows the value inside my template.

I come across jsFiddle which shows it working but it uses ng-repeat. Is there a simplere way to do this without using ng-repeat?

<div ng-repeat="name in ['John']" ng-include="'partial.html'"></div>
<div ng-repeat="name in ['Jack']" ng-include="'partial.html'"></div>

<script type="text/ng-template" id="partial.html">
   <div>The name is {{ name }}</div>
</script>

Using just one div?? <div ng-repeat="name in ['John','Jack']" ng-include="'partial.html'"></div> — Hackerman
– Hackerman, Commented Nov 19, 2014 at 17:19
The above divs would be split to other parts of a page so no need for ng-repeat — ngplayground
– ngplayground, Commented Nov 19, 2014 at 17:20

Davin Tryon · Accepted Answer · 2014-11-19 17:23:52Z

7

http://jsfiddle.net/f97keutL/

<div ng-controller="ctrl">
   <div ng-include="'partial.html'"></div>
</div>
<script type="text/ng-template" id="partial.html">
   <div>The name is {{ name }}</div>
</script>

JS:

var myApp = angular.module('myApp',[]);

myApp.controller('ctrl', function($scope) {
    $scope.name = "John"; 
});

You just set the variable in the scope, and include the template?

edited Nov 19, 2014 at 17:23

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

answered Nov 19, 2014 at 17:20

dave

65k6 gold badges81 silver badges98 bronze badges

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

5 Comments

ngplayground Over a year ago

I come across <div ng-init="name= 'John'" ng-include="'partial.html'"></div> Which seems to work. Could I get a second opinion?

bhantol Over a year ago

Second opinion: Using ng-init is rather discouraged. It is encouraged to use controllers to do this initialization. The reason being a simple separation of concern between how and where a model should be initialized. And controllers have primary job of making the model available to the view. Views should not manipulate or even initialize any models.

dave Over a year ago

You could do ng-init, but in my experience it's rare to use it, depends entirely on use case though. In general the html should describe what to show (i.e. show the users name), and your model (the javascript) would contain the value (what the users name is). Using ng-init puts the value in the view, which I would generally advise against.

Travis Heeter Over a year ago

@dave So I have a controller like this (let's say $scope is s for brevity): s.gridOne; s.gridTwo; s.notAGrid; and I want to create a template to show just the grids. How could I send just the grids? I can't do ng-repeat = "grid in s" because one of the elements are not a grid.

dave Over a year ago

@Travis s.grids = [s.gridOne, s.gridTwo], ng-repeat = "grid in s.grids"

Collectives™ on Stack Overflow

AngularJS pass variable through to a template

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related