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.
Related
I have an Angular application using (UI) Bootstrap and I'm displaying a URL in a modal-body inside well and code elements. The modal-footer just has a Close button. Now if one triple-clicks the URL to copy it, the Close button text in the footer is also selected and one can not paste it to another tab as usual.
Fiddle here
<div class="modal-body">
<div class="well">
<code>http://www.google.com/</code>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
I have searched a lot but cannot come up with a solution (have tried CSS's user-select, wrapping it in different elements, which do not seem to work).
Replace <button> by <input> to disable text selection:
<input type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal" value="Close"></input>
Updated Fiddle
Not exactly a scientific or technical answer (as I don't fully grasp the browser's Selection API); but what I have observed is that when you triple click the last child element in a DOM branch, it creates a hanging selection (for lack of a better term).
By hanging selection, I mean that it tries to look for the next selectable text element, but since it's the last child that was selected, it traverses the DOM to find the next text element. In my specific case, I was dealing with something like this:
<div>
<h2>Section Header</h2>
<div>
<p>foo</p>
<p>bar</p><!-- triple clicking this would select the next h2 content!! -->
</div>
</div>
<div>
<h2>Next Section Header</h2>
...
</div>
The solution I arrived at came from the naive thought of "give it something else to select" so that it wouldn't go looking elsewhere in the DOM. So this definitely feels more like a hacky workaround, but simply inserting 0-height <br> elements (so as not not affect the existing layout) immediately after any content that I expect users may try to triple click solved all of my issues.
So in OP's case
<div class="modal-body">
<div class="well">
<code>http://www.google.com/</code>
<div style="line-height: 0px;"><!-- line-height is what affects br height, and you can't apply line-height directly on br tags for whatever reason -->
<br />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data- dismiss="modal">Close</button>
</div>
At the time of posting this, there isn't much info about these types of issues so I figured I would share what worked for me in hopes that it helps someone else.
One good source of info I did find was in the form of a github issue comment here
It turns out there are a bunch of ways to cause hanging selections (because of the nature of the functionality I'm building, I could only verify that my solution works for #1 and #4):
triple-click on a paragraph
place the cursor at the beginning of a paragraph, shift-arrow-down past the end of the paragraph
place the cursor at the beginning of a paragraph, shift-arrow-right to the end of the paragraph (selects the text within the paragraph), then shift-arrow-right again (selects the whole paragraph)
drag the cursor from the beginning of a paragraph to the end (selects the text within the paragraph), then drag a little further / down (selects the whole paragraph)
I'd like to show element only one time within ng-repeat.
My code bellow doesn't work because "Event of today" is shown each time when an event is starting today...
My code :
<div class="line" ng-repeat="event in events">
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === today.getTime()">Event of today</h4>
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === tomarrow.getTime()">Event of tomarrow</h4>
<div class="event-body">
<h3>{{event.categoryName}} : {{event.title}}</h3>
</div>
</div>
Just create a filtered version of the events array and display that. You can make a function that refilters it, and call that whenever there's a change that needs it to update (putting it in a $scope.$watch function seems the easiest way to do this). It seems low-tech, but it really gives you the most control over what you end up seeing.
Here is a very stripped-down Plunker of this, just showing some simple filtering: Example.
So i have four progress bars that on click open and close via the close button in the top right....problem is the ngrepeat is messing with something....i've tried adding $parent to the child ngClick but it doesnt work. I've looked at all the other stack examples of this and just can't seem to figure out how to apply it to this specific situation
http://codepen.io/anon/pen/JorZoE
<div class="progress-bar repeat-animation" ng-click="showClose = false" ng-class="!showClose ? 'grow' : ''" progress-morph style="width: {{item.percent}}%" ng-repeat="item in list">
<div class="close" ng-hide="showClose" ng-click="onClickClose($event)" ><img src="close42.svg" alt=""></div>
</div>
I assumed that you wanted to open/close the bars individually.
If that's the case, your code wasn't working because you were binding all the progress bars state to the same $scope variable.
Having that in mind, I tweaked your code a little bit to make it work, and also used a more readable logic (imho).
Please take a look and let me know:
http://codepen.io/anon/pen/WbZygb?editors=101
I'm experiencing some very peculiar behaviour--I'm new to angular, to spare you the noob questions, I tired my best to find the solution but after many hours, I think it's time to give in and ask.
Code Summary: Alphabet array, is looped(ng-repeat) and each letter is linked to a function called clickLetter(), this function sets a $scope variable that reflects the current chosen alphabet letter.
Problem: the model/variable in charge of displaying the current active letter is not updating ALL the time, it only appears to update sometimes, randomly it seems.
Code (plunker)
My guess is, angular is not updating the model (two-way data-binding?) as fast as it should?
It looks like the <a> tag is triggering a route change. Either add an $event.preventDefault() to it or remove the <a> altogether. (doesn't seem like it's adding any value)...
<div class="ui icon button padding5" ng-class="{'active': letter == activeLetter}" ng-repeat="letter in letters" ng-click="clickLetter(letter, $event)">
{{letter}}
</div>
or
<div class="ui icon button padding5" ng-class="{'active': letter == activeLetter}" ng-repeat="letter in letters" ng-click="clickLetter(letter, $event)">
{{letter}}
</div>
The problem is, when you click on letter and not on button,the link stops the propagation of your mouse click.
Add this class in your css file and apply to <a> tag, which holds the letter:
.ignore-mouse-event {
pointer-events: none;
}
<a> tag should be changed to this:
{{letter}}
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.