Question

我正在尝试创建以下内容：

给出一个对象数组，每个对象代表一条可点击的行。

最后，它需要如下图所示。

clock face

我的代码大部分都有效，但我有两个问题：

1：查看日志时会发现错误。

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Error: Invalid value for <rect> attribute transform="{{min.rotate}}"

2：onClick不起作用（可能是因为错误）

我的指令代码：

    app.directive('clock24', ['$filter','$rootScope', function($filter,$rootScope) {
var linkFunction = function(scope, element, attributes) {
    scope.obj = attributes["clock24"];
    scope.hrs = [12,1,2,3,4,5,6,7,8,9,10,11];
    scope.mins = [];

    for(var i=0 ; i<60; i++){
      scope.mins.push(i)
    }


    scope.getHrs = function(){
        var res = [];
        var rotate = 0;
        var raze = 360/ scope.hrs.length;
        angular.forEach(scope.hrs, function(hr, key) {
            this.push({"key":key,"id":hr,"rotate":"rotate("+rotate+" 250 250)"});
            rotate+=raze;
        }, res);
        return res;
    };


     scope.getMins = function(){
        var res = [];
        var rotate = 0;
        var raze = 360/ scope.mins.length;
        angular.forEach(scope.mins, function(min, key) {
            this.push({"key":key,"id":min,"rotate":"rotate("+rotate+" 250 250)"});
            rotate+=raze;
        }, res);
        return res;
    };



};
return {
    restrict: 'A',
    scope: false,
    templateUrl: 'clockTemplate.html',
    link: linkFunction
  }
 }]);

我的模板代码：

  <div class="timingClock">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"            xml:space="preserve" style="shape-rendering:geometricPrecision; text- rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">
 <defs>
 <script type="text/ecmascript"><![CDATA[
  function changeRect(evt) {
      var svgobj=evt.target;
      // svgobj.style.opacity= 0.3;
      // svgobj.setAttribute ('x', 300);
      alert(svgobj.id);
  }
  ]]>
 </script>

 <radialGradient id="toning" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: black; stop-opacity:0.3"/>
      <stop offset="100%" style="stop-color: #8c770d; stop-opacity:0.1"/>
 </radialGradient>
 </defs>

  <g id="UrTavla">
       <circle style="fill:none;stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245"></circle>

<g id="markeringar" class="Mrk">
  <rect  ng-repeat="hr in getHrs()"   x="245" y="5" width="20" height="20" id="{{hr.id}}"  onclick="changeRect(evt)" transform="{{hr.rotate}}"  ></rect>
  <rect  ng-repeat="min in getMins()" x="249" y="5" height="10" width="2"  id="{{min.id}}" onclick="changeRect(evt)" transform="{{min.rotate}}" ></rect>

</g>

plunker

非常感谢。

阿维

Answer 1

在评估getHrs和getMins函数期间发生的组合绑定出了问题。

我能够通过将其返回值分配给范围变量来修复它：

scope.hrsRes = scope.getHrs();
scope.minsRes = scope.getMins();

在模板中：

ng-repeat="hr in hrsRes"
ng-repeat="min in minsRes"

此外，changeRect未定义，点击一旦我将其移至script.js就开始工作。

请在此处查看：http://plnkr.co/edit/s1QU5XBLTAQJUHLlXXuS?p=preview

请参阅有关rect属性错误的信息：D3 Integration with Angular: "Error: Invalid value for <rect> attribute x"

SVG圈（时钟）来自阵列的可点击对象

1 个答案: