I have the following code that attempts to create a dropdown menu using AngularJS, but it doesn't work:
CSS:
.display_none {
display:none;
}
HTML:
<div ng-app="app">
<div dropdown>
<div class="drop_down display_none">
<div id="elementWrap">
// stuff
</div>
</div>
</div>
</div>
AngularJS:
angular.module("app")
.directive("dropdown",function(){
return function(scope,element){
element.bind("click",function(){
if(element.find('.drop_down').hasClass('display_none'))
{
element.find('.drop_down').removeClass('display_none');
element.find("#elementWrap").stop(true,true).delay(100).slideDown(350);
}
else
{
element.find("#elementWrap").stop(true,true).delay(100).slideUp(350,function(){
element.find('.drop_down').addClass('display_none');
});
}
});
};
});
First, you should read through this:
"Thinking in AngularJS" if I have a jQuery background?
Then, you should have a look at this:
http://angular-ui.github.io/bootstrap/
angular-ui provides ui.bootstrap.dropdownToggle. You could either use that or inspect that code and rebuild it's functionality.
Since you are already using a directive, you could use element
in a linking function, rather than search-and-modify it the jQuery (lite) way.
find()-仅限于使用角度jqLite按标签名称进行查找,因此您必须使用jquery插件。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.