是否有可能angularJS编译后加载自定义指令？ [英] Is it possible to load a custom directive after angularJS is compiled?

问题描述

我有这样的指令来计算的div的高度。

  //指令登录的高度。我们必须添加一些价值到最终的高度，因为CSS样式将是不确定的。
rootApp.directive（'logHeightCategories'，['$超时'，函数（$超时）{
    返回{
        限制：'A'，
        链接：功能（范围，元素）{
            范围prepMaxHeightCat = element.prop（'的offsetHeight'）;
            scope.value = 0;
            $超时（函数（）{
                scope.maxHeightCat = scope.value +范围prepMaxHeightCat。
            }，0）;
        }
    };
}]）;
 

的CSS规则最大高度：{{maxHeightCat}} PX 适用于该div动画的目的。
尽管如此，闪烁效果摧毁欲望的目标。所以，我已经添加了 NG-斗篷到显示：无对于该div

我觉得 NG-斗篷呈现为最后的，所以我觉得我的指令 logHeightCategories 之前执行。所以，我总是 0像素的结果。

的 ...即使我已在我希望能够克服执行时间 $超时的功能，但我认为这不是这种情况。

解决方案

您可以尝试

\r

\r

rootApp.directive（'logHeightCategories'，['$超时'，'$编译'，\r
  功能（$超时，$编译）{\r
    返回{\r
      限制：'A'，\r
      链接：功能（范围，元素，ATTRS）{\r
        范围prepMaxHeightCat = element.prop（'的offsetHeight'）;\r
        scope.value = 0;\r
        scope.maxHeightCat = scope.value +范围prepMaxHeightCat。\r
        范围。$腕表（attrs.logHeightCategories，功能（HTML）{\r
          element.html（HTML）;\r
          $编译（element.contents（））（范围）;\r
        }）;\r
      }\r
    };\r
  }\r
]）;

\r

\r

\r

I have this directive to calculate the height of a divs.

// Directive to log a height. We have to add on some value to a final height, because css style will be undefined.
rootApp.directive('logHeightCategories', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.prepMaxHeightCat = element.prop('offsetHeight');
            scope.value = 0;
            $timeout(function() {
                scope.maxHeightCat = scope.value + scope.prepMaxHeightCat;
            }, 0);
        }
    };
}]);

The css rule max-height: {{maxHeightCat}}px is applied to that div for animation purpose. Nevertheless, a flicker effect destroy that desire goal. So I've added ng-cloak to display:none for that div.

I think ng-cloak is rendered as last, therefore I think my directive logHeightCategories is executed before. So I always get 0px result.

...even I've added a $timeout function in hope I would overcome execution time, but I think it's not the case.

解决方案

You can try

rootApp.directive('logHeightCategories', ['$timeout', '$compile',
  function($timeout,$compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.prepMaxHeightCat = element.prop('offsetHeight');
        scope.value = 0;
        scope.maxHeightCat = scope.value + scope.prepMaxHeightCat;      
        scope.$watch(attrs.logHeightCategories, function(html) {
          element.html(html);
          $compile(element.contents())(scope);
        });
      }
    };
  }
]);

这篇关于是否有可能angularJS编译后加载自定义指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！