脚本从指令添加到dom不发射

我已经创建了一个简单的指令，生成一个svg indeterminate微调。包含在页面中的脚本运行良好。 svg和脚本完美地生成。脚本不会触发。脚本从指令添加到dom不发射

<svg width="64" height="64" viewBox="0 0 64 64"> 
    <g transform="translate(32, 32)"> 
    <circle id="myId" 
     fill="none" 
     stroke="#000000" 
     opacity=".8" 
     stroke-width="5" 
     stroke-linecap="round" 
     stroke-miterlimit="10" 
     cx="0" cy="0" r="29.5" 
     > 
    </circle> 
    </g> 
</svg> 
<script> 
    var line = document.getElementById("myId"); 
    var initialTheta = 0; 
    var thetaDelta = 1; 
    myId.currentTheta = initialTheta; 
    var requestAnimationFrameID = requestAnimationFrame(doCircAnim); 
    function doCircAnim() { 
    myId.setAttribute("transform", "rotate(" + myId.currentTheta + ")"); 
    myId.setAttribute("stroke-dasharray", myId.currentTheta); 
    myId.currentTheta += thetaDelta; 
    if(myId.currentTheta > 180){ myId.currentTheta = 0} 
    requestAnimationFrameID = requestAnimationFrame(doCircAnim); 
    } 
</script>

展示正确的行为，它应该作为一个独立的单元工作 - 这确实。这是由不与plunk链接的指令生成的，但它应该是不言自明的。动画脚本从Microsoft's svg animation starter page中解脱出来，因为它是所有必需的（经过几次调整）。

我试过了一大堆事情，要么没有成功，要么一批新的错误，然后失败。我确信这件事已经以某种形式回答了，所以如果它已经接受我的道歉，但我没有找到解决办法。

在此先感谢。

新普拉克基于原有的表现行为 Running directive with options

(function(){ 
    'use strict'; 
    angular.module('loader', []) 
    .directive('loader', ['$window', function($window){ 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs){ 
     ... 
     } 
    } 
    } 
})();

来源

2016-03-02 Stuart Harding

你试过window.requestAnimationFrame（doCircAnim）吗？ – GavinBrelstaff

我会给它一个回去，回来...没有没有工作。 :( –

你也许正在遭受这种bug的影响http://stackoverflow.com/questions/24078366/angularjs-directive-not-displaying-the-template – GavinBrelstaff

感谢马克·济慈这一个，都从这个董事会和我的同事们都其他建议。

虽然脚本没有什么内在错误，但Angular注入通过使用jqLite的方式是问题出现的地方在于它被输入到DOM并且因为它使用不能运行脚本的innerHTML方法而留在那里。

因此，从DOM中删除脚本是唯一的方法。令人高兴的是，因为你可以使用香草js而不会产生任何不良影响，所以将脚本移动到指令主体上也是有用的。每个加载器实例都有一个唯一的ID，并且只有一个版本的脚本，因此它们都访问同一个版本 - 而不是每个实例都有一个脚本。 I have updated the plunk above来反映这一点，以便永远不会有非工作版本。破损的脚本仍然在第一个引用的plunk中。

(function(){ 

    'use strict'; 

    angular.module('loader', []) 

    .directive('loader', ['$window', function($window){ 

    var animationIndex = 0; 

    return { 
    restrict: 'E', 
    link: function (scope, element, attrs){ 

     var shape = attrs.ccId; 
     var type = attrs.ccType; 
     var width = attrs.ccStrokeWidth || 6; 
     var diameter = attrs.ccDiameter || 24; 
     var stroke = attrs.ccStroke; 
     var opacity = attrs.ccOpacity || 1/5; 
     var elemWidth = element[0].clientWidth; 
     var originOffset = (diameter === false)? 32 : diameter/2; 
     var radius = originOffset - ((width/2) + 2); 
     var reset = (type === 'line')? elemWidth : diameter * Math.PI; 
     var animationTarget; 
     var thetaDelta = 1; 

     function doAnim() { 
     if(type === 'circle') { 
      animationTarget.setAttribute("transform", "rotate(" + animationTarget.currentTheta + ")"); 
      animationTarget.currentTheta += .1 
     } 
     else {animationTarget.currentTheta += .6} 
     animationTarget.setAttribute("stroke-dasharray", animationTarget.currentTheta); 
     animationTarget.currentTheta += thetaDelta 
     if(animationTarget.currentTheta > reset){ animationTarget.currentTheta = 0} 
     requestAnimationFrame(doAnim); 
     } 

     // <cc-loader cc-id="myId" cc-type="[circle,line]" cc-opacity="[default = .2]" cc-diameter="[int - circle type only]" cc-stroke="[# colour value]" cc-stroke-width="[default = 5]"></cc-loader> 

     if (type == 'line') { 

     element.html('<svg' + 
      ' width="'+elemWidth+'" height="'+width+'" viewBox="0 0 '+elemWidth+' '+width+'">' + 
      '<g transform="translate('+ -width * 2+', '+width/2+')">' + 
      '<line' + 
       ' id="'+shape + animationIndex +'"' + 
       ' fill="none"' + 
       ' stroke="'+stroke+'"' + 
       ' opacity="'+opacity+'"' + 
       ' stroke-width="'+width+'"' + 
       ' stroke-linecap="round"' + 
       ' stroke-miterlimit="10"' + 
       ' x1="'+width+'"' + 
       ' y1="0"' + 
       ' x2="'+elemWidth+'"' + 
       ' y2="0"' + 
       '>' + 
      '</line>' + 
      '</g>' + 
      '</svg>'); 

     animationTarget = document.getElementById(shape+animationIndex); 
     animationTarget.currentTheta = 0; 
     doAnim(); 
     animationIndex++; 

     } 

     else if (type == 'circle') { 

     element.html('<svg' + 
      ' width="'+diameter+'" height="'+diameter+'" viewBox="0 0 '+diameter+' '+diameter+'">' + 
      '<g transform="translate('+originOffset+', '+originOffset+')">' + 
       ' <circle' + 
       ' id="'+shape + animationIndex +'"' + 
       ' fill="none"' + 
       ' stroke="'+stroke+'"' + 
       ' opacity="'+opacity+'"' + 
       ' stroke-width="'+width+'"' + 
       ' stroke-linecap="round"' + 
       ' stroke-miterlimit="10"' + 
       ' cx="0"' + 
       ' cy="0"' + 
       ' r="'+radius+'">' + 
      '</circle>' + 
      '</g>' + 
     '</svg>'); 

     animationTarget = document.getElementById(shape+animationIndex); 
     animationTarget.currentTheta = 0; 
     doAnim(); 
     animationIndex++; 
     } 

     else { 
     element.html('Types allowed for this element are \'line\' and \'circle\''); 
     } 
    }, 
    }; 
}]); 

})();

现在在GitHub上。 Feel free to play and send a pull request if you want to make it better

来源

2016-03-03 12:50:41

Math.PI的使用是蛋糕上的锦上添花:) –

脚本从指令添加到dom不发射

回答

相关问题