i am trying to make a blog page with angularJS and on the message part i have a div like this.
<div class="post-content">
{{jsonPost.message}}
</div>
and inside the variable jsonPost.message i got a string like this
<p>paragraph 1</p>
<p>paragraph 2</p>
but instead creating 2 html paragraphs, instead i see the <p> texts on the screen aswell like a text. Is there a way to make them html code ? and than target them via css.
Thank you, Daniel!
Since you are using v1.2, you need to use ng-bind-html. To bypass sanitization use $sce service:
$scope.jsonPost.message = $sce.trustAsHtml("<p>paragraph 1</p>");
HTML:
<!-- bypasses sanitizaton -->
<div data-ng-bind-html="jsonPost.message"></div>
You can use ng-bind-html-unsafe:
<div class="post-content" ng-bind-html-unsafe="jsonPost.message"></div>
Related
I am using AngularJs since long time but finding a strange issue.
The below code works well
var app=angular.module("list",[]);
app.controller("myctrl",function($scope){
$scope.get=function(){
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- This code works well-->
<div ng-app="list" ng-controller="myctrl" ng-init="thiss=true">
<p>
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
Facing issue with below code
If I am using following code to declare ng-app and ng-controller in HTML as below, It's not working. Strange issue
<!-- This code doesn't update scope for ng-show -->
<div ng-app="list">
<p ng-controller="myctrl" ng-init="thiss=true">
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
Is there any important concept I am missing with AngularJS.
Any help in this would be greatly appreciated.
<p> is a block-level element.
As per HTML specification
The p element represents a paragraph. It cannot contain block-level elements (including P itself).
If nested, when HTML parser encounters inner p element(<p ng-show="thiss">Show Content</p>) it will implicitly close outer <p ng-controller="myctrl"...> element.
So, once the parsing is done
<div ng-app="list">
<p ng-controller="myctrl" ng-init="thiss=true">
<button ng-click="get()">Click</button> {{thiss}}
</p><!-- paragraph is implicitly closed. So, "thiss" value is not available to ng-show -->
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
You can find more discussion about nesting block elements here and here.
the ng-init directive fails to bind to the scope of the declared controller when declared like this.
try to use "ng-init='thiss=true'" with ng-app div.
In second code you are using tag as container which is wrong , tag can element like button and itself which is fine but you should not put these element under tag just remove p tag for and put div it will work fine.
At the moment it is not possible to use more then one component in a template. For example:
<div class='wrapper'>
<LeftColumn>
<RightColumn>
<p>text here</p>
</div>
Ractive displays only the first one. The situation is the same if I want to use same component tag twice. It's even more strange when I have only one component but place something after the tag (the <p>text here</p> above). It is not displayed too.
Here is a JSBin showing the problem http://jsbin.com/maxen/3/edit?html,js,output
You need to either add closing </widget> tag or use self-closing syntax - <widget />. Demo here.
I have a html template that is being used for multiple projects. In that template I have two places where I can set the content.
The layout is something similar to this:
<body>
<div>Navbar from TEMPLATE</div>
<div>
<div>other TEMPLATE stuff</div>
<div id="content1">CONTENT can be set here</div>
</div>
<div id="content2">CONTENT can also be set here</div>
</body>
My question is is it possible to use the same angular app in both #content1 and #content2? Can the ng-app="main" be used twice?
If something like this isn't possible to do I can add an ng-app attribute to the template but would rather not have to do this as, as I said, the template is used for multiple projects a lot of which won't be using angular.
Edit:
Just to clarify, I'm using a tal template from zope. In that template I have two fill slots, I would like to use the same angular app in both fill slots without having to change the original tal template if possible.
I have a bit of a problem and I'm not sure if it's possible with js.
Lets say I have a p Element.
<p class="test> text text text </p>
Is it possible that jquery would be able to turn the statement above into this.
<div class="new_created">
<p class="test> text text text </p>
</div>
All on run-time and assuming I can't manually modify it myself.
Would appreciate any help on this. Thanks
You can use .wrap() wrap elements with another element
$('.test').wrap('<div class="new_created"/>')
Demo: Fiddle
Suppose your HTML looks like this
<div>
<p class="test">text text text</p>
</div>
Then, you can do
$('.test').wrap($('<div class="new_created">'));
I can't access the div tag inside the accordion. I need to Access detDivChild.
I used
$("#detDivChild").html(""),
$("#accordionChild detDivChild").html(""),
$("#tab-3 accordionChild detDivChild").html("")
But failed.
<div id="tab-3" style="clear:both;">
<div id='accordionChild'>
<h3>List</h3>
<div id="hdrDivChild"></div>
<h3>Details</h3>
<div id="detDivChild"></div>
</div>
</div
You forget to tell jQuery to select DOM as per ID (i.e adding #).
As below.
$("#tab-3 #accordionChild #detDivChild").html("");
you're trying to access the selector accordionChild as if it were a tag. accordionChild is written as the id of the tag you're trying to access. change to this:
$("#accordionChild #detDivChild").html("")
similarly for
$("#tab-3 #accordionChild #detDivChild").html("")