I'm trying to load a template into an Angular app depending on a parameter. It would be inside a ng-foreach:
<body ng-app="MyApp" ng-controller="ExampleController as example">
<div ng-repeat="item in example.items" class="someClass" ng-switch="item.type">
<!-- load a different template (partial) depending on the value of item.type -->
</div>
</body>
Fiddle: https://jsfiddle.net/rsvmar2n/1/
Can I somehow do that? I was thinking about using ng-switch: https://jsfiddle.net/rsvmar2n/6/
But I'm sure there's a more angular way to do it.
Edit: I would like NOT to do an http request for every partial I would load (and I think ngInclude does that.
Edit2: Ended using ng-include and cached templates. https://jsfiddle.net/rsvmar2n/24/
You can call a function which returns the id of the template in ng-include and use cached templates. The working example shows what you can do.
the function in your controller which handles the template looks like:
$scope.getTemplate = function(item) {
switch(item.type)
{
case "type1":
return 'testtype1.html';
default:
return 'testtype2.html';
}
}
and your html
<script type="text/ng-template" id="testtype1.html">
<p>This is the template 1</p>
</script>
<script type="text/ng-template" id="testtype2.html">
<p>This is the template 2</p>
</script>
<body ng-app="MyApp" ng-controller="ExampleController">
<div ng-repeat="item in items" class="someClass">
<!-- load a different template (partial) depending on the value of item.type -->
<div ng-include="getTemplate(item)"></div>
</div>
</body>
Create directive for that, something like:
app.directive('myDirective', function(){
return {
restrict: 'E',
scope: {item: '=item'},
templateUrl: function(element, attrs){
if (!attrs.type) return 'default.html';
return attrs.type + '.html';
}
}
});
Then you can create different templates like type1.html, type2.html...
And in controller you just do:
<my-directive ng-repeat="item in items" item="item", type="item.type">
Using ng-include lets you dynamically assign the source - so in your parent template you could have
<div ng-include src="templateName"></div>
where templateName is a variable name in your controller
$scope.templateName = 'path/to/my/template.html';
and changing this value within a digest should dynamically update the contents for you
Based on conditions you can load single or multiple templates as shown below.
With ng-switch
ng-if="item.type=='type2'||item.type=='type3'"
LoadMultipleTemplate To load multiple template based on your selections.
LoadSingleTemplate load single template.
Edit
With ng-include, this way you can load dynamic views.
in this example I've not put any condition. but within ng-repeat you can put another ng-repeat and based on inner ng-repeat you can do the stuff. But for inner ng-repeat you will have to make according json object.
loadViews
<div ng-repeat="item in example.items" class="someClass" >
<ng-include src="item.type + '.html'">{{item.type}}</ng-include>
</div>
Related
I have an array of messages
$scope.messsages = []
Upon clicking a button the content of a text area gets added into the array using ng-click method.This message is used to query the api. After which we get a response from the server which too is added into the array $scope.messages. All these messages are shown in html using ng-repeat i.e:-
<div ng-repeat="msg in messages track by $index">
{{ msg }}
</div>
However if I get a response from the server as a hyperlink string like
To know more click here.
The message that gets displayed in ng-repeat is a plain string with no hyperlinks. It renders the <a href="URL"> part as a string itself. I would like to represent it in html format.
One way it worked was by using
document.getElementById("demo").innerHTML = $scope.messages;
But I would like to know is there any angular way to do so in the ng-repeat part itself.
Thanks in advance
Include ngSanitize module on your app and then change your view as below
<div ng-repeat="msg in messages track by $index">
<div ng-bind-html="msg"></div>
</div>
Try to use like this
<div ng-repeat="msg in messages track by $index">
<div ng-bind-html="msg"></div>
</div>
Here is the plunk example for it.
You should use ng-bind-html for this. so you should inject ngSanitize in your app.
$scope.html = 'test';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
angular.module('myapp', ['ngSanitize'])
.controller('main', function($scope,$sce) {
$scope.messages = [{"link":"<a href='#/abc'>abc</a>"}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<div ng-app="myapp" ng-controller="main">
<div ng-repeat="msg in messages">
<div ng-bind-html="msg.link"></div>
</div>
</div>
New to Angular and need some assistance.
I have a block of HTML content that will be coming from a database that will contain a group of widgets. These are simple widgets that will essentially render out various elements, but for the purposes of this question we'll assume they're all basic HTML inside.
Those widgets are included in an unpredictable way, so my first thought was to use directives to render the HTML. So, we'd have something like:
<div widget data="This is the content."></div>
So I've got a directive that will place the value of data into the div. Easy enough!
Now, how would I go about nesting those widgets? So, how would I get something like:
<div widget data="Welcome! ">
<div widget data="This is some inside content."></div>
</div>
to render out:
Welcome! This is some inside content.
... because the issue I'm noticing is that if I place anything inside the directive HTML, it essentially gets ignored since it gets replaced with its own result (thus only echoing out Welcome!).
I realize I may be going the wrong direction on this in the first place, so any insight would be greatly appreciated. Thanks so much!
This is where you need to use the transclusion feature of the directive combined with ng-transclude directive.
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
A very basic version of transclusion of content based on your example might look something like this:
.directive('widget', function() {
return {
transclude: true,//Set transclusion
template: '{{text}} <section ng-transclude></section>', <!-- set where you need to present the transcluded content -->
scope: {
text: "#"
}
}
});
Demo
angular.module('app', []).directive('widget', function() {
return {
transclude: true,
template: '{{text}} <section ng-transclude></section>',
scope: {
text: "#"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<span widget data-text="Welcome! ">
<div widget data-text="This is some inside content.">
<span widget data-text="This is some inside inside content."></span>
</div>
</span>
</div>
Here is my json data
[{"Country" : "Germ<sup>any</sup>"},{"Country" : "Swe<sup>den</sup>"}]
Here is how i am fetching it using angular js
<div ng-app="" ng-controller="customersController">
<ul><li ng-repeat="x in names">{{ x.Country }}</li></ul>
</div>
and the controller script
function customersController($scope,$http){
$http.get("http://localhost/sample.php").success(function(response) {$scope.names = response;});
}
The output i am getting is
<ul>
<li>Germ<sup>any</sup></li>
<li>Sweden</li>
</ul>
But the output i wanted is
<ul>
<li>Germ<sup>any</sup></li>
<li>Swe<sup>den</sup></li>
</ul>
Need help to sort this out...
You need to use ng-bind-html for the div you are trying to print HTML content.
Refer to this link for details and change the code accordingly.
By default, AngularJS sanitises your data and strips all HTML.
To achieve what you desire, use the $sce service to mark the data as trusted and the ngBindHtml directive to bind it to the view, like this:
Add a new filter
app.filter('unsafe', ['$sce', function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}])
Use it in HTML
<ANY ng-bind-html="data | unsafe"></ANY>
I can't get my head wrapped around solving the following problem using angularJS.
I have a list view containing different kinds of data elements. Each element in itself is a view and has its own controller.
Now I want to iterate over this Array of the data items and based on recordType attribute, I want to initialize a controller with a template and finally add it to the list view.
At the moment I am using ng-include="item.recordType+'.html'" to dynamically load the template and the template itself has an ng-controller tag which loads the relevant controller. But I am not sure if this is the best approach.
<div class="data-item" ng-repeat="item in container.record_collection">
<div ng-include src="item.tRecordType + '.html'"></div>
</div>
Say record-type is apples
<script id="apples.html" type="text/ng-template">
<div ng-controller="ApplesController as apple">
<!-- ... HTML TEMPLATE ... -->
</div>
</script>
I want to display two elements on a page controlled by different instances of the same controller, but I need to register some external information that will be unique (one "joystick" gets an identifying property set, like "player = one" while the other gets "player = two").I'm not sure of the best way of pulling this off exactly
Here's a generic example of what I'm trying to accomplish:
<!-- These need to have different configurations -->
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl">...</div>
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl">...</div>
Should I:
Use a directive?
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl" player="one">...</div>
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl" player="two">...</div>
Use $injector? (fyi - this might be an incorrect implementation)
<div ng-controller="DualJoyCtrl">
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="joyOne" player="one">...</div>
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="joyTwo" player="two">...</div>
</div>
-----
.controller('DualJoyCtrl', function ($injector, JoystickCtrl, $scope, $rootScope) {
$scope.joyOne = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"one"});
$scope.joyTwo = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"two"});
});
Or... not do this?
I realize this is similar to another, seemingly inconclusive stack post:
Edit
Since ngController is initialized before ngInit, in order to have data available in controller at once, you should wrap ngController in parent element with ngInit:
<div ng-init="player = 'one'">
<div ng-controller="JoystickCtrl">
...
</div>
</div>
Original answer
I think simple ng-init would suffice:
<div ng-controller="JoystickCtrl" ng-init="player='one'">...</div>
<div ng-controller="JoystickCtrl" ng-init="player='two'">...</div>
Store your config values in a data attribute, and retrieve it within the controller using $attrs. (The AngularJS ngInit documentation recommends to say clear of ng-init unless aliasing special properties of ngRepeat. ) A similar answer is here. This code snippet gives you the general idea:
Index.html:
<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="1"></div>
<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="2"></div>
Controller:
function joystickCtrl($scope, $attrs) {
$scope.id = $attrs.id;
};
View:
<h2>Joystick: {{id}}</h2>
Here is the full code in Plunker.