Is it possible to conditionally include an ng-click into the dom? Both my desktop view and mobile view share the same template, but I only need the ng-click in the desktop view.
For example, in my desktop view I want something like this:
<div class="maincontent" ng-click="clickEvent()">
<div>Content</div>
</div>
... and in my mobile view I want something like this:
<div class="maincontent">
<div>Content</div>
</div>
You could have some variable in scope which will tell you its mobile view or not by checking user agent and set a flag on basis of that isMobileView, and then you can use same template with ng-click for both mobile and desktop view.
Markup
<div class="maincontent" ng-click="isMobileView && clickEvent()">
<div>Content</div>
</div>
Related
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
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'm trying to add ng-click into Kedo UI template, but function saveCustomView on theUser controller still cannot be fired.
But outside of the tag is ng-click working correctly.
<div id="grid" data-ng-controller="UsersCtrl" data-ng-init="initGrid()" >
<script type="text/x-kendo-template" id="testBtn" >
<div class="toolbar">
<a data-ng-controller="UsersCtrl"
ng-click="saveCustomView()">
Add actual selection to custom views
</a>
</div>
</script>
Could somebody tell me how can I solve it?
Thanks for any help.
I am making an application using AngularJS and want to be able to switch between "tabs" and swap back and forth different "partials" or html templates into a panel/container (using ngInclude).
Here's my template, which is wrapped inside a ngView.
<div class="row">
<div class="col-md-3">
<div class="list-group" data-fixed-sidebar data-nav-control>
<a href="#/analyze/option1" class="list-group-item" data-tab-route="/analyze/option1.*" >Analyze Option 1</a>
Analyze Option 2
Analyze Option 3
Analyze Option 4
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-body">
<div ng-include="child"></div>
</div>
</div>
</div>
</div>
The problem is, when I click on one of the links (for example, the first link which routes to #/analyze/option1) it will reload my controller and lose track of it's current state. I am using $route and $routeProvider and would prefer a solution that keeps using this module.
Controllers are meant to be ephemeral. The correct way (TM), in my opinion, to do it would be to put the necessary state in an service, which is initialized in a singleton fashion and will retain state between route changes.