Question

我是Angular的新手，正在重写一个使用Angular的应用程序。我有一些我需要在我的应用程序中使用的自定义JS脚本，并且我已经读过在指令之外不应该存在任何DOM操作。但我对如何在指令中实际使用此脚本感到困惑。

该指令应根据百分比填充一个条形。

这是我需要在angular指令中包装的脚本：

jQuery(document).ready(function($) {

$('.level-bar-inner').css('width', '0');

$(window).on('load', function() {
    $('.level-bar-inner').each(function() {    
        var itemWidth = $(this).data('level');

        $(this).animate({
            width: itemWidth
        }, 800);           
    });
});

这就是我目前试图将其实现到我的指令中的方式：

dcx.directive("dataPercent", [function(){
    return{
        link: function(scope, el, atts){
            atts.css('width', '0');

        $(window).on('load', function() {
            el.each(function() {
                var itemWidth = $(this).data('level');
                el.animate({
                    width: itemWidth
                }, 800);
            });
        });
    }
}
}]);

我是如何在HTML元素中调用它的：

<div class="level-bar-inner" data-percent="50%">

它不起作用，我知道这将是因为我没有在我的指令中正确实现它，但我真的不知道我做错了什么。

我已经阅读了角度文档，但仍然没有得到它

Answer 1

试试这个 -

SELECT 
    name,
    AVG(TIMESTAMPDIFF(HOUR, startdate, enddate)) avg_stay_hour
FROM 
    staybase
GROUP BY 
    name

内部html -

dcx.directive("dataPercent", [function(){
    return{
           restrict: 'A',
           scope: {
                itemWidth: "=",
            },
           link: function(scope, el, atts){
                el.css('width', '0');
                var render = function () {
                    animateWidth(el,scope);

                };
                render ();
                scope.$watch("itemWidth", render,true);

         }
     }

    function animateWidth(element,scope)
    {
             $(element).animate({
                    width: scope.itemWidth
                }, 800);
     }

}]);

我希望，这可能对你有帮助。

Answer 2

到目前为止，您已正确理解Angular，并且需要填补较小的空白。

每当Angular找到一个指令时，都会执行指令代码。因此，您不需要通过JQuery查找所有指令元素，并在单个指令中更改它们。

  dcx.directive("dataPercent", [function($timeout){
    return{
       link: function(scope, el, atts){

              //Use timeout to make sure the code executes after DOM is loaded
              $timeout(function() {
                  el.css('width', '0');    

                  var itemWidth = el.data('level');

                  //We use JQuery here for animations
                  $(el).animate({
                      width: itemWidth
                  }, 800);
              }); 
         }
     }
}]);

上面的指令适用于引用的每个DOM标记

<div class="level-bar-inner" data-percent data-level="50%">

你应该注意到一些事情。

我们使用$timeout来确保您的函数仅在加载DOM时执行
el是JQLite，并且它没有动画功能。所以我在这里使用Jquery。但是你可以用Angular animations来做。

AngularJS：如何在指令中使用JS脚本

2 个答案: