Help me, please.
I have some JS code, that allow work with LEAFLET map.
https://gist.github.com/russtanevich/140235d5456c3215df6ac8b788485ad0
The APP allow to add on map new adverts and when we click on marker - we see information about advert.
We can choose some category or contain some works in text of advert as filter. All filters works through ajax request (lines 51-81). Various ajax requests for various type of filter.
After AJAX request we change $scope.mapMarkers (line 13, 54, 61 etc.). OK.
mapMarkers is variable that contain array of marker objects (as line 86). okey. marker object has a popup message (as we can see on the picture). This message is angular directive (line 96, line 5).
Markers that we get after the first load application have a good popup message (angular directive initiate).
Markers that we get after filter AJAX request - also have popup message as angular directive. But it is logically - they don't show. We have empty popup message, because angular directive doesn't initiate in this occasion.
I hope, we understood me. Maybe I explained bad way.
What is my mistake? Architecture? Or maybe is there solution?
Thank you very much! Have a nice day! Best regards!
Ok so i havent look at the module 'leaflet-directive' but this is how I handled it on a similar app. I created a directive
app.directive('theDirective', function($compile, $timeout){
return {
restrict:'E',
templateUrl: 'template.html'
};
});
in my case im using templateUrl which im initiating elsewhere with <script> like tags that part will resemble what you tried to do in geodataToMarkers only that the way you wrote the template will not work because angular cant tell its a template.
Now when you add a marker you need to populate your template with stuff in your model meaning you got to tie them together. you can do that
by injecting the $compile to a method and tie both things together
$compile(domElem)($scope);
That will fill your directive with the model. note that you should pass domHtml the directive not the html meaning <the-directive></the-directive>
It is kind of hard to explain with your code because you are mixing jquery and angular a whole lot and you have to change many things. but to be clear on a possible quick solution
on the marker you have to put a div with an id='yourmarker' when you want to put stuff together, just look for the the element with that id
var domElem = document.getElementById(markerPointerId);
domElem.innerHTML = '<the-directive></the-directive>';
insert your directive. and compile it
$compile(domElem)($scope);
you should see you marker populated with the scope you have put in.
This by al means aint the Angular way. im just giving you a solution that i know works
Hope it helps.
Related
I am creating a web app with multiple tabs in a page. In one of the tabs using ng-show, I am willing to show a Line chart using highcharts.
I have a JavaScript file for the app where based on the selection of multiple html templates i have, the controllers for each html template are being defined.
For the JavaScript part of the chart, when I try to include the code in the file the app stops working. I then tried using the $scope.configChart = {...} inside the controller, but it also results into the same thing.
Can anyone help me with, how exactly should I implement the chart using highcharts. Apologies for this, may be this is a naive question but I am new to AngularJS and JavaScript.
It would be better for our understanding of your problem, if you could please post your code. The possibilities might be your view is not binding with the $scope object or function call is misplaced in the code(order of execution)
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
What I want is each of tab consist of its dynamic content, but now I doubt I was doing it correctly when I put ng-view within ng-repeat.
Here is a working version to push http://plnkr.co/edit/19sAXoEW4HZ9G7CT7R3a?p=preview . So in the beginning it was fine for me.
But after that I felt I've to load some data, the tab no longer working working when I do $scope.tasks = tasks
which tasks is a object in data.js. Here is the error : http://plnkr.co/edit/jbxypSlvk3rYlFAIHygo?p=preview
You are missing quotes on active=tab.active change to active="tab.active".
Which causes the
Error: The string contains invalid characters.
Why are you shoe-horning tabs here. I think a simple nav would do. The underlying issue is your design is fundamentally flawed, you can only have one ng-view on a page. If you update your post I can recommend a solution.
I got a simple, or really weird question:
In angular official forms tutorial, there is a section "Custom Validation":
http://docs.angularjs.org/guide/forms
and I copy the code to Plunker:
http://plnkr.co/edit/6pcUJNUD3Zkyv5bx6OTe?p=preview
What I want is the input need to do 2 validation: required and smart-float,
for now, the Plunker code works fine.
But if you change the directive name "smart-float" to the other one, like "all-eng", it turn to a small problem:
if you input something not a float number, it show "required" and "float" validation error both
I tried with Chrome 33, Firefox 27, no luck
google "angularjs directive name restrict", no luck
google "angularjs directive name smart-float", no luck
upgrade my angularjs from 1.2.13 to 1.2.15, no luck
Is this a bug? Anyone give me a hint?
This has to do with the order the validations are applied. It seems at some point, Angular is using the alphabetical order of the name of the directives to order their execution. So smartFloat comes after required, while allEng comes before.
By changing the order of directive execution, their parsers get different positions in the $parsers stack. So in the allEng case, your directive (and parser) gets executed before require. What happens if the input is a malformed number? Your parser returns undefined. This in turns triggers the required parser to believe the value does not exist - thus display an error!
You can play with the name of your directive to verify this behaviour.
Check a related issue: Angularjs form validation order
The Code
You can find the JSFiddle in question at: http://jsfiddle.net/SeanKilleen/A3QtJ/
Background / What I'm Trying to Accomplish
I'd like a Feedback button to place on our web site, likely in the Site.Master file (it's an asp.net web site)
When the feedback link is clicked, I'd like to show a modal dialog
I'd like to bind the link and the elements inside of the modal to a specific knockout viewmodel
I'd like to properly namespace it so that it doesn't interfere with any other scripts that might come up on other pages
I'd like to apply the Knockout bindings only to this portion of the code, because other subsequent pages, etc. might also have bindings.
To do this, I have the following main toolset: Knockout, jQuery, and jQueryUI (jQueryUI isn't my particular choice but that ship has sailed).
The Problem
In the JSFiddle link, the following code currently works:
$(document).ready(function () {
vm = new FeedbackNamespace.ViewModel();
ko.applyBindings(vm);
});
However, when I change ko.applyBindings(vm) to:
ko.applyBindings(vm, document.getElementById('FeedbackArea'));
The link part of the binding (that is mound to a viewmodel function to show the dialog) still works. However, none of the bindings inside the modal dialog still work.
Question(s)
How can I properly apply the viewModel to only a section of the site in this case?
Is this method of doing things still going to cause problems with child pages that might load their own knockout viewmodels and apply them?
Are there other examples of this sort of thing being done? I've been looking but unable to find them.
Thanks in advance for any help you can give!
The problem is here:
self.Start();
this sets up the modal, removing it from the FeedbackArea div. This happens in the process of creating the viewmodel, such that when this newly created vm is actually applied to the div a moment later, that modal is now gone, which is why nothing inside of it responds like it does when you apply the VM to the entire page.
I would make sure that Start method is called AFTER you apply bindings.
LIKE THIS