我应该如何在角度指令中绑定到元素的样式？

Question

我想在指令中绑定到绝对定位元素的top样式。这可能吗?

这是我想做的在组成的代码:

angular.module('exampleModule').directive('resize', [function () {
    return {
      link: function(scope, iElement, iAttrs) {
        var top = 14;
        // There is no styleChange event
        iElement.bind('styleChange', styleChangeHandler);
        function styleChangeHandler(event) {
          if(event.style == 'top' && event.value != top) {
            scope.$apply(function(scope){
              scope[iAttrs.topChanged](event.value);
             });
          }
        }
      }
    }
}]);

Answer 1

没有样式更改事件。如果您可以控制样式更改，则可以创建自定义事件并手动触发此事件。或者你可以创建一个手表函数，像这样:

link: function(scope, iElement, iAttrs) {
  //...
  scope.$watch(function(){
    return iElement.css('top');
  },styleChangeFn,true);
  function styleChangeFn(value,old){
    if(value !== old)
      scope[iAttrs.topChanged](value);
  }
}

Answer 2

所以这是我想到的(很大程度上得益于joakimbl的回答)。它可以用于观看任何风格

指令:

angular.module('unwalked.directives').directive('watchStyle', [function () {
  return {
    link: function(scope, iElement, iAttrs) {
      scope.$watch(function(){
        return iElement.css(iAttrs['watchedStyle']);
      },
      styleChanged,
      true);
      function styleChanged(newValue, oldValue) {
        if(newValue !== oldValue) {
          scope[iAttrs['watchStyle']](newValue);
        }
      }
    }
  };
}]);

用法(注意:回调函数中没有括号——它只是函数名):

<div watch-style="functionOnController" watched-style="height" >