jquery - ng-style 失败，而 jQuery.css 工作正常

Question

我有这个 div:
<div id="outlineCSS" ng-style="elementOutlineStyle"></div>
我有一个 <ul>许多<li>当我悬停其中一个时， ng-mouseover我触发了一个控制 elementOutlineStyle 的函数，如下:

$scope.elementOutlineStyle = angular.extend({
            'pointer-events': 'none',
            'position': 'absolute',
            'box-shadow': 'rgba(255, 0, 0, 1) 0px 0px 10px 0px',
            'display': 'block'
          }, {
            'height': data.height,
            'width': data.width,
            'left': outlineLeftPos,
            'top': outlineTopPos
          });

但是此代码适用于延迟!让我解释一下:假设我悬停在<li> #1，没有任何反应，如果我悬停在<li> #2，然后应用#1 数据的样式。

但是，如果我用这个替换 Angular 代码:

         $("#outlineCSS").css({
              'pointer-events': 'none',
            'position': 'absolute',
            'box-shadow': 'rgba(255, 0, 0, 1) 0px 0px 10px 0px',
            'display': 'block',
              'height': data.height,
            'width': data.width,
            'left': outlineLeftPos,
            'top': outlineTopPos
          }
         );

然后它按预期工作......为什么 Angular 滞后于这个？？

Answer 1

样式更改必须包装在 $scope.$apply 中。