在AngularJS中设置运行时HTML元素的宽度

Set Width of HTML element at runtime in AngularJS

本文关键字：元素 HTML 运行时 AngularJS 设置      更新时间：2023-09-26

我需要在运行时从AngularJS中的控制器设置HTML元素的宽度。我的控制器是在我的指令中定义的。我知道我需要设置指令中第一个ul元素的宽度。目前，我有以下几种：

var list = $element.find('ul');
$element(list[0]).css('width', '300px'));

然而，当我尝试这个时，我得到一个错误，上面写着：

TypeError: object is not a function

我做错了什么？如何在AngularJS中的运行时设置HTML元素的宽度？

谢谢！

您不需要JQuery来做您想做的事情，AngularJS有jqlite。如AngularJS开发者指南中所述:

元素是此指令匹配的jqLite封装元素。

因此，正如angular.element()文档中所定义的那样，它应该能够实现jQuery能够实现的大多数功能。

文档未能定义的是，用于查找元素的jqlite版本返回一个HTML元素数组。因此，您必须对要使用jqlite功能在该数组中操作的每个元素使用angular.element()。所以代码通常应该是这样的：

演示

   var list = elem.find('ul');
   angular.element(list[0]).css('width', '300px');

您正试图像使用函数一样使用$element。

var list = $element.find('ul');
list[0].css('width', '300px');

或者在一行中：

$element.find('ul')[0].css('width', '300px');

我想为Brian的回答添加一点内容。

$元素。函数的不同取决于jquery是否可用，因为它是一个jquery选择器。如果jquery可用，它将表示一个jquery元素，如果不可用，则使用angular中内置的jqlite。

也就是说，我认为你在jquery中的实现相当于：

var list = $('ul')
$(list[0]).css('width','300px');

或

$($('ul')[0]).css

这在我看来不太正确。Brians的答案可以简洁地转换为jquery，而你的答案不能。

相关文章：