I have the following html in an angular controller
<div ng-include="'Module.' + entry.Module.View + '.template'"></div>
The value of entry.Module.View is "TextField".
Inside the same controller this script tag exists:
<script type="text/ng-template" id="Module.TextField.template">
<label>{{entry.Label}}</label>
<input type="text" ng-model="entry.Value">
</script>
The problem is that this tries to load the template from an external source. Is there another tag or method better suited to load an inline script template from a variable?
You can create a variable in controller and use ng-include as an element instead of attribute.
<ng-include src="moduleUrl"></ng-include>
And in controller, you have something like (or if you use vm, change it accordingly)
$scope.moduleUrl = 'Module.' + $scope.entry.Module.View + '.template';
Related
In my directive template I have
<div id="chartdiv-{{name}}" style="width:100%;height:100%"></div>
where name is variable and assigned to each directive when it is created.
The chart is created with
$('#chartdiv-'+scope.name).highcharts(settings);
But this doesn't work. Everything works fine if I don't use the name variable. Any ideas?
Change it like this,
<div id="{{ 'chartdiv-' + name }}"></div>
EDIT
If you are creating template inside a directive, it should be
<div id="chartdiv-{{$scope.name}}"></div>
I have scope variable in angularjs controller, let's say :-
$scope.newlangSuffix = 'en';
And i am trying to include a php file in template using this scope variable :-
<div ng-include="'/catalogfilterhtml_{{newlangSuffix}}.php'"></div>
but unable to do that. how can i achieve this thing?
<div ng-include="'/catalogfilterhtml_{{newlangSuffix}}.php'"></div>
That's incorrect. ng-include expects an angular expression. And '/catalogfilterhtml_{{newlangSuffix}}.php' is not a valid one, because angular expressions can't contain double mustaches.
A correct one would be
<div ng-include="'/catalogfilterhtml_' + newlangSuffix + '.php'"></div>
You should type it like this:
<div ng-include ="'/catalogfilterhtml_'+newlangSuffix+'.php'"></div>
<script type="text/ng-template" id="popupTemplate">
<div id="myPopup">
<input type="checkbox" name="backup"/><label for="backup">Backup</label>
</div>
</script>
I want to access the popup div from outside script for adding more check boxes dynamically. I tried using jQuery $("#myPopup") but it is not accessing the element. Is there any way to achieve this?
The template written inside <script type="text/ng-template"></script> will be stored in $templateCache with the given id.
Retrieve the template in your controller using -- $templateCache.get('popupTemplate')
Update it.
Add it back to the $templateCache using -- $templateCache.put('popupTemplate', '__updatedContent__')
I have a script tag in my DOM that contains a template like the folllowing:
<body>
<div ng-insert='ui'></div> <!--inject ui here-->
<script id='ui' type='text/html'>
<div ng-model='name'></div>
</script>
</body>
...and I wish to add it into the DOM using a directive like the ng-insert I made up above.
I haven't found a built in one to do this yet. ng-include seems to only load in remote templates. I think this would be a reasonably simple directive to write, which I may try, but I wanted to make sure I'm not reinventing something that already exists.
ng-include can be used in combination with predefined templates using type="text/ng-template" on a script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template
</script>
Note: the script tag containing the template does not need to be included in the head of the document, but it must be below the ng-app definition.
later use this to get the template:
<div ng-include="'templateId.html'"></div>
Note: the template's name is in single quotes, as a string.
You can also get this template via JavaScript:
$templateCache.get('templateId.html')
Refernces:
http://docs.angularjs.org/api/ng.directive:script
http://docs.angularjs.org/api/ng.$templateCache
I think ng-include and script type="text/ng-template" is what you're looking for
http://jsfiddle.net/mrajcok/MfHa6/
PROBLEM
I have a dom element, which i want to detach it from its parent and append it at some other location in the dom, angularjs way.
i could easily do this in jquery with detach and appendto, but i am unable, to find the same in angularjs way.
var detached = jQuery('.toBeDetached');
jQuery('.itemMaximixed').append(detached);
Note i need to detach since the element contains a map in it.
It may not be applicable in your case, but you can use the transclude facility of an Angular directive to do this.
I don't think attaching and deattaching would work. What I can suggest is destroying the recreating the template under different node.
You can use something like ng-if in Angular 1.1.5 for this. Using multiple ng-if and associated conditions you can bind the same template at multiple location, which ever ng-if returns true that template would get loaded.
The template code can be duplicated or be out inside a ng-template script. Something like this
<div id='parent'>
<div id='child1'>
<div ng-if='condition1'><ng-include src='datatemplate' /></div>
</div>
<div id='child2'>
<div ng-if='condition2'><ng-include src='datatemplate' /></div>
</div>
</div>
<script id='datatemplate' type='text/ng-template'>
<!-- Template HTML -->
</script>