Basically what I want to do is, on clicking the "tab," I want some content to slide up, and upon clicking on an element inside of that content, I want it to call a function. At the moment, the function for each element is called when it's clicked any other time except when the content is in transition.
Here is the plunkr to play with: http://plnkr.co/edit/4ztGPH?p=info
HTML:
<!DOCTYPE html>
<html ng-app="Test">
<head>
<script data-require="[email protected]" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<section style="margin-top:500px;" tabindex="1" class="margin-center hover slideList">Open List</section>
<div class="slide slideList">
<h1 ng-repeat="item in dict" ng-click="testFunc()">{{item}}</h1>
</div>
</body>
</html>
CSS:
.slideList
{
width: 100%;
padding: 5px;
height: 30px;
background: #D44B6D;
color: #eee;
position: relative;
}
.margin-center{
margin-left: auto;
margin-right: auto;
}
.hover
{
border-radius: 10px;
width: 100px;
cursor: pointer;
position: relative;
}
.hover:focus
{
outline: none;
}
.slide
{
position: relative;
top: 0;
height: 800px;
z-index: 9999;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:focus + .slide
{
z-index: 9999;
top: -800px;
-webkit-transition: top 1s;
}
JS:
angular.module('Test', [])
.controller('Ctrl', ['$scope',
function Ctrl($scope) {
$scope.dict = [
"aa",
"aah",
"aahed",
"aahing",
"aahs",
"aal",
"aalii",
"aaliis",
"aals",
"aardvark",
"aardwolf",
"aargh",
"aarrgh",
"aarrghh",
"aas"
];
$scope.testFunc = function(){
alert('Hello World!');
};
}]);
