Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
Related
I am relatively new to angularJs so I am trying to learn how to do different things. I have been trying to make solutionName act as a p tag if there is no URL input for solutionUrl1, at the moment solutionName is acting as if it is hyperlinked even when its not. Any help would be appreciated.
<a ng-href="{{::data.solutionUrl1}}" class="card__title" style="text-align: center">
<span>{{::data.solutionName}}</span>
</a>
Use ng-if of angularjs to render either one or the other:
Something like this, you most probably have to change the condition to meet your needs. You can also create a new Variable in the JS files like showLink and set this variable to true/false depending on some conditions. And then just use this boolean variable to show/hide the link with the method outlined below:
<div ng-if="data.solutionUrl1">
<!-- code to render the link-->
</div>
<div ng-if="!data.solutionUrl1">
<!-- code to render just the span without the link -->
</div>
I have the following angular-List (reduced the content to make it better readable):
<div ng-repeat="element in bigBlock.Elements track by $index"
class="singleBlockElement"
ng-drop="dragSource=='Block'"
ng-drop-success="To($index, $data, bigBlock)">
<div class="bbRange"> </div>
<i class="fa {{GetImage(element)}}" />
<div ng-drag="element.ElementType!=='placeholder'"
ng-drag-data="element"
ng-drag-start="Start()"
ng-drag-success="From(element,bigBlock, $index, bigBlock.$index)"
ng-drag-stop="Stop(element, bigBlock, $index, bigBlock.$index)"
class="cutOff">
{{element.Title}}
</div>
<div class="edit ng-show="GetLinkText(element, true)">
<span class="isvisible">
<i title="{{element.Present?'Präsentieren':'Nicht präsentieren'}}" class="fa fa-{{element.Present?'eye':'eye-slash'}}"></i>
</span>
{{GetLinkText(element,true)}}
</div>
</div>
This is how it looks like:
This is while dragging:
And this is how it looks like when I simply don't drop like described below:
I can now (successfully) drag & drop the two elements ("Welcome" and "Go Away") inside that block changing the order of these two.
But if I abort the drag/drop. e.g. Dragging "Welcome" and not moving it downwards or moving it to an area where I cannot drop (outside the block) the text "Welcome" disappears.
There are no errors. The drop is just not happing (as expected), but Angular seems to be unable to redisplay the text of that element. ({{element.Title}})
I event tried forcing a refresh using $apply(), but this did not change a thing (not creating an error either).
However, if I do ANYTHING on the page like clicking on an edit-button or anything else that causes an event, the date is correctly shown again.
So it looks like a refresh issue for me.
I am using ngDraggable for this (https://github.com/fatlinesofcode/ngDraggable)
(Update: Analyzing the page source in Developer Console of Chrome the text still seems to be there and even "should" be visible (display:block), so this might be more of a browser-issue (chrome) than an angular-issue)
This seems to be a pure Browser/CSS-Issue and not an Angular-Issue. I solved this by forcing the browser to refresh the parent container:
$('.mm-Right')[0].style.display = 'none';
$('.mm-Right')[0].offsetHeight;
$('.mm-Right')[0].style.display = 'block';
where my structure is
<div class='mm-Right'>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
</div>
That did solve the problem but looks like cheating for me. I would prefer that this bug not even appears instead of hiding the symptoms. So I am happy to accept any better answer for that problem.
very short question.
can I using angularjs disable every thing in the screen ONCE except one div?
and if that is not possible using angularjs
what is the best way to do that in my angularjs application using other technology
If you are trying to disable everything but one div in your html it actually depends on your html structure also. For example you have a
<div id="upperDiv">
......
</div>
and your div is outside of this div like
<div id="yourdiv">
..
</div>
You can basically add ng-disabled to upper div and ng-hide upper div and show only your div in the page. Like;
<div id="upperDiv" ng-disabled="true" ng-hide="true">
....
</div>
and your div ;
<div id="yourDiv" ng-show="true" ng-disabled="false">
...
</div>
I hope it solves your problem.
I used https://github.com/pleerock/angular-disable-all and it works fine //////
In my application the index page is like
<div ng-if="isLoggedIn>
<div ng-view>
</div>
<div ng-if="!isLoggedIn">
<div ng-if="type==='admin'">
<div ng-view>
</div>
</div>
<div ng-if="type!=='admin'">
<div>.....</div>
<div ng-view>
</div>
</div>
</div>
So basically i have different ng-views for different views. The problem here is when user is not logged in ,login page is displayed using ng-view.But upon login the ng-view initializes with login page again (may be becoz of $route.current is already set).
When user clicks log in button he/she is directed to home page and again redirected to login page. so no change is displayed on the page.
This issue can be solved using ng-show/hide insted of ng-if. But that creates another issue that controllers are called twice becoz of two ng-view in the dom and also element can't be referred using id becoz two elements are generated fro the same id. So this solution can't be used.
Is there any way of solving it?
Multiple & Nested ng-view won't work on the same page.
You need take a look at angular ui-router which would be great to use in your case, you could also use nested ui-view using angular ui-router
Or may be you can avoid ng-if using ui-router
I'm new to masonry with angular. i have tried to get masonry working with angular up to a certain extend and im facing few issues with it right now. Below given link is what i have done so far and the following are the two issues facing:
<div ng-controller="MainCtrl">
<div class="grid" masonry="true" column-width="460">
<div ng-repeat="item in items" class="item {{item.class}}">
<div><h1>{{item.name}}</h1></div>
<br /> <span>Age: {{item.age}}</span>
<br /> <span>Company: {{item.company}}</span>
</div>
</div>
</div>
Link to jsfiddle for my solution
instance 1
When there is enough space the smaller brick does not get adjusted. E.g. After "Collin Alston" i need to have "Jasmine Rollins" and likewise. How would i accomadate this change? (see for image below as well)
instance 2
Why is it that "style" attribute gets applied to child elements? i need the style to be applied to "item w1 masonry-brick" and not child div's.
I had in instance 1 and changed it to for instance 2 to show the two problems im facing. Hope to get some answers to work my way out. Thank you in advance.
Update 1:
I managed to get masonry working with angular to this extend. Check this out http://jsfiddle.net/h5jfd1wm/38/
But still there are some empty spaces when i resize the window. It's like some bricks from the bottom can fill up those empty spaces. If you can help me out here.