在使用css更改时，在clientWidth上观察不会触发

Question

TL; DR：如果我用css改变DOM元素的大小，它的指令就不会注意到这一点，即使存在大小的监视。

目标

我有几个自定义指令（simple-graph），每个指令都包含svg。我想要鼠标悬停的尺寸增加。尝试：

1）css

simple-graph       {height: 100px;}
simple-graph:hover {height: 200px;}

（这部分有效。）

2）html

<simple-graph ng-repeat="data in datasets" sg-rst="data"></simple-graph>

3）指令

angular.module('myApp').directive('simpleGraph', function () {
  return {
    restrict: 'E',
    scope: {rst: '=sgRst'},
    link: function (scope, el, attrs) {
      //Add an svg element to el[0], do initialisation, etc. (not shown)
      //Also, $watch rst to update graph when data is changed. (not shown)

      //Watch size of simple-graph 
      scope.$watch(function(){
        return el[0].clientWidth + el[0].clientHeight;
      }, updateSize);

      function updateSize() {
        //update size of svg element, using el[0].clientHeight and .clientWidth (not shown).
      }
    }
  };
});

问题/问题

由{c}文件中设置的高度变化引起的simple-graph元素的大小调整，并未被指令中的scope.$watch注意到。 问题：我可以以某种方式强行解雇吗？

当前解决方法

1. 对于简单图元素的属性（在html中），我添加了sg-hover="hover" ng-mouseenter="hover=true" ng-mouseleave="hover=false"，用于切换属性sg-hover的值，
2. 我将此更改汇总到指令中，方法是将其scope属性更改为scope: {rst: '=sgRst', hover: '=sgHover'}到scope，然后
3. 我确保通过添加scope.$watch('hover', updateSize)来注意这种切换。

这很有效，并且表明updateSize函数确实可以正常工作。但它非常复杂，我认为必须有更快的方法。所以，我的问题：我可以以某种方式强制$ watch函数在通过css更改元素客户端大小时触发吗？

谢谢！

Answer 1

当我对这个问题发表评论时，我认为你不能用css达到你想要的效果（至少不是以简单的方式）

您可以将指令更改为此类指令，至少避免重复：

return {
    restrict: 'E',
    scope: {rst: '=sgRst'},
    replace: true,
    template: "<div ng-mouseover='hover=true' ng-mouseout:'hover=false' class='simple-graph' ng-class='{hover: hover}'><svg></svg></div>"
    link: function (scope, el, attrs) {
      //create or find the svg element to el[0], do initialisation, etc. (not shown)
      //Also, $watch rst to update graph when data is changed. (not shown)

      //Watch size of simple-graph 
      scope.$watch('hover', updateSize);

      function updateSize() {
        //update size of svg element, using el[0].clientHeight and .clientWidth (not shown).
      }
    }

然后将你的css改为：

.simple-graph .hover {
  height: 200px
}