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?
Related
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
First of all I know I am going to have to change the title, hopefully I can better form my question based on the answers.
I am working on a breadcrumb using angular (let me know if the link fails) but for some reason it isn't working as I would expect. Everything seems fine but when I click the link to go to the next page (sorry in advance for the annoying alert). I get the following error...
Uncaught TypeError: Cannot read property 'addCrumbs' of undefined
The directive is clearly working so I am guessing it is this line that is causing the issue...
angular.element('#crumb').scope().addCrumbs(crumbs);
Can someone explain why this is not working?
Why you'r doing it wrong :)
First of all, Angular is designed for single page applications and can simulate navigation between pages through modules like ngRoute (official) or ui-router (from Angular UI Team, more powerful, more complicated).
Your example doesn't follow the "Angular way" cause you have two "index" page, I mean, Angular (and your app) is re-loaded each time you click on an internal link so you can't share variables between pages (in your case you want a "breadcrumb" shared between pages).
Your breadcrumb directive should share the breadcrumb array via data binding instead of using an external controller explicitly. See here for more infos.
The ng-repeat directive should be applied to the li element instead of the ol element.
Updated Plunkr
See the updated version of your Plunkr.
I added ngRoute module and separated pages. BUT I think it's not a very reusable and clean way for breadcrumbs.
Conclusion
I recommend you to use a dedicated module to handle your breadcrumb, like ng-breadcrumb (see the demo here)
I am trying to create two tabs using Angular UI (Bootstrap), in which one tab lets the user input HTML, and the other tab serves as a "Preview", rendering the HTML provided.
To handle the preview, I am using the contenteditable directive demonstrated here.
However, this directive does not seem to be working using Angular UI tabs. I believe there may be a scope issue at play, but I haven't been able to track it down. I have already found examples of "gotchas" here, but this doesn't seem to be the issue in my case.
A Plunker of non-working code can be found here. In this example, not only is the HTML not getting rendered, but the scope updates seem to be sporadic.
Any help is greatly appreciated!
You can do this without that directive at all. You just need to use the $sce service in angular. See this plunk
I have been using this code to bootstrap AngularJS:
angular.bootstrap(angular.element("body")[0], ["stApp"]);
However now I decided not to use jQuery and I am getting the message "selectors not implemented"
Is there a way I can resolve this without have to use the jQuery selector?
First of all, you can use ng-app even if you load AngularJS script at the bottom of a page, there shouldn't be any problem with this.
And yes, if you don't include jQuery AngularJS falls-back to so called jqLite - a minimal subset of jQuery APIs needed for proper functioning of AngularJS. As mentioned on http://docs.angularjs.org/api/angular.element the only selectors implemented in jqLite are tag name selectors. So If you really want to do manual bootstrapping you should change your code to:
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document).find('body'), ['stApp']);
});
Here we are only using a tag-name selector so find is working as expected, even without jQuery included. Demo plunk: http://plnkr.co/edit/xsE02zWxK993FTXtWUbp?p=preview
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?