I have an application that contains a div with content in it. When I click a button jQuery adds a AngularJs directive to the div. After adding the directive i call scope.$apply(), but this doesn't seem to inform angular about the new directive on the div. Can someone explain to me how I can inform AngularJs about the new directive added with jQuery?
You shouldn't be adding directives to your markup with JQuery. Use Angular for that whenever possible.
That said, if you have to add directives via straight DOM manipulations like that, you'll need to use the $compile provider to compile the element and bind it to a scope before you add it.
Related
I would like to add a 'ng-click' to an element that ui-bootstrap renders from the accordion directive.
I am using angular 1.5, so there are a lot of solutions out there but they dont work for angular 1.5.
If I am correct you can override the template with your own template and put ng-click on the element in the template.
template-url (Default: template/accordion/accordion.html) - Add the ability to override the template used on the component.
I have two directives that should both use isolate scopes, <outer-box> and <flag>. When I click on the <flag> directive, I want to change the background color of the other directive. Before importing my code into JSFiddle, I also had it working so that by default, a placeholder image appears in the flag directive, but once you click on that image, the country flag appears instead.
Can someone help with the styling a separate directive on ng-click?
Here's my code: https://jsfiddle.net/nLduw6xw/
(My countries data isn't working in JSFiddle for some reason)
You can do it with requiring one directive from another.
In this example you can require outer-box to be a parent of flag.
With this you have the access to required directive controller ( 4th parameter in link function), so you can call a method to set class on element.
Working JSFiddle : https://jsfiddle.net/2atnxhgy/
I am trying to add a modal button to a leaflet map legend, with a AngularJS framework. Check out the map and modal buttons in this demo (modal buttons are the round info buttons): http://skyplan.ch/maps/dev/gwm6/
The modals are inserted using an Angular directive that looks like <div infomodal="views/modals/popup.html">.
I need to place such a button in the map legend. The problem is that since the legend is created dynamically, I need to $compile the modal directive. However, I only have access to the the content of the map control via the onAdd function of the control iControl.
I have tried calling $compile on the div that is generated in the onAdd function, but that hasn't worked. Has anybody tried to do something like this before?
I got it using the following steps:
Got the scope of your main controller in a variable.
var scope = angular.element('[ng-controller]:first').scope();
Created a custom button to test change of the language
var $div = $('<div><button ng-click="lang=\'de\';changeLanguage();">Change Language to DE</button></div>');
Appended it to your leaf legend control
$('.leaflet-bottom.leaflet-right:last .leaflet-control').append($div);
Force the angular to compile the appended the HTML control specifying the scope context of your main controller (1st step)
angular.injector(['ng']).invoke(function($compile) {
$compile($div)(scope);
});
Click the button and the "magic" happens. :-)
You may need to append (step 3) and recompile (step 4) after each MapBox update.
Since I was outside your project, that was the steps necessary to achieve the solution, but once your have the directive logic (not ugglified) you have full access to the leafpanel thru the $element and the $compile using directive service injection.
I am using UI Bootstrap's typeahead directive, and added my own popup template via typeahead-popup-template-url. In that template, I'd like to access scope variables from the parent template (i.e. the one in which I've used the typeahead directive). Is this possible?
Here's a (broken) example of what I'm trying to do ("hello" should be present in the dropdown): http://plnkr.co/edit/ITT1SdRfUWeeN6n3aMqu?p=preview
I'd like to do this WITHOUT modifying the typeahead directive. I don't want to muck around in third party (uib) code if there's a more elegant solution.
In your template, you need to reference the $parent scope. Change:
This should say "hello": {{hello}}</h1>
To:
This should say "hello": {{$parent.hello}}</h1>
Bootstrap, jquery ui, kendoui, yui etc
Isn't that a bit much of frameworks together O.o
Anyway this post might help: How to access parent scope from within a custom directive *with own scope* in AngularJS?
I'm in need of some pointers in my landingPage-builder project. (i'm currently stuck!).
The main issue is as follows:
Each element in the template (like the h1 and the paragraph) has attached a directive. What I need to get the directive to do is: create a template of HTML with some other directives attached like ng-click, ng-options etc, keep the bindings to the model intact (currently far away from working), update the model when changed.
I'm not trying to append to, or replace the element the directive is on, but make a html-template and inserting it into the DOM (almost like another view) so that the model on the left can be updated from the "settings" box on the right.
The project can be viewed here: http://193.107.29.196/~stian123/landingPageV3/app/#/pagebuilder/2
You may need Allow-Control-Allow-Origin for Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
I'm a bit confused about $compile and doesn't really know when I need to use this part of the directives api.
Any suggestions?
Thank you!
If I understood your question correctly, you want to dynamically create templates, some of which have Angular attributes in them, then attach them to the DOM.
First, to (hopefully) answer your question, about when to call $compile:
Whenever you load in HTML from outside Angular's template system (like trying to set $(element).html(myHtmlString)), you need to let Angular compile it before you attach it to the DOM. In other words:
elem.append($compile(yourHTMLString)(scope));
This lets Angular traverse the DOM and parse any directives and bindings and attach them to the provided scope. If you don't $compile, Angular has no idea about those intended bindings at all, the HTML is never read by Angular.
Second, I don't know how flexible you want your templates to be, but if they're relatively fixed, but with some fixed customizable options (text, color, font-size etc), you might be better off creating a directive for each 'view', with the view options bound to the scope of the directive. Then you can just change the fields on the scope of the directive in the panel on the right side, and the view will update directly. You wouldn't even have to use $compile in this case.
If you want the user to be able to manually add the template HTML code, you will have to compile the HTML as described above.