How to make a custom directive configurable using services in Angularjs - angularjs

I have built a custom a directive using angularjs. Now I have to make it configurable, so that who ever is using it should be able to call a service in my directive and initialize all the configurable parameters, I cant even get a big picture of what it is and how to make it configurable.
Right before any body uses my directive in their spa(single page application) they should configure the directive and then the configurable parameters should be set and the directive should function as configured.
Any help would be appreciated, please ask any questions if I am not clear because as said even I don't have a clear picture of what is needed. Thanks

I have used the angular service providers and config functions, made another js file isolated all the configurations into the file.
Just have to set the parameters in the config function, via the provider function we can inject the configurables into the desired controller.

Related

How to override or add some functionality to the existing AngularJS services?

I want to override or add some more functionality to existing services like $http, $log and so on
how to do that?
You would need to use the $provide.decorator method for extending any angular services, the definition of a decorator as per the angular docs:
A service decorator intercepts the creation of a service, allowing it to override or modify the behavior of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
Came across this link by Freek Wielstra which might help you in taking this further.
Edit:
Please check this SO answer by #tomakisquare, he has provided a brilliant plunkr example to extend third party services (or any service for that matter) without meddling with the original code.

Define a controller that is specific to a directive in ngdocs

I am using ngdocs to document my AngularJS application. I have a controller in the API that is specific to the directive itself. I have attempted to document this as #module.directive:dirName.controller:ControllerName, but this doesn't seem to tag this properly and the controller ends up being documented under a new module labeled as module.directive:directiveName. Should I just document this under the module? Anyone have any thoughts on the best way to do this?

Can AngularJS inject named instances of factories or services?

I am just starting with Angular with a project that seems really suited to it. In this project i must make several instances of a form builder so i have decided to make a service out of the form builder code. All is fine and good up until i take in account the other requirement: Form previews.
I was thinking of something along the lines of what this guy does but then i realised using his approach implies i cannot store/share more than one form (At least with the default injection approach used by Angular) so i gave it some thought and decided that having one instance of the FormBuilder service for each form would cut it. How can i control which instance of my service is injected into my controllers?
Propably you would not inject a specifc FormBuilder instance rather than a InstanceRegistry?
Create a service which returns a function taking the name to resolve and returns the resolved instance. This will be called from your controller.
Optionally, you could create resolves for the route if you are using either ngRoute or ui.router and do the resolving in the resolve block.
.when("...",{
controller:"...",
templateUrl:"...",
resolve:{
form1:["$formFactory", function($formFactory){
return $formFactory("form1")
})
}
})
HTH

Dynamically add service to $injector

I'm trying to dynamically create a service in another service and add it to the inejctor, so that other controllers and services throughout the app can inject it later. I'm not sure if what I'm even trying to do is possible but I've boiled down what I'm trying to do into an example on Plunkr
I'm basically having two modules use each other. One defines how a service should be configured on the fly, and the other module configures the services on the fly. I'm not sure what to do while configuring the new dynamic service though so that it can be found by the injector later and used in other controllers,services etc. Any thoughts?
Ok, so basically I needed to make a provider instead of a service. The provider can create factories, values, constants, etc. See a revised plunker here

Using AngularJS and jsPlumb (use jsPlumb functions in AngularJS controller)

So I have a project that I am working on and it requires that I use jsPlumb for graphical elements connections and I am building my app entirely using AngularJS.
What is the procedure to follow if I want to include another library's code into my controller (to fire up some jsPlumb code, say on ng-click) or any other part of my AngularJS code? Should I do that or why should I not do that?
Take a look at this well-commented jsPlumb/angularJs integration example:
https://github.com/mrquincle/jsplumb-example
I don't see an easy way to establish two way data binding between Angular and jsPlumb.
What I ended up doing on my project is creating a custom Angular service which serves as a bridge between controllers and jsPlumb. Such service contains methods specific to application, such as:
removeElementFromFlow
addElement
getElements
getConnections
isElementConnected
etc.
It allows to keep all jsPlumb plumbing code outside of controllers, keeping them clean.
JSPlumb has put out a tutorial on how to use JSPlumb with Angular:
https://jsplumbtoolkit.com/docs/toolkit/demo-angular.html

Resources