I am using materializecss and the problem is that Google Map not loading in materialize modal. But other than modal, its working fine. I did everything what i have to do. Any solution for this problem?
Update:
I found the solution for my problem. Actually i was using multiple
view in that modal and placed my map div back of one div using
ng-show. It causes my map to not display. But placing map div in
front of all other div fixed my issue. :)
When the modal shows up, it re-sizes its content to fit into it. So your Google map component's size is changed and as a result, it just needs to be refreshed.
Just add the following code in your <script> tag.
$('.modal-trigger').leanModal({
ready: function() {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
That should do it :)
=== EDIT ===
I've added a sample for what i think might help you. This sample initializes the map object when the page loads, and it uses the same object in the model.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="js/jquery-2.2.0.js" type="text/javascript"></script>
<script src="js/materialize.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function () {
$('.modal-trigger').leanModal({
ready: function () {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
});
</script>
</head>
<body>
<a href="#mapmodel" class="modal-trigger blue z-depth-1 waves-effect waves-light btn-floating">
<i class="red material-icons">location_on</i>
</a>
<div id="mapmodel" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Test</h4>
<div id="googleMap" style="width:500px;height:380px;"></div>
</div>
<div class="modal-footer">
Got it
</div>
</div>
</body>
</html>
Related
I Want to show pop-up on page load but i don't have knowledge about react javascript . I am using lightbox pop-up . its working fine but its working onclick function . I need to open pop up on page load.
my code is :-
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js'></script>
<script type="text/jsx" src='js/react-lightbox.jsx'></script>
</head>
<body>
<div id='react-canvas'></div>
<script type="text/jsx">
/** #jsx React.DOM */
React.renderComponent(
<Lightbox>
<LightboxTrigger>
<a href='javascript:void(0)'>Click me to open!</a>
</LightboxTrigger>
<LightboxModal>
<div>
<h1>This is the basic usage!</h1>
<p>Good luck :D</p>
</div>
</LightboxModal>
</Lightbox>,
document.getElementById('react-canvas')
);
</script>
</body>
</html>
Try to create custome elements and add method this.props.openLightbox on componentWillMoutn
var ToggleButton = React.createClass({
componentWillMount(){
this.props.openLightbox();
}
render() {
return(<button onClick={this.props.openLightbox}>Open Lightbox</button>);
}
});
And put this custom element into <LightboxTrigger>
<LightboxTrigger>
<ToggleButton />
</LightboxTrigger>
Previously there was a <div>, the contents of which i was toggling on ng-click. With components in Angular 1.5, i moved the contents of the <div>and created a component. I want to load this component on ng-click now.
Is this possible ?
I did not find any help yet. If possible, a help would be great.
Its possible to show/hide the component (having your div content). I have created a plnkr, refer the below code and plnkr link
https://plnkr.co/edit/sZSfslXTDGfvGwiDdBSZ?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="componentApp">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="componentController">
<button ng-click="showComponent()" id="changeText">Show Component</button>
<div-content ng-if="isShowContent"></div-content>
</body>
</html>
JS:
angular.module("componentApp", [])
.controller("componentController", function($scope) {
$scope.isShowContent = false;
$scope.showComponent = function() {
$scope.isShowContent = !$scope.isShowContent;
document.getElementById("changeText").innerHTML = $scope.isShowContent ? "Hide Component" : "Show Component";
};
})
.component("divContent", {
template: "This is the content of my div"
});
I hope you can help me out or give me a hint to solve my problem.
I am making an app using angularjs and material design lite (css and js).
My problem is that the material design js file doesn't take affect on the partials once the state changes and basically I lost all the functionality that material design library provides me.
this is my code so far
index.html
<!doctype html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appy2go</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<!-- Material Design Lite -->
<script src="dist/js/material.min.js"></script>
<link rel="stylesheet" href="dist/css/material.pink-blue.min.css">
<!-- <script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> -->
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/signin/signin.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div id="app-wrapper" ui-view></div>
<!--THIS BUTTON WORKS AS SUPPOSED TO BE-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</body>
</html>
app.js
angular.module('app',[
'ui.router',
'app.home',
'app.signin'
])
.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
})
.controller('AppController',function($scope){
console.log("ready");
})
home module
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div> <!-- IT SHOULD DISPLAY AN ICON ON SMALL DEVICES -->
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">App Name</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">App Name</span>
<nav class="mdl-navigation">
link 1
link 2
link 3
</nav>
</div>
<main class="mdl-layout__content">
<div>Content</div>
<!-- Colored FAB button with ripple -->
<!-- Accent-colored raised button with ripple -->
<!-- THIS BUTTON DOESN'T WORK AS SUPPOSED TO BE -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Appy2go</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
home.js
angular.module('app.home',[
'ui.router'
])
.config(function($stateProvider){
$stateProvider.state('home',{
url:'/',
controller: 'HomeController',
templateUrl: 'modules/home/home.html',
})
})
.controller('HomeController',function($scope,$http){
console.log("Ready");
})
Angular has to know when to look for changes in the variables. If you have non-angular code changing things then you have to tell angular to rerun the digest cycle.
Here's an example where I wrapped the jQuery Dialog function in Angular. I'm having to manually tell Angular to WATCH and APPLY.
app.directive("dialog", function() {
return {
restrict: 'A',
scope: {
dialog:"=",
},
controller: function($scope) {
$scope.$watch("dialog", function(){
if($scope.dialog){
$scope.open();
}else{
$scope.close();
}
});
},
link: {
pre: function(scope, element, attributes) {
scope.open = function() {
element.dialog({
height: attributes.height,
width: attributes.width
});
};
scope.close = function() {
element.dialog("close");
};
},
post: function(scope, element, attributes) {
scope.open();
element.on("dialogclose", function(){
if(scope.dialog){
scope.dialog = false;
scope.$apply();
}
});
}
},
};
});
Rest of the code is here.
https://plnkr.co/edit/myBzYyL2BHOP8CtRpqrr?p=info
Your routing code should be in the first module which is the main module. I feel that's where your problem is, I am not on a PC right now to be able to replicate your code and test. But change that first.
I am writing an AngularJS app that contains a $scope array which I populate a ul with. Each li contains an "x" which when clicked calls a function in my Chatroom controller and removes the item from the $scope array.
What should happen is that the item is removed from the array and hence also from the view. But if I step through the debugger I can visually see the li being removed from the DOM, but afterwards my entire ng-view gets removed.
Images here:
Before clicking "x"
After clicking "x"
I can't seem to figure out why it's doing this. I shall post code below.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="chatasticExtension" ng-controller="MainCtrl">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- load bootstrap css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<div>
<div ng-view></div>
</div>
</body>
<script src="js/vendors/bower_components/angular/angular.js"></script>
<script src="js/vendors/bower_components/angular-animate/angular- animate.js"></script>
<script src="js/vendors/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="js/vendors/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="js/vendors/bower_components/angular-socket-io/socket.min.js"></script>
<script src="js/vendors/bower_components/angular-route/angular-route.min.js"></script>
<script src="js/vendors/bower_components/socket-io-client/socket.io.js"></script>
<script src="js/vendors/bower_components/angular-socket-io/socket.min.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/constants/configs.js"></script>
<script src="js/services/socket-factory.js"></script>
<script src="js/services/authentication.js"></script>
<script src="js/services/chrome-tabs-manager.js"></script>
<script src="js/controllers/main.js"></script>
<script src="js/controllers/chatroom.js"></script>
<script src="js/controllers/tabs.js"></script>
<script src="js/directives/header.js"></script>
<script src="js/directives/rooms-lists-tabs.js"></script>
<script src="js/directives/chat-window.js"></script>
<script src="js/directives/ng-enter.js"></script>
</html>
main.html (This is what is displayed in ng-view and what disappears)
<div class="container main-container" ng-controller="ChatroomCtrl" >
<div class="col-xs-4">
<rooms-lists-tabs></rooms-lists-tabs>
</div>
<div class="col-xs-8">
<chat-window ng-hide="!activeConversation"></chat-window>
</div>
</div>
rooms-lists-tabs.html (Note the ng-click="leaveRoom($index) on the second ng-repeat for convo in conversations)
<uib-tabset active="active">
<uib-tab index="0" heading="{{tabs[0].name}}">
<div class="scrollable-container list-group">
{{ room.title }}
</div>
</uib-tab>
<uib-tab index="1" heading="{{tabs[1].name}}">
<div class="scrollable-container list-group">
<a id="a-{{urlToId(convo.url)}}" href="" class="list-group-item" ng-repeat="convo in conversations" ng-click="switchConversation(convo.url)">
{{ convo.title }}
<span class="pull-right glyphicon glyphicon-remove" ng-click="leaveRoom($index)"></span>
</a>
</div>
</uib-tab>
Chatroom Controller (leaveRoom function only)
$scope.leaveRoom = function(index) {
var conversation = $scope.conversations[index];
socket.emit("leaveRoom", {
user: $scope.user,
room: conversation.url
});
$scope.conversations.splice(index, 1);
}
/**
* Sets the activeConversation to a conversation in the conversations array that matches the passed in url.
* #param url
*/
$scope.switchConversation = function(url) {
if($scope.activeConversation && $scope.activeConversation.url === url) {
return;
}
var conversation = null;
for(var i = 0; i < $scope.conversations.length; i++) {
if($scope.conversations[i].url === url) {
conversation = $scope.conversations[i];
break;
}
}
if(conversation) {
$scope.activeConversation = conversation;
}
else {
// If the conversation was not found, add the conversation and try to switch again
addNewConversation(url);
$scope.switchConversation(url); // Possible infinite loop here if addNewConversation fails somehow.
}
};
Please let me know if you wish to see other pieces of code.
Thanks
UPDATE: As per Gary's suggestion, I tried using pop(). pop() works until I pop the very last item in the list at which point the entire ng-view will disappear again.
UPDATE 2: If I switch to the first tab right after I splice, I never get the error.
UPDATE 3: Added switchConversation function
I had the same issue and I solved it by the following way which I will explain in your case.
Add $event to your ng-click function i.e., ng-click="leaveRoom($event,$index)"
and now your leave room function should be like below
$scope.leaveRoom = function(event,index) {
var conversation = $scope.conversations[index];
socket.emit("leaveRoom", {
user: $scope.user,
room: conversation.url
});
event.preventDefault();
event.stopPropagation();
$scope.conversations.splice(index, 1);
};
This will only remove whatever index you selected
I am using google places API in my ionic/cordova, angular based mobile app in android platform.
I am able to get search results from text field value using API but when i select an option by simply clicking on one of search results, the text box remains empty.
But when I press and keep holding the search result option for 2-3 secs, that option is selected.
It seems weird to me but it is happening.
place_changed event is not getting triggered on quick tap.
I really dont know what can be the cause of this issue? I have tried Faskclick.js to eliminate 300 ms but that didnt work though I think this issue is not related to 300 ms delay.
My code:
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(input, options);
};
Please help me out here.
I used ngMap and angular-google-places-autocomplete together in the following example.
Hope it helps.
angular.module('app', ['ionic', 'google.places', 'ngMap'])
.controller('MapCtrl', ['$scope', 'NgMap',
function ($scope, NgMap) {
$scope.location = null;
NgMap.getMap().then(function (map) {
console.log("getMap");
$scope.map = map;
});
$scope.$on('g-places-autocomplete:select', function(event, place) {
console.log('new location: ' + JSON.stringify(place));
$scope.data = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
$scope.map.setCenter(place.geometry.location);
console.log($scope.data);
});
}
]);
.map {
width: 100%;
height: 500px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
<link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
</label>
<button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
</div>
<ng-map zoom="6" class="map">
<marker position="{{data.lat}}, {{data.lng}}"></marker>
</ng-map>
</ion-content>
</ion-pane>
</body>
</html>
I didnt find its solution but https://github.com/stephjang/placecomplete is a great plugin as work around :)