javascript 如何在 AngularJS 中获取 Html 元素属性?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31461537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:51:16  来源:igfitidea点击:

How to Get Html Element Attributes in AngularJS?

javascripthtmlangularjs

提问by VSO

Edit: Everyone went on all kinds of tangents, but the question remains - how do I get an attribute of an html element inside an angular controller?

编辑:每个人都进行了各种切线,但问题仍然存在 - 如何在角度控制器中获取 html 元素的属性?

Here is a plnkr attempt: http://plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview

这是一个 plnkr 尝试:http://plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview

    //$scope.myElem = angular.element('testDiv'); //this breaks angular
    $scope.myElem = $document.find('testDiv'); //this doesn't break angular, but unclear what it returns
    $scope.myAttr = $scope.myElem.name; //this returns nothing

If you need convincing that this is actually necessary - I need to find when a user scrolls through a div, as is shown here: http://jsfiddle.net/rs3prkfm/Note that this has nothing to do with the question, simply a scenario. The question is simple - how do I get an attribute's value?

如果您需要说服这实际上是必要的 - 我需要找到用户何时滚动 div,如下所示:http: //jsfiddle.net/rs3prkfm/请注意,这与问题无关,只是一个设想。问题很简单——我如何获得一个属性的值?

References:
Useless official docs: https://docs.angularjs.org/api/ng/function/angular.element
The only useful link that still doesn't work: http://mlen.io/angular-js/get-element-by-id.html

参考:
无用的官方文档:https: //docs.angularjs.org/api/ng/function/angular.element
唯一仍然不起作用的有用链接:http: //mlen.io/angular-js/get- element-by-id.html

回答by Juan Marcos Armella

You should manipulate the DOM using directives. The controller should only manipulate the data of the application and offer it to the html.

您应该使用指令操作 DOM。控制器应该只操作应用程序的数据并将其提供给 html。

If you have direct manipulation on the Controller you can't, for example, bind several views to the controller. Also, if you change the id of one tag in the html and you are manipuling it directly in you controller, the controller will break.

例如,如果您对控制器进行直接操作,则不能将多个视图绑定到控制器。此外,如果您更改 html 中一个标签的 id 并且您直接在控制器中操作它,则控制器将损坏。

Read this:

读这个:

http://ng-learn.org/2014/01/Dom-Manipulations/

http://ng-learn.org/2014/01/Dom-Manipulations/

Hope it helps.

希望能帮助到你。

回答by Julia Will

You could use the element api https://docs.angularjs.org/api/ng/function/angular.element

您可以使用元素 api https://docs.angularjs.org/api/ng/function/angular.element

There should be only very few occasions where you would really need it, though.

不过,应该只有极少数情况下您真正需要它。

回答by Cyberdelphos

Use angular.element:

使用 angular.element:

var myElem = angular.element("#testDiv"); // here you get your div
var myAttr = myElem.attr("name"); // you get: "testDiv"

Remember you have limitations using jqlite. If you want full functionallity of jquery element, import a full "jquery.js" before importing your angular script.

请记住,您在使用 jqlite 时有一些限制。如果您想要 jquery 元素的完整功能,请在导入 angular 脚本之前导入完整的“jquery.js”。

However, to manipulate the DOM you SHOULD use directives as stated by most of the answers.

但是,要操作 DOM,您应该使用大多数答案所述的指令。