Angular ng-hide/ng-show directives not working - javascript

I have an issue which presents on an Android 4.x device, but not on a newer device. I have no idea why, but I'm hoping someone can help.
I have a list using ng-repeat. Each item uses ng-include to load a template dynamically (this is a generic, reusable dialog).
<ons-list-item ng-repeat="item in items | filter:filterItems(searchTerm) as filtered" ng-click="options.selectItem(item)" style="font-size: 14px; padding: 0;" tappable>
<div class="left" style="width: 100%;">
<ng-include src="'app/dialog/smartpick/'+options.itemTemplate" style="width: 100%; padding: 0px 16px;"></ng-include>
</div>
</ons-list-item>
The template currently causing me issues contains a button like this:
<ons-button ng-click="openDocument(item, $event)" ng-if="item.SpecificationSpecDocumentID" style="float: right;font-size: 20px !important; padding: 0px 10px;">
<ons-icon icon="ion-image" ng-hide="item.opening" style="vertical-align: middle;"></ons-icon>
<ons-icon icon="ion-load-b" ng-show="item.opening" class="spin" style="vertical-align: middle;"></ons-icon>
</ons-button>
Debug: {{ item.opening }}
When openDocument is called, it does this (among other things):
if(item.opening) return;
item.opening = true;
When the list is rendered, both of the <ons-icon> elements are shown; the ng-show/ng-hide directives do not seem to do anything. The debug text under the button shows true or false respectively, but no class or style is added to the icon elements. (I also tried isolating the problem by moving the directives to wrapper <span> elements, but it didn't have any effect.)
As I said before, this work fine on a newer device. Any clues as to what may cause directives to fail or be ignored on older devices?
EDIT
It certainly has something to do with the child scope created inside the <ons-button> element, because the directives work outside of that scope. I just don't know why it would work in newer webviews but not the older one.

I still don't know what the browser version had to do with it, but it seems the problem was a consequence of using ng-if in my templates. When I changed those into ng-show, the problem disappeared.

Related

Problems with the last chrome update - CSS

so, i'm an intern on my company, and need to deal with some stuff that i'm not 100%.
The thing is, the last google chrome update crashed some css in my java web app. We do work with a table, based on scrum. Basicly a taskboard, where you can set a task, remove it, set is as "to do, doing and done". But, since 12/12 +/- your task was missing from the taskboard. We didn't knew what was going on at the begining, but after a little research we found out that the style of the 'height:100%' of tr td was crashing, and making everything desapear. It works fine in firefox and also in IE. when we did remove the height, the tasks appeared. But the thing is, without the height:100% the jquery droppable ui, that we use to move the tasks inside the table was set to the height automatically, even when it is with height 100%.
We don't want to set a minimal height, because it was supposed to work pretty fine.
Here is the code, it's a little big to text in here, so i typed it on jsfiddle.
https://jsfiddle.net/rychardgoltara/bvw1hkxg/
<tr data-bind="attr:{id: sequencial}" id="2093" class ="selectable">
<td class ="historia" style="height:1px">
<div class="colapsada" style="display:none;">
</div>
<div class="expandida">
<div class="historiaLayout">
<span id=""></span>
</div>
</div>
</td>
<!-- ko foreach: {data: $root.fases, as : 'fase'} -->
<td data-bind="css : 'fase-' + id" class="fase-7">
<div class="colapsada"></div>
<div class="expandida tarefaExpandida">
<div class="nomeFase fase">
<span class="tamanhoVariavel sh-tooltip" data-bind="text: titulo, attr: {'aria-label': titulo}" aria-label="A Fazer">A Fazer</span>
}
.tabelaQT tbody tr td {
border-right: 1px #ccc solid;
height: 100%;
}
.tarefaExpandida {
margin: 5px;
overflow: auto;
height: 100%;
One of our solutions was setting the height:100% on tr td and also setting it to height:-webkit-calc(0px). So it can work fine on chrome without affecting other browsers. But the thing is, this solution is the real solution? Am i missing something? And if this is the solution, why is it? I don't know how to explain the solution to my boss. Here is a pic of what is looks like, and what should looks like.
https://imgur.com/a/DXthL

Telling angular to pickup a dynamically added directive

I am creating a bootstrap popover and I'm trying to use a directive in the content of the popover.
I use the following HTML:
<div data-animation="false"
data-template='<div style="width: 400px; max-width: 400px; height: 400px; max-height: 400px;" class="popover some-custom-classes" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
data-html='true'
data-placement='right'
data-original-title='My title'
data-content='<b>TEST</b> <my-directive></my-directive> TEST'
data-trigger='manual'
data-container=".modal-dialog">
Some Content
</div>
Whenever a hover over the DIV happens, somewhere in code I do:
$element.popover("show");
This does launch a popover with the contents:
"TEST TEST"
However, the directive is not shown. It is not picked up by angular and thus the browser ignores it because it doesn't know the "my-directive" element. I think Angular doesn't pick it up because the directive is added to the DOM dynamically (independ from angular) using jquery by bootstrap's popover implementation.
The question:
Is there a way to manually tell angular to "parse" the directive?
PS. I think in the newer versions of ui-bootstrap you can specify an angular template, but unfortunately I can't use ui-bootstrap (except the ancient version 0.10.0 which seems not to work for me with popovers).

md-datepicker does not works with touch screen

I am building an application for a multi-touchscreen and wanted to use the angular material datepicker.
Even though it works fine when using it with a normal mouse, when I tried using it on my touchscreen, the datepicker is not scrollable. I do not really know what I am doing wrong, as the examples on the angular material page are working.
So this is the code: (I kind of tried it everywhere on my page, so it does not really matter what is around this code as it did not work anywhere else as well):
<div style="margin-top: 10px">
<h5>Daterange:</h5>
<md-datepicker style="padding-right: 0px; margin-right: 18px" md-placeholder="From" ng-model="searchStartDate" md-max-date="searchEndDate" ng-change="clearShipSearch(); shipSearch()"></md-datepicker>
-
<md-datepicker md-placeholder="To" ng-model="searchEndDate" md-min-date="searchStartDate" ng-change="clearShipSearch(); shipSearch()"></md-datepicker>
</div>

ng-pageslider when using ps-container

I've implemented the ng-pageslide directive in my project. It works great in Chrome when I allow its default behavior and allow it to attach to the body tag. However, it causes layout issues in Firefox for a page that uses UI Bootstrap tabs. It basically shifts everything to the right.
The styles that ng-pageslide adds to the body tag are:
position: absolute; transition-duration: 0.5s; transition-property: top, bottom, left, right; right: 0px;
I've tried removing these manually when transition to a page that doesn't use pageslide, but that seems like a bad solution.
I've also tried using the ps-container attribute and structuring my HTML like this:
<div id="tasks">
<!-- table using ng-repeat -->
<pageslide ps-open="project.sidebar" ps-auto-close="true" ps-squeeze="true" ps-body-class="true" ps-container="tasks">
</div>
This HTML template is included by a ui-tabset using:
<uib-tabset justified="true">
<uib-tab ng-repeat="tab in project.tabs" active="tab.active" select="$state.go(tab.route)" disable="tab.disabled">
<uib-tab-heading>
<i class="fa fa-{{tab.icon}}"></i>
<span translate="{{tab.titleKey}}">{{tab.title}}</span>
</uib-tab-heading>
<div ng-include="tab.content" class="m-t-sm"></div>
</uib-tab>
</uib-tabset>
When I use this setup, I experience two issues:
The table is initially squished to the right side of the page.
When I open the page slider, it slides over 300px from the right and ends up covering my table, instead of squeezing it.
The panel that slides out seems to cut off its contents. I've noticed I can fix this by adding style="height: 100%" to the "tasks" element.
Screenshots:
What do I need to do to make ps-container work like adding pageslide to the body tag?

django-cms div tags with cmsplugin class interfering with slider

I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.

Categories

Resources