just one of the ng-bind-html in page work - javascript

I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?

I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml

If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>

You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>

Related

How to find the corresponding div closing tag?

I have a html code like following
<div class="body">
<h1>ddd</h1>
<p>dadfsaf</p>
<div id="name">
<div class="des">psd</div>
<div>www</div>
</div>
<div>ppp</div>
</div>
I would like to get the content inside a div that starts with <div id="name"> and ends with its corresponding closing tag. Here the content is
<div class="des">psd</div>
<div>www</div>
I tried <div id="name">.*</div>, but it doesn't work. Please help, thank you.
Append, I wrote this code in node.js.
var name = $("#name").html()
console.log(name)

how to check the children length of a div in html angularjs

i have a scenario to display a if another div exist. How to check this in angular js html page...
In my .js file i can search for element.find().length . Butcan i check the same in html page itself
here is what i have to try .
The scenario is if there is a page exist i dont want to show one error message div .
This is my index page
<div class="body-content">
<div class="p-row" ></div>
<div data-ng-if="**here to check if there is a content already in the body**" class="error-message-panel"></div>
</div>
Try this.
<div class="body-content">
<div class="p-row" ></div>
<div data-ng-if="$('div').length" class="error-message-panel"></div>
</div>

How can I pass in generic HTML to an Angular 2 component?

I want to make a generic modal component that can hold anything, from just text to images/buttons etc. If I do something like this:
<div class="Modal">
<div class="header"></div>
<div class="body">{{content}}</div>
<div class="footer"></div>
</div>
I'm not able to actually pass HTML into content, just text. How can I create a component such that the parent component can pass in whatever HTML it wants? What if I wanted to add n number of buttons to the footer, each with it's own callback? Is there a better way I should be doing this?
What you are looking for is ng-content
<div class="Modal">
<div class="header"></div>
<div class="body">
<ng-content></ng-content>
</div>
<div class="footer"></div>
</div>
and you may pass any HTML content directly into your component.
Lets say your component name is my-modal, you may use it like below,
<my-modal>
<<HTML content : this will be replaced in the ng-content area >>
</my-modal>
Hope this helps!!

How can I prevent Angular from rendering and displaying a page before ng-if evaluation?

I wrote a code below that basically shows a block of code based on the "ng-if" evaluation(true/false). A problem I have is that even wehn vm.anyItems equals to true, AngularJS tries to render the <p>...</p> block and display it on a browser before the <div>...</div> is properly displayed.
Are there any ways to prevent this?
<div ng-if="vm.anyItems">
<div>...</div>
</div>
<div ng-if="!vm.anyItems">
<p>XXXXXXXXXXXXX</p>
</div>
Try looking into ngCloak. This will stop your code from being displayed until after the application is rendered by Angular.
Your code can do the following:
<div ng-cloak ng-if="vm.anyItems">
<div>...</div>
</div>
<div ng-cloak ng-if="!vm.anyItems">
<p>XXXXXXXXXXXXX</p>
</div>
Source: https://docs.angularjs.org/api/ng/directive/ngCloak

How do I put a couple of elements inside template?

I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>

Categories