在AngularJS中設置運行時HTML元素的寬度

我需要在運行時從AngularJS中的控制器設置HTML元素的寬度。我的控制器在我的指令中定義。我知道我需要設置指令中第一個元素的寬度。目前，我有以下幾點：在AngularJS中設置運行時HTML元素的寬度

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

然而，當我嘗試，我得到一個錯誤，指出：

TypeError: object is not a function

我在做什麼錯？如何在AngularJS的運行時設置HTML元素的寬度？

謝謝！

來源

2014-10-08 user70192

修改DOM元素內的控制器是不是一個好主意。如果您需要這樣做，請使用「鏈接」功能。 – jessegavin 2014-10-08 15:08:21

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

element is the jqLite-wrapped element that this directive matches.

因此，它應該能夠做到大部分是jQuery是能夠的特點，如angular.element() documentation定義。

文檔未能定義的是用於查找元素的jqlite版本返回一個HTML元素數組。所以你必須使用angular.element()每個你想操作的數組中使用jqlite功能的元素。因此，代碼通常應該是這樣的：

DEMO

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

來源

2014-10-08 16:33:23 ryeballar

您正試圖使用$元素，就像它的一個函數。

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

或一條線：

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

來源

2014-10-08 15:03:24 Brian

奇怪的是，當我嘗試我得到一個錯誤，說'TypeError：無法讀取未定義的屬性'css'。如果我做一個'console.log（$ element.find（'ul'）[0]）;''我看到'[ready：function，toString：function，eq：function，push：function，sort：function ...'in控制檯窗口。 – user70192 2014-10-08 15:13:39

你需要添加完整的jQuery庫來使用所有的jQuery功能。 – Brian 2014-10-08 15:16:53

我想有點添加到布萊恩的回答。

$ element。取決於jQuery是否可用而具有不同的功能，因爲它是一個jquery選擇器。如果jquery可用，它將代表一個jQuery元素，如果沒有，它將使用內置到angular中的jqlite。

這麼說，我覺得你的jQuery執行相當於是一樣的東西：

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

或

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

這看起來不正確我。布賴恩的答案可以簡潔地轉換爲jquery，你的不能。

來源

2014-10-08 15:12:38

在AngularJS中設置運行時HTML元素的寬度

回答

相關問題