gpt4 book ai didi

AngularJS 的 jQuery 代码包含 ngclick 和多个用于 css 动画的 ngclass

转载 作者:行者123 更新时间:2023-11-28 17:05:47 25 4
gpt4 key购买 nike

我正在尝试转换以下 jQuery 脚本:

<script type="text/javascript">
$(document).ready(function() {
$(".openNav").click(function() {
$("body").toggleClass("navOpen");
$("nav").toggleClass("open");
$(".wrapper").toggleClass("open");
$(this).toggleClass("open");
});
});
</script>

进入 AngularJS 代码,这是我目前所拥有的:

http://plnkr.co/edit/LBlKL26c3PP5nBUGWTtQ?p=preview

我几乎无法让它工作,它是一个粗糙的动画,但我不确定下一步需要做什么。

这是用 jQuery 编写的原始示例:http://codepen.io/Lewitje/pen/tyGdf

如有任何见解,我将不胜感激。

编辑:

可以添加此切换器以使其工作吗??

app.controller('test', ['$scope', '$timeout', '$mdUtil',      
'$log', function($scope, $timeout, $mdUtil, $log)
{$scope.toggle= buildToggler('toggle');

function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$log.debug("toggle " + navID + " is done");
});
},300);

return debounceFn;
}}]);

我的想法已经用完了,所以也许我会添加只保留 jQuery,但我觉得这违背了 AngularJS 的目的

最佳答案

你几乎在那里。 ng-switch 的类被应用到错误的元素。

$(".openNav").click(function() {
$("body").toggleClass("navOpen");
$("nav").toggleClass("open");
$(".wrapper").toggleClass("open");
$(this).toggleClass("open");
});

这是将 open 类应用到 body、nav、.wrapper 和被点击的内容。

  <body ng-app="myApp" ng-controller="test" ng-class="{'navOpen':toggle, 'icon':toggle, 'wrapper': toggle}" ng-click="toggle=!toggle">

而您示例中的 ng-class 将所有类应用到 body 标签。

http://plnkr.co/edit/03cO8o3EYsDt9y0JHQgK?p=preview

关于AngularJS 的 jQuery 代码包含 ngclick 和多个用于 css 动画的 ngclass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30386473/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com