I'm trying to populate Angularjs UI grid, when geocoder.geocode of google map executes, the UI grid populated..but nothing its appears ine the navigator until i click something on the DOM then the data appears in the UI grid..why it behaves like that???
geocoder.geocode({'location': latlng}, function(results, status) {
//console.log("vb");
$scope.cp++;
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
console.log('azerty: ' + JSON.stringify($scope.aqw[index]) );
$scope.aqw[index].adress=results[1].formatted_address;
if($scope.cp == $scope.Mylength){
//alert(JSON.stringify($scope.aqw));
$scope.gridOptions.data=$scope.aqw;
}
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
//console.log("vbbbb");
$scope.varr=results[1].formatted_address;
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
//alert("kl");
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
$scope.titi="djdjd";
// console.log( $scope.varr+' '+'cccccccccccccccccccccccccccccc');
console.log('azertym: ' + JSON.stringify($scope.aqw[index]) );
$scope.myData={};
$scope.myData+=$scope.aqw[index];
console.log('yoyoyoyo: ' + JSON.stringify($scope.aqw));
});
Im assuming it is because of the digest cycle, the scope isn't aware of the changes and there for it is not updating the dom.
you can include a $scope.$apply() at the end of the callback function. and this will fix the issue...
read more about digest and apply here: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Related
There is an API for getting ink stroke objects in OneNote. Per the examples/documentation you can run code that gets the InkStroke object. My understanding is that Highlighter strokes are FloatingInk in the OneNote object model. Is it possible to get information about the stroke itself? Something like:
if(inkObject.getType() == "Highlighter") {
var width = inkObject.getStroke().width;
var height = inkObject.getStroke().height;
}
The documentation shows an example below, but it only appears to make the "id" property available.
OneNote.run(function(context) {
// Gets the active page.
var page = context.application.getActivePage();
var contents = page.contents;
// Load page contents and their types.
page.load('contents/type');
return context.sync()
.then(function(){
// Load every ink content.
$.each(contents.items, function(i, content) {
if (content.type == "Ink"){
content.load('ink/id');
}
})
return context.sync();
})
.then(function(){
// Log ID of every ink content.
$.each(contents.items, function(i, content) {
if (content.type == "Ink"){
console.log(content.ink.id);
}
})
});
})
.catch(function(error) {
console.log("Error: " + error);
if (error instanceof OfficeExtension.Error) {
console.log("Debug info: " + JSON.stringify(error.debugInfo));
}
});
EDIT: While not ideal, you could obtain the RestApiId and then make an API call to retrieve the InkML document, which will contain this information.
https://blogs.msdn.microsoft.com/onenotedev/2017/07/07/onenote-ink-beta-apis/
Unfortunately, there is no way of getting ink stroke coordinate information from OneNote Add-ins. I encourage you to file a uservoice item and link it here.
https://onenote.uservoice.com/forums/245490-onenote-developer-apis/
I have a google map in my view and in this map I have many marker and each marker should have a content which contains an a href for more details
This is my code for adding one marker which is used in a loop on all the events saved in the database :
setMarker(event){
let coords = event.location.split(",");
let location = new google.maps.LatLng(coords[0],coords[1]);
let marker = new google.maps.Marker({
map: this.map,
position: location
});
let content = "<h1>" + event.name + "</h1></br><a ng-click="+this.viewEventDetails(event)+"> More Details</a>";
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
return marker;
}
and this is my viewEventDetails function :
viewEventDetails(event){
this.navCtrl.push(EventDetailsPage, event);
}
When I load the map view it loads the viewEventDetails on all events , what should I do please ?
Could you change "</h1></br><a ng-click="+this.viewEventDetails(event)+"> More Details</a>" to "</h1></br><a ng-click=\"viewEventDetails(event)\"> More Details</a>". I think this should work.
Btw I think ng-click should also be substitude with (click) since ionic 2 does the angular2 way and therefore does not accept ng-click.
I am working in the Malhar widget framework, which is based on jQuery sortable widgets. ex/ https://github.com/DataTorrent/malhar-angular-dashboard
I am working on some DOM manipulation on each widget (maximize/minimize/refresh), and running into some Angular $scope.$apply exceptions below.
Function details:
The $scope.grabSouthResizer function (working fine) is the Mahlar function that came with the framework; I just modified it slight to also refresh the Kendo UI charts.
The $scope.maxResizer function is my custom function, which is throwing $rootScope:inprog exceptions every time is hits my $scope.$apply();.
$scope.grabSouthResizer = function (e) {
var widgetElm = $element.find('.widget');
e.stopPropagation();
e.originalEvent.preventDefault();
// get the starting horizontal position
// .. code ommitted for brevity
// sets new widget width on mouseup
var mouseup = function (e) {
// calculate height change
var curY = e.clientY;
var pixelChange = curY - initY;
var widgetContainer = widgetElm.find('.widget-content');
var diff = pixelChange;
var height = parseInt(widgetContainer.css('height'), 10);
var newHeight = (height + diff);
$scope.widget.setHeight(newHeight + 'px');
$scope.$emit('widgetChanged', $scope.widget);
$scope.$apply(); // *** NO EXCEPTIONS THROWN ***
$scope.$broadcast('widgetResized', {
height: newHeight
});
// kendo chart - refresh height
var chart = widgetElm.find('.k-chart').data("kendoChart");
if (chart != undefined) {
chart.setOptions({ chartArea: { height: newHeight - (newHeight * .10) } });
chart.resize($(".k-chart"));
}
};
};
$scope.maxResizer = function (e) {
// TODO: properly restore the window to original position..
var widgetElm = $element.find('.widget');
e.stopPropagation(); // testing - same as grabSouthResizer() below
e.originalEvent.preventDefault();
var pixelHeight = widgetElm.height();
var pixelWidth = widgetElm.width();
// fyi: '.k-tree' will auto-resize, so no need to find that
var chart = widgetElm.find('.k-chart').data("kendoChart");
var treelist = widgetElm.find('.k-treelist').data("kendoTreeList");
// height differential (reduce height of container if inner widget is a treelist)
var ht_diff = (chart != undefined ? 200 : 600);
var newHeight = window.innerHeight - ht_diff;
if (!widget.maximized) {
// widget container maximize
widget.maximized = true;
$scope.widget.setWidth(window.innerWidth);
$scope.widget.setHeight(newHeight); //window.innerHeight - ht_diff);
$scope.$emit('widgetChanged', widget);
$scope.$apply(); // *** THROWS $rootScope:inprog EXCEPTIONS !!! ***
$scope.$broadcast('widgetResized', {
width: window.innerWidth,
height: newHeight
});
if (chart != undefined) {
// refresh Kendo chart
chart.setOptions({ chartArea: { height: widgetElm.height()*.9, width: widgetElm.width()*.95 } });
chart.resize($(".k-chart"));
}
}
kendoRefreshTimer(); // this work-around used instead of $scope.$apply()
}
var timer;
function kendoRefreshTimer() {
timer = $timeout(function () {
refreshKendo();
}, 1);
}
function refreshKendo() {
// Kendo chart refresh here...
}
Big question: why is $scope.$apply(); causing errors in my maxResizer function, but not in the Malhar original grabSouthResizer function ? I also understand that $scope.$apply() is NOT recommended, but it seems to be widely used as a work-around.
I would create an online plunk, but I still haven't set up this Malhar widget framework online as of yet. It's a bit complicated to set up.
Your advice is appreciated.
regards,
Bob
* UPDATE *
I updated my post to show how I've worked around this scope.apply issue by using a $timeout function, but I don't like the split-second delay in the UI. i.e. You can see the Kendo chart resizing itself, so it doesn't look so smooth.
I'm using cellClass in ui.grid to add the class of tomato.
cellClass: function(grid, row, col) {
if (grid.getCellValue(row,col) === 'confirmed') {
return 'green';
}
else {
return '';
}
}
},
How can I remove this class? I'm trying but I don't see a way to find the element with the green class so I can remove it.
$scope.confirm = function(rowEntity) {
confirmService.sendResponse(payload, idPart)
.success(function(result) {
if (rowEntity.entity.status.status !== "confirmed") {
remove 'green';
}
console.log('success ', result);
})
.error(function(error) {
console.log('failed ', error);
});
};
You shouldn't need to remove it, you need to update the status in the grid to something other than confirmed (perhaps 'saved'), and then call notifyDataChange to tell the grid that you've changed a data value, the grid will then re-evaluate the cell classes.
The notifyDataChange api is used in http://ui-grid.info/docs/#/tutorial/113_adding_and_removing_columns, amongst other tutorials, and I think the value you want is uiGridConstants.dataChange.EDIT.
I'm trying to implement Google maps in Angularjs using ui.Map (http://angular-ui.github.io/ui-map/)
I've followed the example pretty closely and the map loads, I can create a marker in the map center and the 'map-tilesloaded' event works fine.
My problem is adding a marker where the user clicks. The click function is receiving an empty $params parameter. In my controller:
$scope.newMapOptions = {
center : new google.maps.LatLng($scope.position.lat, $scope.position.lng),
zoom : 18,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
$scope.getLocation = function() {
if (navigator.geolocation) {
return navigator.geolocation.getCurrentPosition(setPosition);
}
};
$scope.addMarker = function($event, $params) {
$scope.newTingMarker = new google.maps.Marker({
map : $scope.myNewTingMap,
position : $params[0].latLng
});
};
$scope.initMap = function() {
if (!$scope.mapLoaded)
$scope.getLocation();
$scope.mapLoaded = true;
};
function setPosition(pos) {
$scope.position = {
lat : pos.coords.latitude,
lng : pos.coords.longitude
};
$scope.meMarker = new google.maps.Marker({
map : $scope.myNewTingMap,
position : new google.maps.LatLng($scope.position.lat, $scope.position.lng)
});
$scope.myNewTingMap.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.$apply();
}
The html:
<div ui-map-info-window="myInfoWindow">
<b>Current location</b>
</div>
<div ui-map-marker="meMarker" ></div>
<div ui-map-marker="newTingMarker" ui-event="{'map-click': 'openMarkerInfo(newTingMarker)'}"></div>
<section id="newTingMap" >
<div ui-map="myNewTingMap" ui-options="newMapOptions" class="map-canvas"
ui-event="{'map-tilesloaded': 'initMap()', 'map-click': 'addMarker($event, $params)' }"></div>
</section>
$scope.addMarker should receive $event and $params where $params[0] has the latlng object. At the moment is it an empty array: []
I'm using angular 1.1.5, but I've tried using the same as the ui.Map example with no effect.
I should also note that this is in a view but putting it outside the view in the main controller makes no difference.
If I try to follow the code running from the ui-map directive I can see that the latlng object does start off in the event:
ui-map.js:
angular.forEach(eventsStr.split(' '), function (eventName) {
//Prefix all googlemap events with 'map-', so eg 'click'
//for the googlemap doesn't interfere with a normal 'click' event
google.maps.event.addListener(googleObject, eventName, function (event) {
element.triggerHandler('map-' + eventName, event);
//We create an $apply if it isn't happening. we need better support for this
//We don't want to use timeout because tons of these events fire at once,
//and we only need one $apply
if (!scope.$$phase){ scope.$apply();}
});
});
element.triggerHandler('map-' + eventName, event); ... has the latlng object in 'event' but is seems to get lost after that
Not sure what your issue is, I took your code and created a fiddle that works fine(something you should have done).
I did a console log when you click that logs the $params.
The most important thing to note is your code crashes at first because you reference $scope.position.lat before setting it. I updated it to default to RVA.
,
You do need to handle the case a little more gracefully.
function MapCtrl($scope, watchArray) {
var center;
if ($scope.position) {
center = new google.maps.LatLng($scope.position.lat, $scope.position.lng);
}
else {
center = new google.maps.LatLng(37.5410, 77.4329); //if null use rva
}
$scope.newMapOptions = {
center: center,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
...
}
Console.log:
[Ps]
v 0: Ps
> la: Q
> latLng: O
> pixel: Q
> __proto__: Ps
length: 1
> __proto__: Array[0]