Implementing below feature, when user clicks on Add button , new conext is getting added.
I created that context as directive, Am not sure whether i should create this just as template and repeat using ng-repeat or using directive is better.
I would recommend a directive. I personally find its a good way to encapsulate code. It makes it re-usable, and there is absolutely no performance issues doing so. AngularJS will run smoothly to about 2000 directives within the same page.
Doing it in a directive will also allow you to use functionalities later on you might not have predicted to use.
Related
I'm a bit diving into a rabbit hole when it comes to implementing a rich text editor. Currently using react-quill, but want to implement a concept of template variables and/or allowing users to choose templates.
I know there is TinyMCE out there, but the self-hosted setup is very unstable and the cloud provided setup is not stable in the country I am residing. :(
I am pretty much looking into implementing something similar to this:
https://ambassify.github.io/tinymce-variable/
That would replace {{ mustache }} syntaxes with a bit more visual appealing element, that cant be edited but can be deleted.
So the thing I tried so far was using this as an example to insert Embed/blots in the QuillJS text editor. But this doesnt really insert things using mustache syntax, and also when a user chooses a whole template, then the variables are not being highlighted.
Example of a template a user could choose:
Hey {{ receiver.fullname }},
Some message here
Thanks!
{{user.first_name}}
{{user.company.name}}
How it shoud look like:
The user has the option to edit the template they chose, and after clicking on send. Taking the same template they edited (with the variables) to the next email window.
So my question here is, does anyone have a recommendation on how to accomplish this and which wysiwyg-editor might offer the right solution for this (besides TinyMCE)?
I recommend you to use tiptap framework.
This is an headless wysiwyg that gives you full control on the editor.
They provide a simple extension system which could perfectly match your need.
React Mentions does this very nicely IMO. You can use markup and displayTransform attributes to transform the entry into a tag like structure. Also the data attribute will let you define the available selections.
I have been on a few AngularJS projects now where directives are used extensively for handling views which end up with large amounts of JavaScript behind them. It doesn't feel quite right and they're also not the easiest thing to test unless you move the code out into controllers and bind that to the directive.
An example would be a large form created as a directive and a large link function placed on this. Not very testable, and its only used once in the whole application.
They do separate the code nicely in that you end up with code like this
<h1>example Header</h1>
<custom-form form-data="somemodel"></cutom-form>
<p>Lots of other stuff here</p>
Would be interested in how other people approach directives and views as I first thought directives should be really small components that are reused.
Basically, only few occasions I will implement directive and these are also the rules I trying to stick with
common reusable components I can use anywhere in the project (e.g. a time input directive with an add-on dropdown menu allow to choose time units like second/minute/hour/day)
Extend or patch 3rd-party directive
Most of the time, should utilise AngularJS MVC structure to fully take its advantage.
Is there an equivalent directive for angular thats similar to collection-repeat for ionic? I'm looking for ways to do infinite scroll without taking too much of the dom. Tried the ngInfiniteScroll and the angular ui/ui-scroll.
Are you looking for directives that handle very large collections with decent performance?
I think what you're looking for is called Virtual Scroll. There are a few libraries that do it. I haven't used any yet, but check out angular-virtual-scroll or angular-vs-repeat.
I'm doing a visual website with lots of stuff depending on the scroll position. I understood this isn't the ideal type of project for Angular. Since things are very interdependent, it makes it hard to isolate things. Nevertheless, I wanted to try and do this kind of project with Angular, hoping to learn a better way to create modular code.
I run into a structural problem that is similar with both scroll events and CSS:
I try to create my directives with less dependencies as possible towards each other. The result is that each directive that deals with the scroll has it's own listener to the scroll event. Maybe this is isn't so awful concerning performance (or is it?), but it makes it hard to know what happens first. In jQuery land I end up using one single $(window).bind('scroll, ..) function, putting all scroll logic in one place, then the order is clear.
Similarly, this modularity makes having one single CSS file awkward, ideally I'd like to set the CSS from inside the directive to encapsulate the behaviour.
I have a feeling there might be some best practices with these types of issues that I haven't found out about.
j
I am taking up a task to re-write the following flash app in HTML5:
http://www.docircuits.com/circuit-editor
Given the complexity of the app and my R&D so far, I have identified AngularJS as the preferred MVC framework for the implementation. The app has various parts such as panels, menus, properties, charts, etc., all of which I believe can be easily implemented in AngularJS.
The key problem, however, is that the component design and interaction (things like, drag/drop, move, wire handling, etc.) need to be Canvas-based, as I have been able to export all the vector graphics from Flash using the CreateJS toolkit (http://www.adobe.com/in/products/flash/flash-to-html5.html) into a Canvas library and not to an SVG.
The problem is that there is no clear way to communicate between the "individual objects inside a canvas" and AngularJS. I have looked at the following examples, but almost all of them work on the canvas object, and not about handling individual components inside Canvas:
AngularJS Binding to WebGL / Canvas
Is there already a canvas drawing directive for AngularJS out there?
I am kind of stuck here, and not sure what to do. Would really appreciate a some comments on:
Whether AngularJS is the right choice?
Should I try implementing the Canvas part in another library (such as Fabric.js, kinect.js, Easel.js) and integrate it with Angular (which again seems too big a task for now)?
If none of the above, what other framework should I switch to that can easily handle canvas as well as other functionality like panels, menus, charts etc. with ease?
We finally managed to work with AngularJS and HTML5 Canvas together. Here below, I will share, briefly, our requirements and the approach we followed to achieve it.
The requirement was a bit tricky as we wanted to:
Handle event handles on individual elements inside the canvas, and be able to add these elements dynamically based on the data in AngularJS
Keep data for each individual element in AngularJS while using Canvas for only display of the data.
Use controller inheritance for special handling of data in certain cases (for e.g. all the instances should be movable and draggable, but some instance may need to blink or show some color bands etc.)
To handle the operations on Canvas, we divided it into two parts:
Canvas service
It does the job of
initializing the canvas
adding or removing any element from the canvas
refreshing the canvas
Instance directive and controller
the angular controller keeps the handle for the corresponding "canvas element", and also all the data that is associated with it.
the event listeners on each element trigger specific functions in the angular controller which manipulate the instance data
the directive watches the instance data in controller, and correspondingly updates the canvas with the help of the canvas service
For controller inheritance, we found the following approach quite useful:
https://github.com/exratione/angularjs-controller-inheritance
This helped us create controllers dynamically, and with the help of instance directive, we could also handle individual updates on the canvas along with the generic event handling.
I understand that this approach may not be completely AngularJS-oriented, but it worked well for us, and we were able to handle a reasonable amount of interaction between AngularJS and HTML5 Canvas.
Sure you could do that with Angular just fine. However, depending on the complexity of your app and the type of data synchronization you need I would recommend using JS prototypes to handle that. The "angular way" would be to use directives instead.
Create a global drawing context and then split up the various components into JS objects. Handle the setup, logic, update, etc within each object (sort of like a class) and then draw to the global context. You should have a main draw loop which is essentially a setTimeOut function that updates the game object states and redraws everything.
An alternative approach is to combine Angular and JS prototypes. This is a great example: https://github.com/IgorMinar/Memory-Game
EDIT: another example of building games with angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html