Assume that you want to create a directive in AngularJS that requires an external CSS file.
Are there any best practices on where to store the directive's CSS content?
Edit : I am after a solution that in order to copy my directive to another anguarljs app, I will only need to copy the directive code and not have to go over all my CSS.
In the case where there is a templateUrl parameter in the directive, I guess the best place to put the directive's CSS is the HTML template, or not?
If you keep the html template in a separate file I would suggest you keep the css separately too. In this case you could use a tool like grunt or gulp to bring all those separate directive css together
If the html template is inside the directives definition the best choice would be to keep the css as a style tag provided that the style sheet is a must have and is as malleable as possible
Related
Is there a way to tell Angular to not compile contents of certain elements?
Use case:
Angular CMS contains textarea elements that have CKEditor attached. The CKEditor is using the divarea plugin instead of the default iframe plugin. The textareas contain HTML templates. These templates are exported on demand and fed to a Angular webapp.
The templates are simple enough: plain text, ordered lists, the occasional predefined class attribute applied on the plain text; but the plain text can contain placeholders for the Angular webapp to interpolate. I do not want to let the Angular in the CMS interpolate these at all.
Currently my problem is that the Angular in the CMS interpolates these placeholders and, since they don't refer to anything, removes them. I would rather not just change the delimiters to '{[', ']}', as while this might fix this in the short term, the chance of directive and text copy collision increases as the project goes on, and I'd like to avoid it.
Is there any directive or other way to tell Angular to keep away from the content of specially marked elements?
Use ng-non-bindable directive on the element:
The ngNonBindable directive tells Angular not to compile or bind the
contents of the current DOM element. This is useful if the element
contains what appears to be Angular directives and bindings but which
should be ignored by Angular.
Or use your own directive with terminal: true property to match the layout better, because it is the only thing that ng-non-bindable directive does.
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?
So I'm a bit new to Angular, and I'm wondering what best practice would be if I wanted to be able to toggle content completely away. So you would be able to view it, or toggle off to hide it. Sorta clean things up. Should I use a if statement, or maybe give the content two sides (one being empty) and be able to switch between them? What would be best?
View switching in angular can be done in a multitude of ways. In order to do route based switching (switching based on the hash in the url). Use a combination of the ngRoute module which helps you to configure routes through the use of the $routeProvider and the ngView directive.
$routeProvider docs:
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
ngView docs:
https://docs.angularjs.org/api/ngRoute/directive/ngView
Also you can hide/show, add/remove content via these directives
ngIf - will completely remove and destroy the scope of the content
https://docs.angularjs.org/api/ng/directive/ngIf
ngSwitch - will work similar to a switch statement in javascript. This is used in conjunction with ngSwitchWhen and ngSwitchDefault. Like the ngIf directive this will also remove and destroy the scope of the content.
ngSwitch/ngSwitchWhen/ngSwitchDefault
https://docs.angularjs.org/api/ng/directive/ngSwitch
ngHide/ngShow - per the name these directives will simply toggle the classes ng-hide and ng-show respectively. ng-hide has a css property of display: none.
ngShow:
https://docs.angularjs.org/api/ng/directive/ngShow
ngHide:
https://docs.angularjs.org/api/ng/directive/ngHide
The directives that completely remove the contents can be better for performance since the number of watchers in your app can accumulate fairly quickly. In most cases I'd suggest using the removal based directives for anything that has an evaluation of the scope beneath it and use the hide/show directives for simple static content display.
There are example usages of each of these directives on all the documentation links I've included. Feel free to comment with questions.
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.
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.