Question

我创建了一个生成svg不确定微调器的简单指令。页面上包含的脚本工作得很漂亮。 svg和脚本完美生成。脚本不会触发。

<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){
         ...
      }
    }
  }
})();

Answer 1

感谢Mark Keats的这一次以及该委员会和我的同事提出的所有其他建议。

尽管脚本没有任何内在错误，但Angular通过使用jqLite处理注入的方式是出现问题的地方，因为它是DOM的输入，只是因为它使用了无法运行脚本的innerHTML方法而留在那里。 / p>

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

(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

脚本从指令添加到无法触发的

1 个答案: