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
Related
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 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?
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.
i'am using a popOver that show a list of bottons, those buttons have a simple ng-click that is not working. can someone help me?
here a simple example:
http://plnkr.co/edit/YfC6RxVMO3jmGguHXgXu?p=preview
You're cloning the HTML and rendering it outside of Angular, so it's not going to have any of the bindings you'd expect. Instead of using Twitter's Bootstrap directly in your Angular application, I would recommend using Angular's UI Bootstrap instead. It has its own popOver that was written to work with Angular:
http://angular-ui.github.io/bootstrap/#popover
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?