I am using ng-map directive and place autocomplete API in my angularjs application. which are working fine.
but the problem is I need Both in a bootstrap modal and when i am using same code in a bootstrap modal, Nothing is working neither ng-map nor place autocomplete.
Suggest me if I am missing something.
problem occures only when i use angular's ng-map directive. With javascript everything works fine but I don't want to write bulk of code. I wanna use ng-map only.
Here is my markup
<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>
<directions
draggable="false"
travel-mode="DRIVING"
panel="p3"
origin="jaipur"
destination="Delhi">
</directions>
</ng-map>
see my
plunkr
for whole code
Since the map is displayed in bootstrap modal, the map needs to be explicitly intialized once the modal dialog is opened as demonstrated below:
$('#myModal').on('show.bs.modal', function(e) {
$timeout(function() {
google.maps.event.trigger(vm.dialogMap, 'resize');
vm.dialogMap.setCenter(vm.mapSettings.center);
vm.dialogMap.setZoom(vm.mapSettings.zoom);
});
});
'show.bs.modal' event is triggered once the modal is opened.
From another hand, unfortunately angularjs-google-maps at the moment contains a bug that prevents the route to be printed if multiple map instances are added into a page (in your example there are two map instances)
In the below example is provided a workaround.
Working example
The following forked plunker demonstrates how to:
properly display map in modal dialog
print routes in multiple map instances
add a style
.pac-container { z-index: 10000 !important; }
ref from there
Google Places Autocomplete not showing up
here a plnkr for a your working example
http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview
Related
I am using angular material in my angular app. I want to put a md-tooltip on md-progress-bar but it is not working. md-tooltip works fine on other elements like md-icon but not on md-progress-linear. Any help. Here is how I am using it.
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
I had to wrap the progress bar and tooltip in another element, but not nest the tooltip inside of the progress bar:
<div class="progress-container">
<md-progress-linear md-mode="determinate" value="50"></md-progress-linear>
<md-tooltip>Hello</md-tooltip>
</div>
I styled the container to make it taller than it is, because I needed it to be clickable, but not have a tiny hitbox.
Demo: http://codepen.io/langdonx/pen/GowBeq
I know this is pretty old, but I just found myself a solution and maybe this can be used by others as well.
Putting the tooltip directly under the progressbar doesn't work, but you can wrap the whole thing in a div or span:
<div>
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
</div>
This way it works fine. Haven't found anything else yet and it doesn't seem to have a solution in the official discussions
I have a directive which contains an iScroll element, which is built with li from an ng-repeat:
<div class="my-film">
<div class="filmstrip-container">
<div class="scroll-wrapper">
<ul class="film-container">
<li ng-repeat="film in films"
ng-mouseover="onMouseOverItem($event)"
ng-mouseleave="onMouseLeaveItem($event)"
ng-click="openFilm()"
class='film-slide'>
...nested videos etc in here.
</li>
</ul>
</div>
</div>
</div>
In the directive's link function I have the onClick function like this
scope.openFilm = function() {
...code to open the film and play
}
This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.
I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?
We're using Angular 1.3, and have ngTouch added.
Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link
The problem here was the iScroll blocking my touch events. Passing {click: true} in as the options when initiating the iScroll fixed the problem.
iOS creates separate events for ng-mouseover, ng-click, ng-mouseleave, etc.
That means that your first tap will trigger ng-mouseover, your second tap will trigger ng-click, and your tap outside the element will trigger ng-mouseleave.
Saddly, I thought ngTouch would fix this issue created by iOS but it didn't. It fixed it only if you use css hover, but not if you use java script mouse events (including those of angular).
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
I am using tabs of angular bootstrap ui. I have overriden the tabs directive so as to perform lazy loading of data
Plunkr link for the same : http://plnkr.co/edit/uAb3TrKtxoPPXx8mekRz?p=preview
The lazy loading works perfectly fine. However I need to dynamically select the tabs based on certain properties.
For example, I tried the following
<div class="row" ng-controller="TabCtrl">
<tabset>
<tab title="Tab 1" template-url="tab1.html" active="{{tab1stat}}"></tab>
<tab title="Tab 2" template-url="tab2.html" active="{{tab2stat}}"></tab>
</tabset>
</div>
and in my controller.js I tried setting the active property for the tabs in the scope
app.controller('TabCtrl', ['$scope',
function($scope) {
// $dialogs.error('t est');
$scope.tab1stat=false;
$scope.tab2stat=true
}
]);
I tried accessing the scope variables in the html, however the tab directive seems to get rendered before the controller is initialized.
Is there any way to achieve this?
Also I need to refresh the tab with a different html. For example my tab1.html will have a few buttons which will render some html pages. All these pages need to be rendered in the same tab.Is there any way to achieve this?
Try removing the curly braces from the active attribute binding so it looks like so: active="tab2stat". You should also not be binding to primitives to avoid the prototypal inheritance gotcha.
EDIT
The angular ui bootstrap library is watching the active attribute like so:
scope.$parent.$watch($parse(attrs.active), function (value) {
alert(value);
});
See this plunkr: http://plnkr.co/edit/pwXOz1O4Wb0RZsi3nPlC?p=preview
I am looking at the demo of MobiScroll and have chosen the following options:
Demo Page: Demo
Demo: Time
Display: Modal
Mode: Scroller
The demo example shows the resulting HTML I should use as:
<input id="i" name="i" />
Show
Clear
When I use this HTML, the Show and Clear buttons show up on the page and when I click in the input box, the Mobiscroll shows up inline. In the demo, these buttons appear with the Mobiscroll in a modal dialog. Do I need to wrap the HTML in a div with a special tag?
Thanks!
The issue was that the jQuery Mobile js + css files were required to get the modal popup. The directions on the site are not clear! I added the following and presto!
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />