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

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" >