I am new to Angularjs and need to do some stuff using angularjs. So my question is just to add some separate html pages to one page by using angular controller. Though I do not know how to do this and search it as well help would be appreciated.
I have a html page like this.
<html>
<body>
<div id="div1" >
</div>
<div id="div2" >
</div>
<div id="div3" >
</div>
</body>
</html>
And again I have 3 separate html pages ie. html1 , html2 , html3 likewise. So now I need to put my 3 html pages in to above html page dynamically by using angularjs. Help would bbe really appreciated.
Maybe use ng-include.
<html>
<body ngApp>
<div ng-include="firstPage.html"/>
<div ng-include="secondPage.html"/>
<div ng-include="thirdPage.html"/>
</body>
</html>
If you want to include and apply scope dynamically, you need $templateCache and $compile.
Related
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>
All the inner widgets are rendering with ng-repeat of angularjs. So number of widgets are dynamic and size of widgets are dynamic.
I want to achieve the below layout for my dashboard
But I am always getting the below layout
Is it possible to design dynamic layout like the image 1 layout using html,css and javascript?
I am sharing jsfiddle link:
fiddle
<div ng-app="myApp">
<div class="container" ng-controller="TodoCtrl" style="overflow-y: scroll;">
<div class="" ng-repeat="widget in widgetList" ng-class="widget.class" draggable="true">{{widget.name}}</div>
</div>
</div>
Please help regarding this issue.
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>
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>
I am using the knockout js external template engine. It seems to be pretty straightforward. But only a few of my templates are getting loaded, others are not getting included and there are no errors in my firebug console.
If i include the HTML inline then it works. After i move them into the template it does not get loaded.
The other templates that are getting loaded do not have the "data-bind="with:..." option. They are plain html.
Here is my code. Thanks in advance for your help
Main HTML
<body>
<div
class="tab-pane fade"
id="personal"
data-bind="template: { name: 'personal'}"
></div>
</body>
My Template HTML
<div class="panel panel-default" data-bind= "with : dashboard.user">
....
</div>
I figured out what the issue was.
My main html div which has the template has the same id as the template name, so it was failing silently. I just found out the hard way. I renamed my template files to have the Tmpl suffix and it started to work.
<body>
<div
class="tab-pane fade"
id="personal"
data-bind="template: { name: 'personalTmpl'}"
></div>
</body>