Question

有人可以解释为什么当我尝试使用这段代码将自定义指令的背景颜色更改为红色时，它无效。

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参数引用了该指令的实例。

Answer 1

因为element是此指令匹配的jqLite包装元素。它自己的DOM元素是元素[0]。

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

https://docs.angularjs.org/guide/directive

Take a look at this plunker that output in console the wrapped element and the DOM element:

http://plnkr.co/edit/Kcu7nHVzacbsSDiXSt6U?p=preview

Answer 2

Angular返回一个jQlite对象。因此，与jQuery一样，要选择当前的html元素，您需要使用element[0]。

请参阅此article。

Answer 3

上面的代码将与

一起使用

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

这里的

元素指令是一个jqLite包装的指令元素，为了改变你可以使用jqLite函数的样式。如果不是，我们可以从jqlite对象中的元素数组中查询＆＃39;元素[0]＆＃39;，其中我们得到核心dom对象来设置我们上面所做的样式。

AngularJS指令和链接函数

3 个答案: