I am trying to write a directive to fill a leaflet marker pop-up. I have been banging my head against the wall trying to figure out what I am doing wrong. My pop-up is always empty.
Any one successfully done this before?
Here is a plunker showing the problem:
http://plnkr.co/edit/53bebb?p=preview
marker.bindPopup(e[0]); instead of marker.bindPopup(clonedElement[0]);
Try this:
var directiveTag = $(document.createElement("search-results-map-marker-popup"));
var compiledDirective = $compile(directiveTag)(popupScope);
newMarker.bindPopup(compiledDirective[0]);
You can use the new support for Angular content in angular-leaflet-directive:
var html = '<br><span ng-class="thumbsUpClass(item)" ' +
'ng-click="addChoice(item,set)"><span class="popup-container"><span ' +
'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' +
'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>';
...
$scope.markers.push( { lat: ...,
lng: ...,
message: html,
getMessageScope: function() { return $scope; },
});
Related
I'm trying to print a div that has been rendered using Angular. I'm using this answer as a starting point https://stackoverflow.com/a/30765875/285190, with the print function being pretty simple
$scope.printIt = function(){
var table = document.getElementById('printArea').innerHTML;
var myWindow = $window.open('', '', 'width=800, height=600');
myWindow.document.write(table);
myWindow.print();
};
The problem is the innerHTML contains all the items that would exist if the ng-show ng-hide directives hadn't been executed.
Is there a way to get the actual HTML the client is seeing, i.e. after Angular has performed its magic?
Please use $compile service to transform angularized HTML to actual HTML.
Demonstration of $compile
https://stackoverflow.com/a/26660649/5317329
$scope.printIt = function () {
angular.element('#tempHtml').html("");
var table = document.getElementById('printArea').html();
var compiledHTML = $compile(table)($scope);
$timeout(function () {
angular.element(document.querySelector('#tempHtml')).append(compiledHTML);//Please added <div id="tempHtml"></div> in page/View for temporary storage, Clear the div after print.
console.log(angular.element('#tempHtml').html());
var myWindow = $window.open('', '', 'width=800, height=600');
myWindow.document.write(angular.element('#tempHtml').html());
myWindow.print();
angular.element('#tempHtml').html("");//Clearing the html
}, 300); // wait for a short while,Until all scope data is loaded If any complex one
};
Hope this will help you
I did autocomplete in textbox but when i select from the autocomplete is not appending down, but its coming what i type in the textbox,
i tried these much i dont know where i doing mistake
please check this out :http://plnkr.co/edit/NPvT642ZDWu0vsXvnKla?p=preview
i am doing with help of this code:http://jsfiddle.net/viralpatel/aLDJJ/
SCRIPT
$scope.complete=function(){
$( "#tags" ).autocomplete({
source: $scope.availableTags
});
}
$scope.contacts = ["dimond", "hello"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
});
I need the text which i select in autocomplete to be append down in ul li, but its not coming please check this out, I tried as much i can, so some one help me out.
thanks
I agree with Claies that it is never always a good idea to mix angular and jquery. But if you want to go with the same approach, then you can remove ng-model= 'newContact' in your html (as 2 way binding is not required with the following approach), and replace your complete function with below code.
$scope.complete = function(){
var newContact = $('#tags').val();
$scope.contacts.push(newContact);
$('#tags').val();
}
Within this angular google map, I want to give the ability for a link to appear in a dynamic infowindow thats generated when the user searchs an address.
Now Ive got the infowindow to load correctly but the ng-click event is coming back undefined.
I have compiled the HTML string but still having no joy. Here is the compile code:
google.maps.event.addListener(this.marker, 'click', function () {
var contentString2 = "<div><a ng-click='hello()'>Click me!</a></div>";
var compiled = $compile(contentString2)($q);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
this.selectedMarker = this.marker;
infowindow.open(this.map, this.marker);
});
};
The infowindow loads fine when the marker is selected but when the "ng-click" is clicked inside the infowindow it comes back with:
Uncaught TypeError: undefined is not a function
I've provided a jsbin link to show the code:
http://jsbin.com/zukefa/edit
Thanks in advance for your help.
I am using AngularJS and PhoneGap to create a mobile app. I've a HTML string with anchor tag, which I display on screen using ng-bind-html. But when I touch the link on the phone it does not open the web site at all. My intention is to open the web site in new browser window. The string that I am passing into ng-bind-html is :
"www.google.com";
Also, Im using InAppBrowser Phonegap plugin for this. But this is still not working.
Please advice.
You can use :
www.google.com
More... https://docs.angularjs.org/api/ng/directive/a
OR
www.google.com
$( "#a_id" ).click(function() {
var url = $(this).attr('href')
var ref = window.open(url, 'random_string', 'location=no');
ref.addEventListener('loadstart', function(event) {
console.log(event.type + ' - ' + event.url);
} );
ref.addEventListener('loadstop', function(event) {
console.log(event.type + ' - ' + event.url);
} );
ref.addEventListener('exit', function(event) {
//console.log(event.type + ' - ' + event.url);
} );
});
I came across this problem to enable links in a twitter list which I was showing in my app.
I ended up using the following with a little help of jQuery:
1) use a filter to add a class to your links
html:
<span ng-bind-html="myLinks | externalLinks"></span>
filter in controller.js
.filter('externalLinks', function() {
return function(text) {
return String(text).replace(/href=/gm, "class=\"ex-link\" href=");
}
});
2) in your controller you can use jQuery to add a click event to the links (I am using a timeout to be sure the links are loaded into the DOM and don't forget to inject $timeout in your controller)
$timeout(function(){
jQuery('.ex-link').click(function (e) {
var url = jQuery(this).attr('href');
e.preventDefault();
var system = "";
if(device.platform == "iOS"){
system = "_blank";
}
else {
system = "_system"
}
window.open(url, system, "location=yes");
})
},1000);
Hope this helps.
I am new to backbonejs. What I am trying to do is, render a template on page load and pass model as data parameter in _.template function. Here is my bacbone code:
var Trip = Backbone.Model.extend({
url: '/trips/' + trip_id + '/show'
});
var InviteTraveller = Backbone.View.extend({
el: '.page',
render: function () {
var that = this;
var trip = new Trip();
trip.fetch({
success: function(){
console.log(trip); //logs trip object correctly
var template = _.template($('#invite-traveller-template').html(), {trip: trip});
that.$el.html(template);
}
});
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'fetchTrip'
}
});
var inviteTraveller = new InviteTraveller();
var router = new Router();
router.on('route:fetchTrip',function () {
inviteTraveller.render();
});
Backbone.history.start();
And here is my sample template:
<script type="text/template" id="invite-traveller-template">
<h3>Trip</h3>
<h3><%= trip.get('name') %></h3>
</script>
On running, I am getting the this in browser window and console shows:
trip is not defined
I am facing this issue since yesterday but could not figure out the solution yet. Not understanding what is going wrong, code also seems to be right. Any help would be greatly appreciated.
Update:
I removed
inviteTravellers.render();
from router.on() and then reloaded the page in browser. I still got same error which means that <script></script> (template) is being compiled before calling render() of InviteTraveller view. What can be the possible reason for this?
I had the same issue (underscore v1.8.2). My fix:
var template = _.template($('#invite-traveller-template').html());
var compiled = template({trip: trip});
that.$el.html(compiled);
You're passing the whole model to the template. Typically you would call model.toJSON and then pass its result to the template. Additionally using <%= in your template to render the attribute, which is meant for interpolating variables from that JSON object you're passing.
You can pass a whole model to the template and use <% ... %> to execute pure Javascript code and use print to get the attribute but it's probably overkill.
Have a look at this fiddle.
You code work perfectfly, here's it
I think that your problem came from another code, not the one you have posted, because there's no way for your view to render if you remove :
inviteTravellers.render();
Try to chaneg <h3><% trip.get('name'); %></h3> by <h3><%= trip.get('name') %></h3>
My code seems to be right but still my template was getting compiled on page load and I was getting trip is not defined error. I did not understand the reason of this behavior yet.
I solved this issue by using handlebarsjs instead of default underscore templates.