I was trying to make a blog in angularJS and on the post message section I want to get the message from json and add it to a content div like this
<div class="content">
{{json.message}}
</div>
Now my div has a paragraph in it, it's practically a html code like this
<p>this is my message</p>
but when i do this, i see on the screen this
<p>this is my message</p>
as text. I understand in previous versions i could use ng-bind-html-unsafe but i am using v1.2 of angularJS. Can anyone please show me code similar to ng-bind-html-unsafe so that I can make this work in v1.2?
Thank you, Daniel!
You can use the Strict Contextual Escaping services ($sce) in 1.2
Controller:
function myCtrl($scope,$sce) {
$scope.myHtml = $sce.trustAsHtml('<span>Hello World!</span>');
}
Template:
<div ng-app ng-controller="myCtrl">
<div ng-bind-html="myHtml"></div>
</div>
Example: http://jsfiddle.net/TheSharpieOne/GKnrE/1/
You'll need to inject and use the $sce service to mark it as trusted HTML, then use the ng-bind-html directive (plunkr):
app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
$scope.name = $sce.trustAsHtml('<p>Hello World</p>');
});
index.html:
<body ng-controller="MainCtrl">
<div class="content" ng-bind-html="name"></div>
</body>
Related
Angular version:1.3
I am trying to compile the html and generate the interpolated html. the ng-if code is getting commented out
html
<div ng-if="true">true</div>
I am using the above html as htmlTemplateDom
Controller
var htmlCompiledDom = $compile(htmlTemplateDom)($scope);
var div = angular.element("div#emailContent").append(htmlCompiledDom);
console.log(div.html());
Console
<!-- ng-if:true -->
So the problem is ng-if is getting commented out.
Someone help !!!!
I don't see any problems on $compile.
This example works just as expected, check if you're doing something different.
HTML:
<div ng-app="app" ng-controller="controller">
<div id="compile">
</div>
</div>
Javascript:
angular.module('app', [])
.controller('controller', function ($scope, $compile) {
var template = '<div ng-if="true">true</div>';
var content = $compile(template)($scope);
angular.element('div#compile').append(content);
});
If you want to execute it, take a look at this fiddle.
First, ng-app should be to set the area where angular take place, right? Even if there is ng-controller tag outside ng-app, they should be omitted?
However, when I test on jsfiddle (link here), it seems this is not the case:
HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input ng-model="name">
</div>
</div><br><br>
<div class="not-inside-my-app">
<div ng-controller="MyCtrl">
...... Some Many other content in real case that I don't want angular to touch .......<br>
So this is to test angular is not working here.<br>
Hello, {{name}}!
<input ng-model="name">
</div>
</div><br><br>
<div ng-app="myApp">
<div ng-controller="MyCtrl2">
Hello, {{name}}!
<input ng-model="name">
</div>
</div>
Javascript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
$scope.name = 'Superhero';
}
myApp.controller('MyCtrl2', ['$scope', MyCtrlFunction2]);
function MyCtrlFunction2($scope) {
$scope.name = 'Non-superhero';
}
The angular code is still working in the middle div. Is my concept on ng-app wrong? Or what have I missed to limit the scope?
P.S. I know I can control the scope by using ng-controller, but it seems to be a waste on resource to do scanning on sections that I know I don't need angularJS.
Since ng-app attribute added to body tag, which is why all controllers are running.
Since angular considers first ng-app attribute and ignore other ng-app attributes. The above code is working.
NOTE: Though the code written in the html section didn't contain the body tag. You can able to insert the body tag by clicking on the gear icon in the html section of fiddle site. Which is what the main cause for this addition of ng-app attribute added to body tag. Thanks for pointing it out Durga
remove body tag <body ng-app="myApp"> from html section, there is no issue with jsfiddle.
It seems some issue with JS jsFiddle, try to run the same example in you local machine it will not work or here you get the answer:
https://www.w3schools.com/code/tryit.asp?filename=FEYVPGYHZAY5
I'm trying to setup a ngAnimate .animation() script with Angular 1.4 but I am struggling with the basics as this should display an alert but it does not :
.animation('.animated', function () {
// should display an alert here...
alert('hello ?');
})
I must be missing something but can't figure out what.
Here is a jsfiddle.
Thanks a lot for your help.
Animation is triggered using one of directives described here Docs. For example ngClass. Demo.
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<span ng-class="{animated: true}">Hello {{who}}.</span>
</div>
</div>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;" /> Is Visible...
<span class="animatedsomething" ng-show="checked">Hello {{who}}.</span>
</div>
</div>
and
angular.module('MyApp', ['ngAnimate'])
.controller('MyCtrl', function ($scope) {
$scope.who = 'World';
})
.animation('.animatedsomething', function () {
// should display an alert here...
alert('hello ?');
});
seems to generate the alert. Not sure why. Quoting from https://docs.angularjs.org/guide/animations "AngularJS 1.3 provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service.", may be you need one of those directives for the animation to be applied.
I'm attempting to add an <object></object>into my html using a controller. When I load a <div> or a <p>, it works properly, but when I add an <object> it doesn't appear, nor do any custom attributes.
HTML:
<html ng-app="myAngularSite">
...
...
<div ng-controller="MyController">
<div id="myloader" ng-bind-html="myObject"></div>
</div>
JS:
var app = angular.module('myAngularSite', ['ngRoute']);
angular.module('myAngularSite', ['ngSanitize'])
.controller('MyController', ['$scope',function($scope) {
$scope.myObject =
'<object id="my_object" data="mysite.html" width="99.5%" height="400px" style="overflow:auto;border:3px ridge gray"/>';
}]);
How can I add the custom attributes and the object into my site? I noticed that attributes won't appear when I try to load a <div id"with_attribut></div> with attributes, although the divs appear by themselves.
Thanks!
The custom directive is probably the good solution, you can always add more custom behaviours. With ngBindHtml you will be limited. Here is link which can help you:
angular ng-bind-html and directive within it
suppose I have this bit of html and javascript:
$scope.test = "hello<br/>world";
<div>{{ test }}</div>
angular will obviously render it as:
<div>hello<br/>world</div>
and that is exactly how it is supposed to work but, what if I would like it to actually render it as html markup rather than text?
I know this can lead to security problems, but I would just like to know out of curiousity.
Thanks in advance.
You can use the ng-bind-html directive in AngularJS.
<div ng-controller="ngBindHtmlCtrl">
<p ng-bind-html="trustedHtml"></p>
</div>
where
$scope.myHTML = "I am an <code>HTML</code>string with links!"
will be rendered accordingly.
For the security concerns involved in this, before you pass the HTML content to your scope variable myHTML, sanitize it with:
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
and then use $scope.trustedHtml in your ng-bind-html directive as listed above.
You can create a filter as suggested here:
HTML :
<div ng-controller="MyCtrl">
<div ng-bind-html="my_html | to_trusted"></div>
</div>
This is how your javascript would appear:
var myApp = angular.module('myApp',[]);
angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
function MyCtrl($scope) {
$scope.my_html = '<div>hello<br/>world</div>';
}