Skip to content

Instantly share code, notes, and snippets.

@pklink

pklink/index.html

Created March 25, 2015 15:45
Show Gist options
  • Save pklink/f3799971bfd8366541f6 to your computer and use it in GitHub Desktop.
Save pklink/f3799971bfd8366541f6 to your computer and use it in GitHub Desktop.
Download ZIP
angular directive for semantic-ui's toggle checkbox // source http://jsbin.com/loguku
Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="angular directive for semantic-ui's toggle checkbox ">
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="semantic-ui@*" data-semver="1.11.4" rel="stylesheet" href="http://cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.css" />
<script data-require="semantic-ui@*" data-semver="1.11.4" src="http://cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.js"></script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<my-checkbox checked="checked"></my-checkbox>
<div>
<button type="button" ng-click="onClick()">!checked</button>
</div>
<div>
Is Checked: <span ng-bind="checked"></span>
</div>
<script type="text/ng-template" id="_checkbox.html">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Subscribe to weekly newsletter</label>
</div>
</script>
<script id="jsbin-javascript">
var app;
app = angular.module('myApp', []);
app.directive('myCheckbox', function() {
return {
restrict: 'E',
scope: {
checked: '='
},
templateUrl: '_checkbox.html',
link: function(scope, element, attr) {
var redraw;
element = angular.element(element);
redraw = function() {
if (scope.checked) {
return element.checkbox('check');
} else {
return element.checkbox('uncheck');
}
};
scope.$watch('checked', function(newValue, oldValue) {
if (newValue !== oldValue) {
return redraw();
}
});
element.checkbox({
fireOnInit: false,
onChecked: function() {
return scope.$applyAsync(function() {
return scope.checked = true;
});
},
onUnchecked: function() {
return scope.$applyAsync(function() {
return scope.checked = false;
});
}
});
redraw();
}
};
});
app.controller('myController', function($scope) {
$scope.checked = true;
return $scope.onClick = function() {
return $scope.checked = !$scope.checked;
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="angular directive for semantic-ui's toggle checkbox ">
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"><\/script>
<link data-require="semantic-ui@*" data-semver="1.11.4" rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.css" />
<script data-require="semantic-ui@*" data-semver="1.11.4" src="//cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.js"><\/script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"><\/script>
<script src="script.js"><\/script>
</head>
<body ng-controller="myController">
<my-checkbox checked="checked"></my-checkbox>
<div>
<button type="button" ng-click="onClick()">!checked</button>
</div>
<div>
Is Checked: <span ng-bind="checked"></span>
</div>
<script type="text/ng-template" id="_checkbox.html">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Subscribe to weekly newsletter</label>
</div>
<\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">app = angular.module('myApp', [])
app.directive('myCheckbox', ->
{
restrict: 'E'
scope:
checked: '='
templateUrl: '_checkbox.html'
link: (scope, element, attr) ->
element = angular.element(element)
redraw = ->
if scope.checked
element.checkbox('check')
else
element.checkbox('uncheck')
scope.$watch('checked', (newValue, oldValue) ->
if newValue != oldValue then redraw()
)
# init checkbox
element.checkbox(
fireOnInit: false
onChecked: -> scope.$applyAsync(-> scope.checked = true)
onUnchecked: -> scope.$applyAsync(-> scope.checked = false)
)
redraw()
return
}
)
app.controller('myController', ($scope) ->
$scope.checked = true
$scope.onClick = ->
$scope.checked = !$scope.checked
)</script></body>
</html>
Raw
jsbin.loguku.js
var app;
app = angular.module('myApp', []);
app.directive('myCheckbox', function() {
return {
restrict: 'E',
scope: {
checked: '='
},
templateUrl: '_checkbox.html',
link: function(scope, element, attr) {
var redraw;
element = angular.element(element);
redraw = function() {
if (scope.checked) {
return element.checkbox('check');
} else {
return element.checkbox('uncheck');
}
};
scope.$watch('checked', function(newValue, oldValue) {
if (newValue !== oldValue) {
return redraw();
}
});
element.checkbox({
fireOnInit: false,
onChecked: function() {
return scope.$applyAsync(function() {
return scope.checked = true;
});
},
onUnchecked: function() {
return scope.$applyAsync(function() {
return scope.checked = false;
});
}
});
redraw();
}
};
});
app.controller('myController', function($scope) {
$scope.checked = true;
return $scope.onClick = function() {
return $scope.checked = !$scope.checked;
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment