My site's theme uses custom checkboxes and other items that I need to style. It uses $(".styled, input:radio, input:checkbox, .dataTables_length select").uniform(); to do so.
I'm wondering if instead of creating a bunch of directives if I can just tap into the template rendering and execute this method on the template node.
Why not just a uniform directive, which then you apply to whatever needed? There are surely things (like the .styled ones) which do not come from a template directly.
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.
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 currently working on a new custom directive which will transclude some HTML around the element you've called it on. This means however that if you have a ng-show directive as well on the element that the HTML would still be transcluded and hence shown.
A working example of the directive is located on this Plunk.
I'd like to counter this, by making my custom directive respond to ng-show but I can see a big problem with this approach as ng-show will hide or show the whole element it is called on.
On the other hand, I don't really like having a lot of custom directives each defining their own visible properties as an alternative to ng-show.
A third option would be to support both? This would allow me to switch of specific directives on an element as well as hiding it completely with ng-show
Has anyone got good recommendations on which approach I would have to take here? This is not a solitary case, we have a lot of custom directives of which we'll need to control visibility.
To summarize, these are the three options I'm thinking of:
Let custom directive respond to ng-show
Define own visibility control per custom directive (which could use ng-show underlying)
Support option 1 and 3
Any insights greatly appreciated.
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'd like to be able to generate a component from within a template. The use case for it is that when I generate a row in a DataView I'd like to be able to incorporate buttons and/or other components (maybe even a nested grid) to the rendered items.
So far everywhere I look all I see is a template calling another template. Is there a way to do what I'd like (generate component instead of just plain html) from an XTemplate?
Since an XTemplate is just used for generating markup to be inserted into the DOM, it alone is not enough to create components -- Components do have an underlying DOM element (through component.el.dom), but also exist as JavaScript objects in browser memory with other methods and properties.
It is possible to accomplish what you are asking through several different ways... you can use the XTemplate to generate the markup, and use the Component.applyTo config option to create a Component object in memory that is linked to the DOM element from your template. Of course, you will have to wait until the template is applied and then create a component with applyTo set to the correct DOM element.
You could also extend the XTemplate class to do the same thing just mentioned, but wrapped up in the applyTemplate stuff. I am pretty sure that Ext does not have a built-in way for the templates to create components -- so far they just create HTML.