What I want is each of tab consist of its dynamic content, but now I doubt I was doing it correctly when I put ng-view within ng-repeat.
Here is a working version to push http://plnkr.co/edit/19sAXoEW4HZ9G7CT7R3a?p=preview . So in the beginning it was fine for me.
But after that I felt I've to load some data, the tab no longer working working when I do $scope.tasks = tasks
which tasks is a object in data.js. Here is the error : http://plnkr.co/edit/jbxypSlvk3rYlFAIHygo?p=preview
You are missing quotes on active=tab.active change to active="tab.active".
Which causes the
Error: The string contains invalid characters.
Why are you shoe-horning tabs here. I think a simple nav would do. The underlying issue is your design is fundamentally flawed, you can only have one ng-view on a page. If you update your post I can recommend a solution.
Related
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
I'm trying to build docs from source on one of my plugins. Everything works fine now but the index page is empty and useless. I want to replace the index partial with the content of the classes partial since that's the only useful info for this plugin.
It looks like the index partial doesn't have access to the data that's available in the classes partial?
I've attached two screenshots to illustrate what I'm talking about. The second screen shot is what I want to show on the index page. I've tried importing the partial there but nothing rendered except for a static heading.
You're not able to do it easy because the index template of theme doesn't have all classes and modules data.
Please feel free to file an issue on GitHub, or patch welcome.
I have a CollectionView which has itemViewClass set up to a template which has an action that opens a modal containing the same data, but displayed in a different way. The modal is generated as a view and is passed the content from itemViewClass, but upon .append() the defaultContainer deprecation warning comes up.
Without further ado, here is the JS Bin.
The explanation for the deprecation warning you're seeing can be found in this gist.
Here is an updated jsbin with (hopefully) the solution to your problem.
Passing in the container removes the deprecation warning, but this is not an idiomatic Ember code you would find in your neighbour's application. Usually you would use a transient route that would populate another outlet with your modal.
You expected bindings would work when you pass plain old JavaScript object to Ember.View, but that is not the case. Wrap that in the Em.Object and everything gets wired up.
Also, please be a bit more descriptive with your questions, it was a little tricky to find out what you were trying to accomplish here.
I'm creating an app using phonegap that pulls the majority of its content from a database. It has a few hundred pages so I thought the best option would be to use a single page solution and just keep loading content into the main div when needed.
I have tried using Handlebars to do this but I'm not sure if that was the best solution as I cant get jquery mobile working with it (the app needs lots of accordions). Have also tried creating my own very simple accordions but failed dismally to even get an onlcick event working within the handlebars script tags.
Can anyone recommend a build that would be good for this job please? Or guide me to some example solutions that are along these lines?
I have googled extensively for 2 days now and have tried quite a few suggestions out but no success so decided to post here.
Many thanks
Generate all the content into your div, but using css hide almost all of them. As the user does what needs to be done to activate your paging call the show() function for the first 10 elements, if you consider 10 to be a page.
Use List View pattern of jquery
// adding data on list view
$('#list_view').append('<li >' your data '</li>');
//refreshing list
$("#list_view").listview("refresh");
//removing elements from list
$("#list_view").empty();
You can use multiple div's as well in the list view
use below link for more:
http://api.jquerymobile.com/listview/
I'm working on a landing page that is written largely with Angular JS 1.0.2. Upgrading to a later version may not be in the cards, at least not right away. It's working fine, but we're trying to do a bit of optimization. For a bit of background, we have a number of directives set up for various modal windows and other custom elements on the page. These use tempateUrl parameters and grab them from separate html files which contain all of the necessary HTML. Quick and dirty example as there's way too much code for me to post a full one:
Landing page html:
<div help-menu />
Angular directive:
module.directive('helpMenu', function(){
templateUrl: helpMenu.html,
controller: ...
link: ...
});
Where helpMenu.html contains simple html for the element in question.
This hasn't been a problem, but the number of html files keeps going up and I'd like to merge them into the main html file for the landing page to reduce the number of GET requests. Doing so basically involves snipping the HTML from each of the files and placing it at the end of the landing page html file (while wrapped in a div with an id to grab). The directive is changed to use:
template: $('#helpMenu')
This works just fine if helpMenu contains no angular code. However, I get a "node is undefined" or "linkNode is undefined" error in Firebug if I the html contains any angular code, ie, an ng-repeat, ng-show, etc. The odd thing is that everything works as expected despite the error, but I'd really like to get rid of it regardless.
I've tried a few ways to fix this (attempting a $compile at various points hasn't helped), but with no success, and there is very little information on this particular error. I'm baffled as to why it's a problem when the html that comes in will be identical in both methods. Perhaps template and templateUrl handle things differently?