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.
Related
Some (advanced?) angular is making my head hurt.
The goal is to extend a WYSIWYG HTML editor to allow users to insert certain angular directives into arbitrary HTML content. I have chosen medium-editor and its angular-medium-editor wrapper (but I'm not wedded to that if there are better solutions).
This Plunk shows how the editor directive is instantiated and activated (using an editable attribute). The toolbar is customised to include a button which adds a custom directive around selected text: <my-custom-directive class="bg-info"> ... </my-custom-directive>. (For demonstration, the custom directive wraps (transcludes) its contents in a button which triggers an alert when clicked).
I'm having problems with (re-)compiling the editor's content so that the directives inside the editor compile. Using $compile(element.contents())(scope) throws ngTransclusion:orphan errors for directives which uses transclusion. (I understand this is due to angular already having made the transclusion by the time the editor's link function is called.)
I cannot refactor all potential custom directives to not use transclusion.
What pattern can I use to successfully compile arbitrary editor content (which may include many different directives), ideally whenever that content changes, or at least when the editing is finished? Is this one of the "fringe cases" where the use of $compile is justified? If so, how do I use it?
This question and answer made me realise that the way to do this is to $compile only the inserted element when it is inserted, rather than recompiling the whole section.
Handily, rangy's classApplier module allows for an onElementCreate callback which can be used to compile the custom directive as it is added.
Here's the working plunker.
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.
This plunk is taken from the Angular developer guide, but it doesn't make sense to me. It's just supposed to be showing the basic functionality of transclude, which I understand, but in the rendered output you'll see there's suddenly a span tag. Where did that come from? It's not part of the template.
Since your transclusion is just a text (in fact an implicit span), it needs to be added while compiling the HTML.
To avoid that, you can manually wrap your text around any tag, for instance a <div>, so that it will be inserted as is.
If you really want to not have any tag in between, you could write your own compile method in your directive, and set the text to the element directly, using elem.text(content) instead of elem.html(content)
I'm working with angular js and there's one thing I didn't fully understand yet. I know what directives are: they are "additional features" that we add to HTML that can be used as elements, attributes, comments or classes and that can change completely the markup there by some other thing rendered by angular or can add functionality with the link function.
That's fine, but when to use directives? I know that if we want to represent on screen some domain specific object then this is one possible candidate for a directive, or when we want to add functionality to some HTML element (like slider functionality to an input) then we use a directive. But what about other cases? What about when we want to manipulate the DOM to, for instance, activate the functionality of a sidebar or thing like that? Directives are used for this to?
How do when know when to use a directive in angular?
I think about directives when I face one of this two scenarios:
Custom control: I need to implement a custom control, that probably I will reuse in other parts of my app or even other projects.
Custom Validations: AngularJS provides a limited set of validations (e.g. ngRequired, RegEx...), but for sure you will need to implement your custom logic validations. I prefer to implement that validations in directives (reuse, SRP, easy to be tested isolated) rather to overload the controller with that logic.
Some directive rules of thumbs:
If you plan on adding the same markup-based functionality more than once, create a directive (but if it's simple enough, just use ng-include).
If you need to modify the way an ng-modeled input field validates, formats, or parses, create a directive that requires ngModel.
If you want to make writing unit tests easier for a specific piece of markup, write a directive.
If you come from a jQuery background and instinctively feel like using $('.jquery-style-selectors') from your controller, instead write a group of directives where the child directive(s) require the parent directive(s) and communicate via the directive controller(s).
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.