How to render text into HTML in AngularJS - javascript

I have a variable in a scope with some HTML content. I want to render it as HTML on the webpage, but in my case it displays as full text. Can anyone help me?
This is my code:-
//contoller.js
$scope.message = '<b><i>result has been saved successfully.</i></b>';
//demo.html
<p ng-bind="message"></p>

You need to inject $sce service into your controller or Directive etc. and use $sce service like this:-
$scope.Message = $sce.trustAsHtml("<b><i>result has been saved successfully.</i></b>");
And bind this in your HTML page e.g;
<p ng-bind-html = "Message"></p>

You have to secure your content with the $sce service and then use the
ng-bind-html directive
docs here.
EDIT
you can find the usage of sce.trustAsHtml here.

<p ng-bind-html="message"></p>

Related

How to apply the AngularJS controller to the included page using ng-include

I have two html pages, main.html and nested.html, so the nested.html is actually included in main.html, this way:
main.html starts
<div ng-include src="'nested.html'"></div>
main.html ends
FULL CODE
nested.html
<html>
<h1> I am included, but controller not sending the values to me. </h1>
<input type="text" id="myDatePicker"/>
</html>
main.html
<html ng-controller="MainCtrl">
<h1> I am main.html and controller working properly on me, please take care of my child **given below** </h1>
<div ng-include src="'nested.html'"></div>
</html>
Controller Code:
(function() {
'use strict';
angular.module('bootstrapApp').controller('MainCtrl', MainCtrl);
function MainCtrl($scope, $location, $http, $compile) {
$("#myDatePicker").datepicker({
orientation: 'left'
});
}
});
The Controller code makes the text field a datepicker using jquery. The input field is in nested.html page. If the controller works on the included page, the textfield becomes a datepicker. That's it
Please guide me through how do I apply the same controller MainCtrl to included nested.html page
Thanks.
There are 2 important things to mention here:
The controller scope of the MainCtrl is already applied to the included nested.html. You can review that in the following Plunker: https://embed.plnkr.co/cvILaL3VvnJ5c1YDHDT1/.
You shouldn't use a jQuery datepicker from out of a AngularJS controller. Instead use a datepicker, which is intended for AngularJS (e.g. angular-datepicker)
from what I can guess,you must be using $scope.someVar and you are trying to render it in ng-include. Try creating an obj inside the controller like below:
$scope.obj= {
someVar : 'Value'
};
and use it in ng-include i.e. nested.html as {{obj.someVar}}.
Update 1
As per your new update, try AngularJS datepicker and let me know.
Try to add controller into nested.html file like:
<div ng-controller="MainController">
<h1> I am included, but controller not sending the values to me. </h1>
<input type="text" id="myDatePicker"/>
</div>
And from your comment:

Difference between ng-model and angular expression - {{}}

