Hi,
i wrap a dropdown to angular directive. The directive control can not receive click event and pull the list down. This may be a bug.
My code is down below, "domain-selection" directive is compared with a raw dropdown version.
Anyone can help me?
demo-dropdown.html ====>
<html>
<head>
<title>demo dropdown</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/lib/semantic-ui/dist/semantic.css"/>
<script src="js/lib/jquery/jquery.js"></script>
<script src="js/lib/angular/angular.js"></script>
<script src="js/lib/semantic-ui/dist/semantic.js"></script>
<script>
$(document).ready(function () {
//angular.bootstrap(document.body, ["demo"]);
$(".ui.dropdown").dropdown();
});
angular.module("demo", [])
.directive("domainSelection", function () {
return {
restrict: "ACE",
replace: true,
templateUrl: "dropdown.html"
};
});
</script>
</head>
<body ng-app="demo">
<div class="domain-selection"></div>
<div class="ui selection dropdown">
<div class="text">select from dropdown</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="1">1</div>
<div class="item" data-value="2">2</div>
<div class="item" data-value="3">3</div>
</div>
</div>
</body>
</html>
<div class="ui selection dropdown">
<div class="text">select from dropdown</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="1">1</div>
<div class="item" data-value="2">2</div>
<div class="item" data-value="3">3</div>
</div>
</div>
Thanks
Greenxiar