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

Question

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

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

然而，当我尝试这个时，我收到的错误是：

TypeError: object is not a function

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

谢谢！

Answer 1

您正在尝试将$ element用作函数。

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

或一行：

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

Answer 2

你不需要JQuery来做你想做的事，AngularJS有 jqlite 。正如 AngularJS Developer's Guide for directives ：

中所述

  

元素是此指令匹配的 jqLit​​e - 包装元素。

因此，它应该能够执行jQuery所具有的大多数功能，如 angular.element() documentation 中所定义。

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

<强> DEMO

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

Answer 3

我想对Brian的答案补充一点。

$元件。根据jquery是否可用而有不同的功能，因为它是一个jquery选择器。如果jquery可用，它将表示一个jquery元素，如果不是，它将使用内置于angular的jqlite。

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

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

或

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

这对我来说不合适。 Brians的答案可以简洁地转换为jquery，你的不可以。