I have installed angular-ladda using browserify-shim / browserify, but am unable to get the buttons to work properly. When I click on the button, the spinner is outside of the button, not matter which data-style
I use.
You can find the instructions to browserify install here, but they did not work as I hoped. I ended using the information on this issue on GitHub to help me out, but I'm not sure that I did it correctly.
My app dependencies look like this:
require('angular').module('admin', [
require('Spinner'),
require('Ladda'),
require('angular-ladda')
])
My package.json file dependencies look like this:
"dependencies": {
"aliasify": "^2.0.0",
"angular": "^1.5.7",
"angular-bootstrap-show-errors": "^2.3.0",
"angular-breadcrumb": "^0.4.1",
"angular-cookies": "^1.5.7",
"angular-ladda": "^0.4.2",
"angular-ui-router": "^0.3.1"
}
"browser": {
"angular": "./node_modules/angular/angular.js",
"angular-breadcrumb": "./node_modules/angular-breadcrumb/release/angular-breadcrumb.js",
"spin.js": "./node_modules/angular-ladda/node_modules/js/spin.js"
}
"browserify-shim": {
"angular": {
"exports": "angular"
},
"angular-ladda": {
"depends": [
"ladda"
]
},
"ladda": {
"exports": "Ladda",
"depends": [
"spin.js"
]
},
"spin.js": {
"exports": "Spinner"
}
}
This is a gif of what the final result looks like: http://recordit.co/g2CmpETMC5.gif
What I did not realize is that with browserify-shim, you still have to link the style sheet. In my case, I had to compile the css file into a less file using:
@import (less) "/node_modules/angular-ladda/node_modules/ladda/dist/ladda-themeless.min.css";