将jQuery代码转换为Angular

Converting jQuery code into Angular

本文关键字:Angular 转换 代码 jQuery      更新时间:2023-09-26

我有一个页面有很多jQuery DOM操作代码,我需要将它们全部转换为Angular。大多数jQuery代码都是关于调整元素的大小以及设置类和css属性的。我有点不知所措,需要有关如何继续将该jQuery转换为Angular代码的建议。重要提示:jQuery 根本不处理业务逻辑。

以下是我需要转换的jQuery代码的示例:

var globals = {};
function init()
{
    globals.topNavHeight = $('.x').height() + $('.y').height();
}
function adjustSomeStuff()
{
    $('.topNav').css('height', globals.topNavHeight);
    $('.bottomFooter').css('someRandomProperty', $('#someHelperDomElem').css('height'));
    $('.anyOtherRandomElementOnPage').css('color', '#012345');
    globals.savedData = 1000;
}
$(window).bind('resize', adjustSomeStuff);
$(window).bind('load', init);

我的问题是我知道我需要以某种方式将这些函数转换为指令,但它们只是使用来自整个页面的绝对随机元素来执行不同的计算和内容。我应该扔掉这段代码并从头开始编写指令,还是可以以某种方式利用现有的jQuery代码?

根据

窗口大小调整主页项目大小的特定代码块,我认为可以保留在jquery中。例如,在 Angular 中,您可以根据不同的数据属性定义 CSS 类(通过 ng-class),但它看起来不像您正在做的事情。

但是,您在那里的颜色更改应该转到 css 类,并且您应该根据应用程序流在运行时切换 css 类。 就像我之前写的那样,可以通过ng-class在Angular中完成(例如ng-class="{'warning':(issuesFound> 5),"valid":(issuesFound == 0).....