Develop Reference

Angular. Initiation new angular directive after AJAX request

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.

Angular 2 Input Custom Pipe

Is there any way to use currency or a custom pipe inside an input text in Angular 2?
I've tried this:
<input [(ngModel)]="order.price | currency"/>
But without success

It's not possible to use pipes in inputs, even in angular 1.
What you are looking for is a mask directive.
For angular1 there are a lot of directives like ngMask, angular-input-masks and others.
Angular2 is in release candidate right now (06/02/2016), so there are just a few "directives".
You can also build your own mask component.

I've been able to use the angular2-text-mask and text-mask-addons as a way to transform the format of input text field values. The documentation and related info is quite thorough and a currency example can be seen on a text-mask demo page.
Though I've not tried it, this ngconsultant blog post discusses a technique for adjusting input values using a somewhat limiting (browser-native focus/blur methods) #HostListener technique.
With either approach you have to be wary of whether you're transforming the input simply to make the UI more friendly for the user OR if you want to utilize/preserve only properly formatted input bound to your data model in the component.
Regarding the former, if you want to remove the formatting that is applied to the input before it is utilized, stored, or passed on, extra work/code/intervention is required either in your component code or in other services that manage the data model to parse the formatting out of the data bound from the input value.
(A very basic solution is discussed in this stackoverflow post.)

Angular-formly: Why does the directive behave differently from the type?

I have two input fields, both generated by the same template. On both I am setting
...
templateOptions: {
...
required: true
}
One input field is registered using formlyConfig.setType
the other using a directive. I have created a JS Bin here.
Only the first is getting the required attribute, the second is not. In the docs for custom templates (controller option) it says:
Provides you the ability to add custom behavior to the type without having to make an entire directive (you can make a directive instead if you wish).
What am I doing wrong?

The problem in the second example that when angular-formly is processing the options with the template, all angular-formly sees is: <plain-text> for the template. Hence, it doesn't know what element to place the required attribute on. angular-formly will only attach attributes like these to elements that have an ng-model on them because those are the only elements where that attribute makes sense.
Again, the key here is what angular-formly sees when it's processing the template (before it's compiled). It doesn't matter what the directive compiles to. So yes, you can use your own directive, but if you want to leverage the features of angular-formly, it needs to utilize the ng-model controller (like directive used in this example).
Good luck!

Em.View.create deprecation warnings

I have a CollectionView which has itemViewClass set up to a template which has an action that opens a modal containing the same data, but displayed in a different way. The modal is generated as a view and is passed the content from itemViewClass, but upon .append() the defaultContainer deprecation warning comes up.
Without further ado, here is the JS Bin.

The explanation for the deprecation warning you're seeing can be found in this gist.
Here is an updated jsbin with (hopefully) the solution to your problem.
Passing in the container removes the deprecation warning, but this is not an idiomatic Ember code you would find in your neighbour's application. Usually you would use a transient route that would populate another outlet with your modal.
You expected bindings would work when you pass plain old JavaScript object to Ember.View, but that is not the case. Wrap that in the Em.Object and everything gets wired up.
Also, please be a bit more descriptive with your questions, it was a little tricky to find out what you were trying to accomplish here.

How can I use angular directives as custom markup for angular-ui-select2 results?

I'm using angular-ui-select2 to generate a select box.
By default, results displayed in select2 lists simply display a piece of text, but select2 provides a configuration option, formatResult from which one can return custom markup.
I'd like to use another directive I've written as part of the result markup.
This plnkr demonstrates a minimal use case. How can I get the projectLikesCount directive to be compiled and displayed properly within the dropdown?

I was trying to do the exact same but couldn't find a solution. It seems that the population of the results by formatResult is not in the angular lifecycle, therefore whatever markup returned by the function is displayed as is i.e., no directives will be "translated" into behaviour.
An example of this is that if you add the following markup:
<div ng-show='isNewElement'>Add new</div>
it will be rendered every time with no regard to the isNewElement value.
Considering the time this question has been unanswered I guess that it's either really easy or really complicated to achieve the desired behaviour. I'll post if I find a somewhat useful solution.