Javascript AngularJS指令和链接函数

有人能解释一下为什么当我试图使用这段代码将自定义指令的背景颜色更改为红色时，它不起作用

app.directive('isolateDir', [function(){

    return {
        restrict: 'E',
        templateUrl: 'template.html',
        scope: { stockData: "="},
        link: function(scope, element, attr){
            scope.changeColour = function(){
                element[0].style.backgroundColor = 'red';
            };
        }
    }
}]);

然而，当我使用这一块它

app.directive('isolateDir', [function(){

    return {
        restrict: 'E',
        templateUrl: 'template.html',
        scope: { stockData: "="},
        link: function(scope, element, attr){
            scope.changeColour = function(){
                element.style.backgroundColor = 'red';
            };
        }
    }
}]);

---

我认为link函数中的element参数引用了该指令的实例。

因为element是该指令匹配的jqLite包装的元素。DOM元素本身就是元素[0]

您可以在此处找到更多信息：

---

角度返回jQlite对象。因此，像

jQuery

，要选择当前html元素，需要使用

元素[0]

---

请参考此项。

上述代码将与

element[0].style.backgroundColor = 'red';

---

指令中的元素是jqLite包装的指令元素，为了更改样式，可以使用jqLite函数。如果没有，我们可以从jqlite对象中的元素数组中以“元素[0]”的形式进行查询，在该数组中，我们获得了核心dom对象，以设置我们如上所述的样式。

确定没有反向使用这些元素吗<代码>元素< /代码>是<代码>角元素>代码>对象（jjQuery，如果jQuery .js包含）不是DOM元素。不确定你的最终目标是什么，但是如果你想改变样式，我会考虑使用<代码> NG类< /C> >和<代码> CSS 来切换样式。

element[0].style.backgroundColor = 'red';