I am using this library for my ionic app. When I use leaflet-popup-angular with ionic,when I click the circle the popup doesn't work.and gives me this error Uncaught TypeError: Cannot read property 'get' of undefined.This errors sign this line inside the L.Popup.Angular.js library file.->>
var $rootScope = $injector.get('$rootScope'),
$compile = $injector.get('$compile'),
$controller = $injector.get('$controller');
.controller('MapCtrl', function ($scope) {
var map = L.map('map', { zoomControl: false });
var noControllerPopup = L.popup.angular({
template: `Hello world`,
}).setContent('But we can still use templates and $content.');
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup(noControllerPopup);
//my Tile...
});
can u please help me to solve this problem...
Update to version 1.0.1. Just released on bower and npm. The older versions assumed that you had your ng-app on the root html tag. This one looks for ng-app directly.
Related
VRview is not working and doesn't show me the 360 image. I am coding in Angular 1 app and trying to show 360 image. I tried photosphere viewer and now vrviewer but unable to understand regarding how to write the code in angular. Kindly assist
angular.module("MyControllers", [])
.controller("VR", function ($window) {
var onVrViewLoad = function() {
var vrView = new VRView.Player('#vrview', {
img: 'img/virtualTour.jpg',
is_stereo: false
});
}
$window.addEventListener('load', onVrViewLoad)
})
According to Google VR docs
To use VR View, include the Google-provided vrview.min.js script
within your HTML:
<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
Video View
Your controller should be as follows. Instantiate the VR View as soon as the page loads which should be listening to the load event.
angular.module('VRApp', [])
.controller('VRController', function($window) {
var onVrViewLoad = function() {
var vrView = new VRView.Player('#vrview', {
video: 'https://storage.googleapis.com/vrview/examples/video/congo_2048.mp4',
is_stereo: true,
});
};
$window.addEventListener('load', onVrViewLoad);
});
Check out my Plunker for live demonstration.
Image View
I've tested it in IE 11 and it worked fine. Tried the below code
angular.module('myApp', [])
.controller('VRController', function($scope, $window) {
var onVrViewLoad = function() {
var vrView = new VRView.Player('#vrview', {
width: '60%',
height: '60%',
img: 'http://storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true',
is_stereo: true,
});
};
$window.addEventListener('load', onVrViewLoad);
});
Output in IE 11
I am interested in using ngMaterial's swipe since I get the warning...
You are using the ngTouch module.
Angular Material already has mobile click, tap, and swipe support...
ngTouch is not supported with Angular Material!
Problem is for now this element is not under a directive. Instead I currently use angular.element to grab it then using ngTouch publish a global event...
$rootScope.$broadcast('gesture', gestures);
I know it may not be the material-way but I would just like to attach the swipe events manually.
Update
This look promising, although undocumented...
$mdGesture.register(myElement, 'drag', { minDistance: 20, horziontal: false })
Here is my working version
function TouchService($mdGesture, $rootScope){
this.setElement = function (selector) {
var element = angular.element(selector);
$mdGesture.register(element,'swipe', { minDistance: 20, horziontal: false });
element.on("$md.swipeleft", function(){
$rootScope.$broadcast('gesture', {direction: 'left'});
});
element.on("$md.swiperight", function(){
$rootScope.$broadcast('gesture', {direction: 'right'});
});
element.on("$md.swipeup", function(){
$rootScope.$broadcast('gesture', {direction: 'up'});
});
element.on("$md.swipedown", function(){
$rootScope.$broadcast('gesture', {direction: 'down'});
});
};
}
I am trying to write a unit test for an Angular component that opens a dialog, but am unable to do so because I cannot trigger the closing of the dialog.
How can I cause the md dialog to resolve from the test case?
I have created a repository with a basic example where the problem can be reproduced, and copied the central bits below. There is an index.html to manually verify that the code is working, a test case that displays the problem and an example of how the tests are written in the md code.
Repository - https://github.com/gseabrook/md-dialog-test-issue
The component is extremely basic
angular
.module('test', ['ngMaterial'])
.component('dialogTest', {
template: '<button ng-click="showDialog()">Show Dialog</button>',
controller: function($scope, $mdDialog) {
var self = this;
$scope.showDialog = function() {
self.dialogOpen = true;
var confirm = $mdDialog.confirm()
.title('Dialog title')
.ok('OK')
.cancel('Cancel');
$mdDialog.show(confirm).then(function(result) {
self.dialogOpen = false;
}, function() {
self.dialogOpen = false;
});
}
}
});
And the test is also very simple
it("should open then close the dialog", function() {
var controller = element.controller("dialogTest");
expect(controller.dialogOpen).toEqual(undefined);
expect(element.find('button').length).toEqual(1);
element.find('button').triggerHandler('click');
expect(controller.dialogOpen).toBeTruthy();
rootScope.$apply();
material.flushInterimElement();
element.find('button').eq(2).triggerHandler('click');
rootScope.$apply();
material.flushInterimElement();
expect(controller.dialogOpen).toBeFalsy();
});
I managed to resolve the issue by setting the root element as the problem seemed to be related to element being compiled in the test being unconnected with the root element that angular-material appended the dialog too.
I've updated the github repository with the full code, but the important bits are
beforeEach(module(function($provide) {
rootElem = angular.element("<div></div>")
$provide.value('$rootElement', rootElem);
}));
beforeEach(inject(function(_$rootScope_, _$compile_, $mdDialog, _$material_) {
...
element = getCompiledElement();
angular.element(window.document.body).append(rootElem);
angular.element(rootElem).append(element);
}));
I have seen some examples of using opencpu together with angular, but no examples of using opencpu in meteor (where angular could be inplemented easily).
Is it as easy as just including ocpu.seturl and jquery.min.js in meteor (as is done here), or does one need to think differently in meteor when using opencpu?
For example, there might be some conflicts between angular and meteor.
I know that is a diffuse question, but I've seen that I'm not the only one who does wonder about it.
Related:
https://groups.google.com/forum/#!topic/opencpu/rEi7lMK65GU
https://www.quora.com/Is-it-possible-to-call-the-R-server-within-a-website-made-with-Meteor-run-some-R-code-then-display-its-output
For example (thanks to http://jsfiddle.net/ramnathv/uatjd/15/):
var myApp = angular.module('myApp', ['angular-meteor']); //added 'angular-meteor'
//set CORS to call "stocks" package on public server
ocpu.seturl("//public.opencpu.org/ocpu/library/graphics/R")
myApp.factory('OpenCPU', function($http){
return {
Dist: function(dist){
var url = "http://public.opencpu.org//ocpu/library/stats/R/" + dist +
"/json"
return $http.post(url, {n: 100})
}
}
})
myApp.controller("HistCtrl", function($scope, $http, OpenCPU){
$scope.dist = 'rnorm'
$scope.dists = ['rnorm', 'runif']
$scope.color = 'blue'
$scope.colors = ['blue', 'red', 'darkmagenta']
$scope.breaks = 10
$scope.submit = function(){
var req = $("#plotdiv").rplot("hist", {
x : $scope.data,
col: $scope.color,
breaks: Math.floor($scope.breaks),
main: $scope.main
});
}
$scope.$watchCollection('[main, color, breaks, data]', function(x){
$scope.submit()
})
$scope.$watch('dist', function(newDist){
OpenCPU.Dist(newDist).success(function(result){
$scope.data = result
})
})
})
Would the above be a "correct" starting point? How should one declare dependencies in meteor (i.e. opencpu, jquery.min.js) ? New to meteor so any suggestions are highly appreciated!
Not using angular (not sure why one would need that), but here is a super basic setup in meteor:
HTML:
<head>
<title>opencpu</title>
<script src="//cdn.opencpu.org/opencpu-0.4.js"></script>
</head>
<body>
<h1>Testing OpenCPU</h1>
{{> hello}}
</body>
<template name="hello">
</template>
JS:
if (Meteor.isClient) {
Template.hello.onRendered(function() {
// ocpu.seturl("//public.opencpu.org/ocpu/library/graphics/R");
// couldn't come up with a good example for this
ocpu.seturl("//public.opencpu.org/ocpu/library/stats/R")
// this gives me a CORS error but the below still seems to work
console.log(ocpu);
var req1 = ocpu.call("rnorm", {n: 100}, function(session1){
var req2 = ocpu.call("var", {x : session1}, function(session2){
session2.getObject(function(data){
alert("Variance equals: " + data);
});
});
});
});
}
All I know about opencpu I've learned in the last 30 minutes -- little! So I don't know how to get past the CORS error. That error doesn't seem to happen when pointing at the graphics package, but for that one I couldn't think of a good example.
I have a directive, <flightpoint></flightpoint>.
I need to add this directive to Mapquest's map via map.addShape().
However, angular is not aware of the new directive on the map, therefore it doesn't process it (its blank html).
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi');
var x = routeMap.addShape(poi);
});
A few things I've tried.....
1. $compile
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml($compile("<flightpoint></flightpoint>")($scope), -6, -20, 'mqa_nostyle_htmlpoi');
var x = routeMap.addShape(poi);
$scope.$apply();
});
Result: [object Object] is displayed on the map instead of my directive.
2. angular.bootstrap()
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi');
var x = routeMap.addShape(poi);
angular.bootstrap(document, ['app']);
});
Result: "Error: App Already Bootstrapped with this Element 'document'"
If I was able to compile it after its been added that would be okay too.
This is a little sloppy but its working for me.
I'm able to add a dummy tag and insert compiled angular into it.
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml("<span id=\"insertDirectiveHere\"></span>", -6, -20, 'mqa_nostyle_htmlpoi');
routeMap.addShape(poi);
// now that you've added the span we can insert compiled angular on that tag
var domElem = document.getElementById('insertDirectiveHere');
domElem.innerHTML = "<flightpoint></flightpoint>";
$compile(domElem)($scope);
});