带有“;E”;,无法添加Class

Angular directive with "E", cannot addClass

本文关键字:添加 Class 带有      更新时间:2023-09-26

最近在学习angularjs时,我有一个关于指令的问题。当我创建一个"E",然后尝试在上面添加一个类调用"panel"(只将背景色设置为红色)时,它不起作用,但当我创建"a"时,它确实起作用。有人知道为什么会这样吗?

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'world';
});
app.directive("pop", function() {
  return {
    restrict: 'E',
    template: '<div button>' +
      'popup window, hello' +
      '</div>',
    link: function(scope, element, attrs) {
      test(element);
    }
  }
});

app.directive("button", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
     // test(element);
    }
  }
})
function test(element) {
  element.bind("mouseenter", function() {
    element.addClass("panel");
  });
}

http://plnkr.co/edit/9cLRYIaHH4Rl4bO5GAOp?p=preview

如果将position:absolute;添加到.panel的css中,它将按预期工作,请参见下面的plunkr。这里的问题是自定义标记元素的默认样式,而不是与angular有关的任何东西。

参见http://plnkr.co/edit/CEyCzfNu1gWQAe0q8VbP?p=preview