Are there any directives to detect swipe events? If not, how can I use something like angular-touch?
An example case is i want to hide a modal on swipe up.
I have just used angular-touch on an app and it seems to work well.
Simply download angular-touch.js from the web or use NPM install angular-touch and it will download a node module. I did this and then copied angular-touch.js into my scripts folder with my app.js file. I then added a script link to the file and then declared the module in my app includes [ngTouch].
To use, all you have to do in the container div in the page is add ng-swipe-left="function()" or ng-swipe-right="function". Remember, the function must be written in your controller for the action to actually happen.
e.g.
Hope this helps.
Related
I have created a React Application and copied navbar from bootstrap component. I also added cdn files at index.html file. Also changed changed class to className but still but when run I get error with failed to compile and cursor is placed on data-toggle="colapse". upon removing this line it moves to next one. but its not working. .
working with bootstrap in react is not simple, it is easier to use React-bootstrap.
https://react-bootstrap.github.io/
you then just download the npm package and import the buttons and other options you want.
If you want to go about doing it this way, then you would need to use <button className="bootstrapclass">hello</button>
or specifically
<button className="btn btn-secondary">hello</button>
outside of that, there is no way to use bootstrap.
it is advisable that you share your code, so people can see what the mistake is.
The error was because of attaching cdn at outside the body. I resolved this by placing cdn of CSS and JS at just before the closing body tag.
I am trying to build an application using d3js in WebStorm because I read that it is the best way to organize your AngularJS project.
However, when I start a new project, select AngularJS project there supposed to be a "hello world" example ready where you have your index.html pointing to view1 and then you click view2. But what happens in my case is that when I click run index.html view1 doesn't appear even when I click on the link leading to it or to view2.
Is there a configuration missing ? Do you know how I can correct that ?
Have you done a bower install to download all the dependencies your project needs ?
I just started using Angular for university purpose and I wanted to start easy so I just copied some stuff for the official Angular material page into my editor.
(Used bower to install angular-material "bower install angular-material")
This is my code (image, because they don't like HTML code here):
http://imgur.com/pr8YYvN
The button is showing up, but the fancy "click on" animation doesn't work and I cannot see the button description neither!
It was me who add the "." in front of every src/href (the button is not there on the original angular example page, but without the dot, the font won't even be in material style but just standard e.g. Arial)
Where is the problem, did I forget something?
Thanks in advance!
You are using the controller MainCtrl in your application, but you never actually created a MainCtrl in your JS. You also reference YourController in your JS, which is also not declared anywhere.
I recommend to read the error messages angular is giving you in the console.
I have a web app I am launching from Eclipse using Spring Boot. I am trying to use Angular modals to have a nice looking confirm delete modal and I was following this tutorial to get the right dependencies. The Bower install seemed to go well:
bower install angular-modal-service --save
And I copy this into my html:
<script src="bower_components\angular-modal-service\dst\angular-modal-service.min.js"></script>
And I add the dependency in my Angular file:
var app = angular.module('myApp', ['angularModalService']);
But that is the point at which it fails. If I launch my app I just get a blank page, nothing at all loads. My console output from Chrome's developer tools gives me:
Uncaught Error: No module: angularModalService
This is a general problem I have had, anytime I try to add a dependency with something like
var app = angular.module('myApp', ['DEPENDENCY']);
it doesn't work. Is there something more I need to do in Eclipse in order for it to get it to pick up on my Bower dependencies?
When you have such problem, we can't resolve it for you.
But we can give you some advices to resolve this kind of problem :
Identify the problem. Open the developper tools of your navigator (F12), then the console. If you have nothing here, try to refresh. Angular will let you know if there is a dependency injection problem.
Check if you didn't forgot something. You have to import in your page angular, THEN angular-modal-service, THEN your application. The order is important.
Check if the module you want to use doesn't depend to something else. In your case, do this module needs bootstrap JS files ? Again, take a look at the console. It's here to help you.
Perhaps not specifying type="text/javascript in the script declaration causes your browser not to parse and execute the script? It is required in HTML < 5. Try adding that. Maybe that will help. Post your HTML file, if it still does not work.
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.