无法使用angular设置元素的css属性

Question

我在dom中有一个元素，我在这样的指令中得到了

angular.element.find('#id-campaign-menu')

一切顺利，直到我尝试将一些新的CSS应用到它上面

var el = angular.element.find('#id-campaign-menu');
el.css({left: 400});

我得到了

Uncaught TypeError: el.css is not a function(…)

Answer 1

Angular jQLite对象不会通过自定义element和自定义selector进行查找。它只会查找nodes / DOM，例如button，input，div等。

如果您在Angular之前加载了jQuery，那么jQLite API会被jQuery API覆盖。所以你可以在DOM上做基于选择器的查询。

您可以将查询更改为以下内容，以使其与jQLite一起使用。

var campaignMenu = angular.element(document.getElementById('id-campaign-menu');
campaignMenu.css({left: 400});

Answer 2

此处the list of functions supported by Angular's jqLite。

请注意.css()：

  

css() - 仅检索内联样式，不会调用getComputedStyle()。作为一个setter，不会将数字转换为字符串或附加＆＃39; px＆＃39;，也没有自动属性前缀。

所以支持改变DOM的.css()调用，在Angular之前导入jQuery，或者使用像document.getElementById这样的vanilla JS文档选择器。