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?
Related
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.
I have posted the issue in the source github issues page
https://github.com/Siyfion/angular-typeahead/issues/84
but was wondering if I could find a quicker resolution here.
I am following the loading dependencies, namely jQuery, Angular, and typeahead (bundle), by placing them ahead in my index.html file of the angular-typeahead directive.
Yet I get an error in my Angular template when I include the directive as a class. I have wrapped the controller code in a document ready function and that did not resolve it. I am able to type $("input").typeaway in the browser console, and it is eventually defined. Adding a timeout wrapper in the typeaway source directive code didn't resolve this timing issue. Any thoughts?
Can I dynamically assign the directive using pure jQuery in my controller and have the scope refresh? Simply adding the class "sfTypeahead" and then $scope.$apply() did nothing but add the class.
Thanks - any ideas would be MUCH appreciated.
I would to dynamically load controller in my partial file so my code is better organized. Through my research, I found that if I want to load controller from partial using the script tag, I need to include JQuery.
However, these approach seem to only work if my controller is declared in the global scope, i.e.
function MainCtrl($scope) {}
If I switch to using module in my controller.js
angular.module ("myApp").controller ("MainCtrl", function ($scope) {});
this no longer work with the error message
"Argument 'MainCtrl' is not a function, got undefined"
Below is a plunker to demonstrate this.
http://plnkr.co/wNv3UD
How could I make this work?
Note
I did not include controller.js in index.html intentionally. I want to load controller from the partial.html, since it would only be used there.
Edit
I was able to achieve what I wanted to to after reading this question: AngularJS Dynamic loading a controller
This seem to be a straightforward approach to support lazy loading. Hopefully the $controllerProvider.register method could be exposed through angular.module.controller in future versions to support lazy loading.
You may want to take a look at [RequireJS][1]
it provides a good and easy way for you to load your .js files on the run.
for the dynamic controller loading part: you should write a provider (a service) which exposes some methods to register your controllers wile the angular app is running (take a look at $controllerProvider in angular docs)
i suggest you take a look at this post as it mentions how to fully customize your application regarding the script loading and controller registeration and stuff like that.
You can achieve this using custom directive and in directive you can load script using jquery getscript or jQuery ajax call, directive will fire when you load the partial
I am using Angular UI Bootstrap Datepicker. I want to add behavior to this component. According to this guide, Extending Directives, I proposed some changes to this component. Changes can be view there: GitHub PR #257.
So now, I am trying to require it inside my extension but Angular keep saying he can't find datepicker controller.
I read this thread on SO AngularJS directive controllers requiring parent directive controllers? in which the answer basically shows the same and it seems working, Fiddle.
I looked at the Angular version which is 1.0.3 in the Fiddle and I am using Angular 1.1.5.
Did this change in latest Angular version or am I doing it wrong?
According to the comments, indeed, it still works with AngularJS 1.1.5. And ended finding what was messing up. As I wanted to extend the core functionalities, I wanted to edit the original template so I used the templateUrl and provided a path to a custom template, which worked when stacking the directives but the same when requiring directives mess the things up.
Do you know how I can override original template in this context?
I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?