{{}} is working fine but ng-model is not, at the same place.
I am using the following html-
<body ng-app="crud">
Gray input fields will not be visible.
<div ng-controller="ctrl">
<input type="text" value="sdf" ng-model="asdf"/>
<h1 ng-model="asdf"></h1> <!-- this doesn't work-->
<h1>{{asdf}}</h1> <!-- this work-->
</div>
</div>
</body>
asdf is defined in this js app like this
var app = angular.module("crud", []);
app.controller("ctrl", ['$scope', function($scope) {
$scope.asdf="ankur";
}]);
Can someone explain why is it so ?
The ng-model directive is to be used on the input fields such as input, select for two way data binding and to get an input from a user.
Where as the one way data binding expression {{}} or ng-bind directive is used to output the data in the view.
var app = angular.module("crud", []);
app.controller("ctrl", ['$scope', function($scope) {
$scope.asdf="ankur";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="crud">
Gray input fields will not be visible.
<div ng-controller="ctrl">
<input type="text" value="sdf" ng-model="asdf"/>
<h1 ng-bind="asdf"></h1>
<h1>{{asdf}}</h1>
</div>
</div>
Use ng-bind for display purposes, instead of ng-model.
<h1 ng-bind="asdf"></h1>
You only want to use ng-model when binding to an element that will be editing the variable, such as a text field.
From documentation:
The ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
You are trying to use it on a <h1>. Use ng-bind instead.
According the doc
the ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
so you will not use it for display an H1
For the brackets they will be dirty checked and refreshed in every $digest, even if it's not necessary. So it's slower. Plus thez may appear while your angularjs is bootstrapping
ng-model : This directive binds the values of AngularJS application data to HTML input controls.
{{}} This use For Printing purpose only. you can put expression also like {{2*2}} it prints 4
Refer This for study basic syntax https://angularjs.org/

How to render raw html with AngularJS?

I'm creating an AngularJS single page application.
The data will be fetched from a webservice in json-format.
The problem is that some text elements come with preformatted html tags
json output:
{
"text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}
Now how can I display this text and render the html directly, so that only "test" is shown to the user and the rest serves as markup?
<h1>{{data.text}}</h1>
You need to add ng-bind-html="data.text" to your h1 tag.
Your html would look like:
<h1 ng-bind-html="data.text"></h1>
Documentation: ngBindHtml
Update2: is it possible to strip the html for you? It could be done so:
angular.module('myApp.filters', []).
filter('htmlToPlaintext', function() {
return function(text) {
return String(text).replace(/<[^>]+>/gm, '');
};
}
);
And you html:
<div>{{myText | htmlToPlaintext}}</div>
See more information: angularjs to output plain text instead of html
Update: do you really need the html from your json? It's better to store your html in the views and get the data from your json. Nice separation and very easy to use.
It's possible, but not so easy as non-html (great security).
In Angular 1.3 you need as follows:
<div ng-bind-html="htmlBind"></div>
In your controller add this:
$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');
Explanation: you see the $sce:
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
trustAs(type, value)
Delegates to $sceDelegate.trustAs. As such, returns an object that is trusted by angular for use in specified strict contextual escaping contexts (such as ng-bind-html, ng-include, any src attribute interpolation, any dom event binding attribute interpolation such as for onclick, etc.) that uses the provided value. See * $sce for enabling strict contextual escaping.
Read more here:
https://docs.angularjs.org/api/ng/service/$sce
AngularJS : Insert HTML into view
Try to use this https://docs.angularjs.org/api/ng/directive/ngBind
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>

Calling a function using AngularJS

I am working on application in AngularJs
Here is my code :
HTML
<div ng-controller="MainController as main" class="containerWrap">
..
..
..
<p ng-bind-html="parseMsg(msg)"></p>
..
..
The parseMsg function passes the msg filled by the user to the controller JS defined as follows :
this.parseMsg=function(msg){
...
...
if(msg['subtype']==FILES_UPLOADING){
$scope.showUploadOptions=true;
var per=parseInt(msg['text']);
if(per==100)
msg['text']='<div ng-if="showUploadOptions"><img ng-src="logo.png" ng-click="main.cancelFileUpload(chat,msg_id)"/></div>';
return $sce.trustAsHtml(msg['text']);
}
...
...
...
};
Chat and msg_id being passed to the main.cancelFileUpload are stored previously as:
$scope.chat = (object)
$scope.msg_id =(object)
this.cancelFileUpload=function(chat,msg_id){
alert("Cancel clicked ");
delete this.retryUploadFiles[msg_id];
delete chat.msgs[msg_id];
};
What I am trying to do is cancel the file upload being sent during the server request using a click on an image.
This ng-click is not responding. It doesn't give an error but doesn't function properly either.
Can anyone help identify the issues?
Thanks!
ngBindHtml don't compile your HTML. So, all angular directives from your dynamic HTML(ng-if, ng-src, ng-click, etc..) will not work.
To really compile your html you can use $compile service like that:
$compile(html)($scope)
But it's not a true way for angular. If you want to modify DOM structure - you need to use directives. In your case you can include that html to template itself instead of add it dynamically:
<div ng-show="showYourHtml">
<img ng-src="logo.png"
ng-click="main.cancelFileUpload(chat,msg_id)"/>
</div>
And your controler:
...
if(conditions){
$scope.showYourHtml = true;
}
...

Binding Controller Property containing HTML in AngularJS

First of all: I am absolutely new to AngularJS but worked on MVC-projects in other languages.
I try to bind a Property containing HTML.
This is the code:
HTML:
<div ng-controller="MyController">
<p>{{About}}</p>
</div>
JS:
.controller('MyController', ['$scope', function($scope) {
$scope.About="This is me<br/>and not you!"
}
Now the HTML is encoded which I do not want (the <br/> should result in line breaks)
I already tried <p ng-bind-html="About"></p> but that resulted in no output at all
You need to allow html in your text which Angular does not by default.
Plunker: http://plnkr.co/edit/K4KRCQi4Rpe99MJel5J2?p=preview
Angular Docs for $sce
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as
safe to use for that context. One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html. We refer to
these contexts as privileged or SCE contexts.
<div ng-controller="htmlChar" ng-bind-html="about"></div>
<script>
angular.module("app",[])
.controller("htmlChar",function($scope, $sce){
$scope.about= $sce.trustAsHtml("This is me<br/>and not you!");
});
angular.bootstrap(document,["app"]);
</script>
You shoudln't need to insert html through model binding in AngularJS since the philosophy of the framework is to keep the HTML (page's structure and style) intact and only bind the data to be shown inside that HTML.
If you really need to bind HTML tags into your data you need to use the $sanitize service.
You have to use angular compile functionality here, go through the link to get more information angular compile

Categories

Resources