Skip to content

Instantly share code, notes, and snippets.

@dphaener

dphaener/jqueryui.html

Created October 30, 2013 02:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dphaener/7226377 to your computer and use it in GitHub Desktop.
Save dphaener/7226377 to your computer and use it in GitHub Desktop.
Download ZIP
Jquery show and hide wrapped in Angular
Raw
jqueryui.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<title></title>
</head>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", function ($scope) {
$scope.showorhide = true;
$scope.effect = "slide";
$scope.duration = "1000";
})
.directive("mydirective", function () {
return {
link: function(scope, element, attributes) {
element.find("button").click(function() {
if (scope.showorhide === true) {
element.find("p").hide(scope.effect, scope.duration);
scope.showorhide = !scope.showorhide;
} else {
element.find("p").show(scope.effect, scope.duration);
scope.showorhide = !scope.showorhide;
}
})
}
}
})
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl" mydirective>
<p>This will be shown or hidden</p>
<button id="clickable" ng-model="toggled">Click me</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment