Javascript AngularJS ng开关，我做错了什么？

我对以下代码中的ng切换情况感到非常失望：

<div class="UPLcontent" ng-model="uploadFiles">
    <ul class="UPLfiles" ng-repeat="file in uploadFiles track by $index">
        <li class="UPLicon"><i class="{{file.type | typeIcon }}"></i></li>
        <li class="UPLinfo"><span>{{file.name | html}}</span><span>{{file.size | fileSize}}</span></li>
        <li class="UPLtool" ng-switch on="toolActionStage" >
            <i class="fi-x-circle" ng-click="removeFromUploadList($index)"  ng-switch-default="delete"></i>
            <div ng-switch-when="progress">

                <div ang:round:progress data-round-progress-model="roundProgressData"
                    data-round-progress-width="30"
                    data-round-progress-height="30"
                    data-round-progress-outer-circle-width="3"
                    data-round-progress-inner-circle-width="0"
                    data-round-progress-outer-circle-radius="10"
                    data-round-progress-inner-circle-radius="0"
                    data-round-progress-label-font="0pt Arial"
                    data-round-progress-outer-circle-background-color="red"
                    data-round-progress-outer-circle-foreground-color="#67CB8C"
                    data-round-progress-inner-circle-color="#505769"
                    data-round-progress-label-color="#67CB8C"
                    ></div>
            </div>

        </li>
    </ul>   
</div>

---

您应该将

ng开关on=“toolActionStage”

替换为

ng开关=“toolActionStage”

。据我所知，您现在使用的语法无效。

ng switch

创建了一个新的作用域，指令没有正确处理它

通过向post函数添加

调试器

，并查看

范围

的内容，您可以很容易地看到这一点

如果在不使用

ng开关的情况下运行指令

，

roundProgressData

按预期位于

范围

中

在您的情况下，

roundProgressData

可以在

范围中找到。$parent

更新2：

---

我同意tasseKATT的观点：只需使用

ng show

。这是一把工作小提琴：

您是否检查了文档以确定它是AngularJS问题还是进度条问题？我检查了，没有抛出错误。。。没有什么！程序条也可以工作。您在哪里可以构建plunker？为什么不使用最简单的方法，不打开，只需ng switch=“toolActionStage”检查变量的值

toolActionStage

。。。它可能不是你想象的那样。例如，

ng repeat

创建隔离作用域，或者您可以让另一个指令创建子作用域……这是有效的，从检查源代码来看，

ng switch=“x”

和

ng switch on=“x”之间没有区别

。那么我是否将$parent.roundProgressData传递给指令？？如何将调试器添加到post函数@马萨

angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {
  var compilationFunction = function (templateElement, templateAttributes, transclude) {
    if (templateElement.length === 1) {
      var node = templateElement[0];

      var width = node.getAttribute('data-round-progress-width') || '400';
      var height = node.getAttribute('data-round-progress-height') || '400';

      var canvas = document.createElement('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));

      node.parentNode.replaceChild(canvas, node);

      var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';
      var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';

      var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769';
      var outerCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';
      var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';
      var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9';

      var outerCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100';
      var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70';

      var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri';

      return {
        pre: function preLink(scope, instanceElement, instanceAttributes, controller) {
          var expression = canvas.getAttribute('data-round-progress-model');
          scope.$watch(expression, function (newValue, oldValue) {
            // Create the content of the canvas
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, width, height);

            // The "background" circle
            var x = width / 2;
            var y = height / 2;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.strokeStyle = outerCircleBackgroundColor;
            ctx.stroke();

            // The inner circle
            ctx.beginPath();
            ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(innerCircleWidth);
            ctx.strokeStyle = innerCircleColor;
            ctx.stroke();

            // The inner number
            ctx.font = labelFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = labelColor;
            ctx.fillText(newValue.label + '%', x, y);

            // The "foreground" circle
            var startAngle = - (Math.PI / 2);
            var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);
            var anticlockwise = false;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.strokeStyle = outerCircleForegroundColor;
            ctx.stroke();
          }, true);
        },
        post: function postLink(scope, instanceElement, instanceAttributes, controller) {}
      };
    }
  };

  var roundProgress = {
    compile: compilationFunction,
    replace: true
  };
  return roundProgress;
}]);