在AngularJS中更改多個元素的類

我有一個我正在Apache Cordova和AngularJS中編寫的謎題應用程序。拼圖由一個網格組成，每個網格廣場有多個「燈光」。在AngularJS中更改多個元素的類

當鼠標懸停燈一個，某些區域會亮起。我在標準的jQuery中工作得很好，並且綁定了類的mouseover事件，但是我正努力讓它在AngularJS中工作。我可以在項目中包含完整的jQuery - 但感覺就像是作弊。

到目前爲止，我有以下指令： -

app.directive('etkHighlight', function() { 
    return { 
     link: function (scope, element, attr) { 
      element.on("mouseenter", function() { 
       var id = attr.cage; 
       var el = angular.element(document).find(id); 
       el.addClass("etk-light-on"); 
       console.log("enter") 
      }) 
      element.on("mouseleave", function() { 
       var id = attr.cage; 
       console.log("enter") 
      }) 
     } 
    } 
});

與HTML看起來像： -

<div class="box"> 
    <div class="etk-key" id="cage-t">T</div> 
    <div class="etk-light etk-base-left etk-light-off" data-cage="cage-k" etk-Highlight>k</div> 
    <div class="etk-light etk-base-right etk-light-off" data-cage="cage-m" etk-Highlight>m</div> 
</div>

我得到我需要改變類確定對象的ID，並el是填充東西，但addClass未能真正添加類。

我在做什麼錯？這是否是正確的方法來解決這個問題？理想情況下，我希望我可以用來管理所有燈光的鼠標懸停的類更改。

Plnkr： - http://plnkr.co/edit/JjwucC3HECN9Mmm4S3Ib NB僅標記的1-燈，頂部排鉀& m的設置爲使用我已經意識到我沒有定義的問題非常清楚的指令

UPDATE。例如，當我將鼠標懸停在標記爲'l'的燈上時，我想要更改該燈的類別以及發現的右側和下方的'L'正方形...。

來源

2016-04-12 grimorde

你可以添加一個演示？ – RRK

添加類元素？你不能使用ng-class =「{'class'：result/expresion}」，比如ng-class =「{'green'：item = 1}」 – MrNew

這會工作，我用enter和htmlleave通過class名附加到，並在directive的link功能檢索它們爲attrs.enter & attrs.leave

*.html文件： -

<body ng-app='app'> 
    <div etk-highlight enter='red' leave='black'>test</div> 
</body>

*.js file： -

var app = angular.module('app', []) 
.directive('etkHighlight', function() { 

return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     element.on("mouseenter", function() { 
      element.removeClass(attrs.leave); 
      element.addClass(attrs.enter); 
     }); 
     element.on("mouseleave", function() { 
      element.removeClass(attrs.enter); 
      element.addClass(attrs.leave); 
     }); 
    } 
} 
});

*.css文件： -

.red { 
    color:red; 
} 

.black { 
    color:black; 
}

來源

2016-04-12 10:45:24 manish

這真的很接近！但這讓我意識到我沒有很好地解釋整個要求。請參閱更新： -/ – grimorde

您的回答指出我正確的方向 - 我只需要修改如何找到鏈接元素element.on（「mouseenter」，function（）{element.removeClass（attrs.leave） ; element.addClass（attrs.enter）; 變種ID = attrs.cage; 變種EL = angular.element（document.querySelector（ '＃' + ID））; el.removeClass（attrs.leave）; el.addClass（attrs.enter）; }）;' – grimorde

要改變角度你應該是自帶的角度捆綁納克級的指令看看：

Angular ng-class

總之你添加類代碼將被刪除，你會用多變的款式角的方式。例如

然後在您的代碼集高亮變量爲真/假取決於點擊。看看這個文檔的例子，並相應地調整它。

來源

2016-04-12 07:43:23 PeterS

我看過那個，但除非我誤解我認爲我需要爲每個元素添加一個特定的類，即'

'，並將ng-mouseover添加到所有燈光。這對我來說太過於誇張，因爲我可以在jQuery中做的事情爲 '$（'。etk-light'）。mouseenter（function（）{ var cageId = $（this）.data（「cage」）; $（'＃'+ cageId）.addClass（「etk-light-on」）; $（this）.removeClass（「etk-light-off」）; $（this）.addClass（「etk-light- 「）; }）;' – grimorde

我仍然喜歡調用一個函數，如下所示：[other answer]（http://stackoverflow.com/questions/28208165/passing-function-with-parameters-in- ng-class-to-get-the-class）你可以用你的div的id來調用getClass。這是做事的角度，所以值得一看。 – PeterS

我在你的筆上工作的東西是不正確的代碼我不得不去更多的it.also取代你的指令與其他，但仍然沒有working.you可以去ng班，ng-mouseenter或ng-也可以使用ng-style或將函數傳遞給style屬性。

directives.directive('showonhoverparent', 
    function() { 
     return { 
     link : function(scope, element, attrs) { 
      element.parent().bind('mouseenter', function() { 
       element.show(); 
      }); 
      element.parent().bind('mouseleave', function() { 
       element.hide(); 
      }); 
     } 
    }; 
});

希望對你有用，我會更深入地研究你的代碼以找到確切的問題。

來源

2016-04-12 08:08:53

在AngularJS中更改多個元素的類

回答

相關問題