servergrove / ngswitchery Goto Github PK
View Code? Open in Web Editor NEWAn AngularJS Directive for Switchery
License: MIT License
An AngularJS Directive for Switchery
License: MIT License
user@Cheetah ~/dev/jseko(master)$ bower install ng-switchery --save
bower ng-switchery#* not-cached git://github.com/servergrove/NgSwitchery.git#*
bower ng-switchery#* resolve git://github.com/servergrove/NgSwitchery.git#*
bower switchery#~0.6.1 cached git://github.com/abpetkov/switchery.git#0.6.1
bower switchery#~0.6.1 validate 0.6.1 against git://github.com/abpetkov/switchery.git#~0.6.1
bower transitionize#* cached git://github.com/abpetkov/transitionize.git#0.0.3
bower transitionize#* validate 0.0.3 against git://github.com/abpetkov/transitionize.git#*
bower fastclick#v0.6.11 cached git://github.com/ftlabs/fastclick.git#0.6.11
bower fastclick#v0.6.11 validate 0.6.11 against git://github.com/ftlabs/fastclick.git#v0.6.11
bower ng-switchery#* error Arguments to path.join must be strings
Stack trace:
TypeError: Arguments to path.join must be strings
at path.js:360:15
at Array.filter (native)
at Object.exports.join (path.js:358:36)
at GitHubResolver._checkout (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/lib/core/resolvers/GitHubResolver.js:54:21)
at /Users/user/.nvm/v0.10.26/lib/node_modules/bower/lib/core/resolvers/GitResolver.js:69:21
at _fulfilled (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:760:13)
at /Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:574:44
at flush (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:108:17)
Console trace:
Trace
at StandardRenderer.error (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/lib/renderers/StandardRenderer.js:72:17)
at Logger. (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/bin/bower:111:22)
at Logger.EventEmitter.emit (events.js:95:17)
at Logger.emit (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
at /Users/user/.nvm/v0.10.26/lib/node_modules/bower/lib/commands/index.js:40:20
at _rejected (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:797:24)
at /Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:823:30
at Promise.when (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:1035:31)
at Promise.promise.promiseDispatch (/Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:741:41)
at /Users/user/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:557:44
System info:
Bower version: 1.3.7
Node version: 0.10.26
OS: Darwin 13.1.0 x64
I include switchery.js before initialization ngSwtchery and switchery not plugged into window why?
switcher = new $window.Switchery(elem[0], options); //undefined is not a function
Hi,
This simply builds upon the commit by BornKiller to have a function name and to use a timeout.
-=david=-
My web app has tons of controller and JS stuff included. So checkbox always show false state. But when I give delay for initialization it works well.
function initializeSwitch() {
$timeout(function() {
// Remove any old switcher
if (switcher) {
angular.element(switcher.switcher).remove();
}
// (re)create switcher to reflect latest state of the checkbox element
switcher = new $window.Switchery(elem[0], options);
var element = switcher.element;
element.checked = scope.initValue;
if (attrs.disabled) {
switcher.disable();
}
switcher.setPosition(false);
element.addEventListener('change',function(evt) {
scope.$apply(function() {
ngModel.$setViewValue(element.checked);
})
});
scope.$watch('initValue', function(newValue, oldValue) {
switcher.setPosition(false);
});
}, 200); // <-- changed value 0 to 200
}
When the model of the switch is true, and its initial state is hidden,
e.g.
hidden is originally true, and active is originally true which makes the swtich is "on" and hidden at the first stage, then sets the hidden to false to show the switch, then the circle would appear at the right of its background, like this:
(__)O
Any suggestion?
If I use hg-model
on the checkbox toggling the switch updates the scope variable. Unfortunately the reverse is not the case. If I update the scope variable (and digest the scope) the hidden checkbox gets (un)checked but the switch does not change state.
Why don't you made a bower || npm install of this?
Hello, and thanks for this nice directive!
How would you go about changing the size of the swtich?
Hi,
thanks for sharing this library.
Changing the option size has no effect at all.
`
kind regards
hasc
The input never its checked!!
Hello!
Why not to use the latest version of Switchery? Works well for me.
Hi,
Could you tag master as v1.0.0-alpha6, so that bower can resolve please?
Thank you kindly! :-)
-=david=-
I have used the switch in angular js like <input type="checkbox" id="is_default" class="js-switch" ng-model="vm.is_default" ui-switch/>
It is updating the value if default value=0 and i change it to 1
It's not updating the model value when default value =1 and i change it to 0(it's not updating the value of vm.is_default)
Not sure if this repo is dead or not. But if i was having an issue where we had Switchery 0.8.2 installed and the ng-disabled parameter doesn't work.
Once i downgraded Switchery to 0.8.1 it works fine.
bower update
will output the following message. Had to manually update to alpha8.
Additional error details:
Available versions in git://github.com/servergrove/NgSwitchery.git: 1.0.0-alpha7, 1.0.0-alpha6, 1.0.0-alpha5, 1.0.0-alpha4, 1.0.0-alpha3, 1.0.0-alpha2, 1.0.0-alpha1, 1.0.0-alpha
In my use case, enabling or disabling the button makes a call to server, so I want to add a confirm window before the state is changed asking the user if he/she really wants to change the state.
So I added a directive:
.directive('ngConfirmClick', [
function(){
return {
priority: 10,
restrict: 'A',
link: function(scope, element, attrs){
element.bind('click', function(e){
var message = attrs.ngConfirmClick;
if(message && !confirm(message)){
e.stopImmediatePropagation();
e.preventDefault();
}
});
}
}
}
])
But this directive doesnt work. It doesnt gets called at all. Can you help me if this can be achieved.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.