I'm trying to join AngularJS and Gridster, I follow a code found here: Gridster jQuery plugin on AngularJS ng-repeat content going bad
The problem is that when removing an widget (and persisting the data to $scope.items - in my case for cache use) after the first removal the content goes all wrong.
I click the next and it deletes two widgets (in the elm.$destroy callback). Can you help me understand how to save data on the fly without having this issue?
I have no experience with this, but you may want to investigate angular-gridster.
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)
Is there any way to make an ionic modal have a ui router nested state with multiple modal pages?
It sounds like you are describing a wizard, A model that has multiple pages (or steps). Because Ionic and AngularJS go hand in hand with each other you can use some of the pre-built AngularJS components to achieve this, here is a link to a few:
https://github.com/mgonto/angular-wizard
https://github.com/simpulton/angularjs-wizard
There is an ionic wizard plugin, which although it is designed for wizard like steps, will pretty much provide a set of linked modal pages which share state, which should meet your needs.
http://arielfaur.github.io/ionic-wizard/
It also has nice features such as preventing progression in a wizard until fields are filled out etc.
I would recommend not doing that because I have tried it in the past and in the end I realized that it wasn't really practical. What you could do is, add:
ng-include src="'your-template.html'" ng-controller="yourTemplateController">
Now you have a view and a controller associated with it. All that is left to is, make the URL change. This can be done by using location.hash, or setting $stateParams and checking for it using $watch. I hope this helps.
I was writing a sample app to display a set of youtube videos using AngularJS and filtering the videos based on language. I am binding user action to ngFilter and hiding and displaying filter based on that.
Please see JS Fiddle for code ==> http://jsfiddle.net/saratchandramrs/kxk9p/
If the ideal place to put the DOM manipulation code is on the directive per this AngularJS post - click here
Should I be doing something with the directives in my example? or would it be a overkill or could someone help me understand if I am doing it right per AngularJS principles? or if there is a better way to do what I am doing?
Also, every time the filter value changes, the DOM reloads, is there a way we can accomplish this functionality with out the reload? or is it like hiding individual elements based on the filter value (similar to css style:"display:none")?
Side note: I am using Bootstrap 3 for UI styling.
Thanks for the guidance.
The problem with performance is that you load a iframe for youtube in the directive. Every time you filter, load data form youtube. Did you see http://devgirl.org/2013/03/21/fun-with-angularjs/ ?
I'm fairly new to Angular but I've been using it the past few weeks and have managed to work out most of the problems I've come across. This one however has me stumped.
I have an app that pulls in tweets from Twitter then - using an angular filter - pulls out all the urls and styles them as links. This part works fine but the client decided that links from Twitter were't safe so they wanted a disclaimer to fire every time a link was clicked. Simple enough - I hijacked the link and swapped the href for an ng-click="openLink('url')". This is where the problem occurred - the ng-click doesn't work.
I'm pretty sure the problem has something to do with $compile() - I've had similar issues before - but I have no idea when or where to call it.
I've created a Plunkr that is a lite version of what I'm after. The link at the top isn't loaded in dynamically and fires the alertUrl() function fine, but all the links generated by the filter fail.
I'm probably missing something really simple but it's been bugging me a while now so any help will be massively appreciated.
Thanks,
Sam
Well you are correct that the html\content that you emit needs to be compiled for angularjs to resolve the alert function.
I have changed your plunker, and inject a compile directive (from here)
See it in action here
The basic idea here is to compile the content produced from twitter feed dynamically.
<p compile="tweet.text | convertLinks"></p>
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.