鼠標懸停時如何在重復中更新元素的樣式

Question

我正在嘗試在ng-mouseover上的ng-repeat中更新元素的ng-style。 我嘗試了一些想法，但似乎無法弄清楚。 這是我的代碼背后的基本思想：

視圖：

<div ng-repeat="data in days | orderBy:'timestamp'"
     ng-style="seriesStyle(data)"
     ng-mouseover="examineSeries(data)"></div>

控制器：

$scope.examineSeries = function (data) {

    $scope.frame = data; // used for other things

    // want to update the width of the mouseover'd element's seriesStyle
    // here to something higher than 1%

}

$scope.seriesStyle = function (data) {

    return {
        'background-color': data.color,
        'width': '1%'
    }

}

請注意，由於其他依賴性，我無法僅在每個元素上放置一個類並使用：hover。

Answer 1

我認為處理此問題的正確方法是創建一條指令，該指令將檢查鼠標懸停時的數據並在需要時更新樣式。 看看這個jsfiddle展示了如何做到這一點

HTML：

<div ng-app="myapp">
  <div ng-controller="AppCtrl as ctrl">
    <div ng-repeat="day in ctrl.days" ng-style="ctrl.seriesStyle(day)" update-on-mouse-over>{{day}}</div>
  </div>
</div>

Javascript：

var myapp = angular.module('myapp', []);

myapp.controller('AppCtrl', function () {

  this.days = [
    {name:'Sun', color:'red'},
    {name:'Mon', color:'blue'},
    {name:'Tue', color:'orange'}
  ];

  this.seriesStyle = function (day) {
    return {
      'background-color': day.color
    };
  };

});

myapp.directive('updateOnMouseOver', function() {

return {
    link: function(scope, element, attrs) {
        element.on('mouseover', function() {
            element.css('background-color', 'green');
        });
    }
  };
});