Is it possible to use the whole window as droparea?
Sure, I can append ngf-drop attributes to body, but then some other HTML elements lay over and I can't drop my files there… Otherwise I can not use a DIV an append those attributes an lay it over all other elements, because nothing else is clickable.
Or how can I achieve that behaviour with vanilla js / css?
If you add it to the body or a div that contains all the elements it should work, make sure the body container div is full size and include all the element. The dragover and drop event would still be called on the body or container div.
Sample: http://jsfiddle.net/w812qp1s/
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div style="width:100%;height:100%" ngf-drop ngf-select ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"><div>Drop File:</div>
<div>No Drop File Div</div>
<ul>
<li ng-repeat="f in files" style="font:smaller">{{f.name}}</li>
</ul>Upload Log: <pre>{{log}}</pre>
</div>
</body>
Related
I have an angular 1.5.7 page using hammer.js 2.0.8 with angular-hammer library.
My <body> is 100% height and has swipe events on it that allow a user to page back and forth. But within the body, I have a list of <input> tags which I have a different swipe event on.
The problem is the swipe on the <body> is always triggered, even when I swipe over the <input>.
<body ng-app="myApp" ng-controller="myCtrl" ng-cloak hm-swiperight="prevDay(page)" hm-swipeleft="nextDay(page)">
<h1>{{data[page].today | dateSuffix}}</h1>
<div ng-repeat="item in data[page].items track by $index"
hm-swiperight="strikeOn(page, {{$index}})"
hm-swipeleft="strikeOff(page, {{$index}})"
hm-press="splashOn(page, {{$index}})">
<input
value="{{item.name}}"
placeholder="Item #{{$index+1}}"
ng-class="{strike: item.done==true}"
ng-trim="true"
ng-model="item.name"
ng-change="save()"
/>
</div>
</body>
How do get the swipe on the <input> to take precedence over the swipe on the <body>?
body or parent is always prior to other inside elements, you can't touch input without touching the body and it's logical.
But if you ask me, i will put 2 div on left and right of my body and then i set attr swiperight and swipeleft on each of them, to solve this problem.
<body>
<div class="left" hm-swipeleft="prevDay(page)"></div>
<div class="right" hm-swiperight="prevDay(page)"></div>
//----other elements
</body>
div are absolute position, and when user swipe right from right of body it will work on body, also left, and when user touch inside body you input element will work.
In my controller I have input box and a div with text.
By default div is set to display:none
I want to make div visible by focusing on input box.
Is it possible to do with angular.js
Try this (No need to set you div display:none, initally showDiv is false and your div will be hidden):
<body ng-controller="myController" ng-init="showDiv=false">
<input type="text" ng-focus="showDiv=true">
<div ng-show="showDiv"></div>
</div>
Yea Angular makes it super easy without even having to write anything in controller, here's an example:
https://plnkr.co/edit/OqLpGxWwfPaBTVdTBYDy?p=preview
<body ng-controller="MainCtrl">
<input type="text" ng-hide="show" />
<button ng-click="show = !show">Show / Hide</button>
</body>
Obviously you could make yours on a hover instead of a click but you get the idea.
I have a directive which uses three different templates:
http://jsfiddle.net/edwardtanguay/pLrkya7r/4
These templates each have a panel and I want them to include a header template which is the same for each of them, like this:
<script type="text/ng-template" id="itemMenuTemplateUndefined">
<div class = "panel panel-default" >
<div ng-include="'itemMenuTemplatePanelHeading'"></div>
<div class="panel-body">
<div>Age: {{item.age}}</div>
</div >
</div>
</script>
The included template looks like this:
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
<div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>
The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.
How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?
The problem is that the bootstrap css is very specific in targeting the panel heading as a direct child of the panel using selectors like .panel-warning>.panel-heading.
The extra <div> for the ng-include breaks this child relationship making it
<div class="panel">
<div ng-include>
<div class="panel-heading>
Some possible choices:
Add appropriate classes to the ng-include div
Copy the css rules and replace the > in selector with a space
Use your own directive instead of ng-include and within the options
set replace:true
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I want to use Fotorama.io to show HTML content. But it appears that HTML is not clickable inside slider. Is there any possibility to make it work inside Fotorama?
Use .fotorama__select class on your frames to make it clickable and selectable:
<div class="fotorama">
<div class="fotorama__select">One</div>
<div class="fotorama__select"><strong>Two</strong></div>
<div class="fotorama__select"><em>Three</em></div>
</div>
http://fotorama.io/customize/html/#selectable-text