Question

我创建了一个SVG时钟指令，该指令应该显示所选项目的时间。

我无法将时钟绑定到数据上。函数timeMarker应设置所选小时范围的颜色。

我的代码plukker。

我的HTML：

<body ng-controller="MainCtrl">
<p>Currently selected {{currentSelected}}</p>
 <button class="btn btn-danger" ng-click="clearMe()">Clear selected</button>  

 <br>     <br>



 <div class="holder panel panel-default" ng-repeat="time in highlighted">
  <div class="panel-heading">{{time.name}}</div>

      <div class=" panel-bodys">
          <div class="txt pull-left">From time : {{time.fromTime}}</div>
          <div class="txt pull-right">To  time : {{time.toTime}}</div>
          <br>
          <button class="btn btn-block" ng-class="selectedClass(time)" ng-    click="selectMe(time)">Select</button>  

      </div>

   <br /> 
 </div>


   <clock timer="timer" time-marker="timeMarker()"></clock>
 </body>

我的控制器：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.name = 'World';

 $scope.highlighted =[
    {name:'time 1',fromTime:1,toTime:3},
    {name:'time 2',fromTime:6,toTime:8},
    {name:'time 3',fromTime:10,toTime:11}
   ];


 $scope.currentSelected;

 $scope.selectMe =function(time){
   $scope.currentSelected = time;
 };

 $scope.clearMe =function(){
   $scope.currentSelected = null;
 };

 $scope.selectedClass =function(item){
   if(item === $scope.currentSelected){
   return 'btn-success';
   } else{
      return 'btn-warning';
   }
 };


 $scope.timeMarker = function(time) {
   if((time >= $scope.currentSelected.fromTime)&&(time <= $scope.currentSelected.toTime))   {
     return 'green';
   }else{
     return 'black';
   }

 }

我的指示：

app.directive('clock', function() {

 var linkFunction = function(scope, element, attributes) { 
 var hrs = {};
 scope.hrs = hrs;



 var loadClockItems = function(hr){
        hr = 12
        var rotate = 0;
        for(var i=0 ; i<hr; i++){
            var raze = 360/ hr;

                hrs[i*5]= {"x":245,"width":10,"height":20,"active":true,"key":i*5,"rotate":"rotate("+rotate+" 250  250)","color":scope.timeMarker(i*5)};

            rotate+=raze;
        }
    };

    loadClockItems();


    scope.getNum = function(item){
       if(item.active==true){
          return item.key/5;
       }
    }
 }


 return {
    restrict: 'E',
    link: linkFunction,
    scope: {
        timeMarker: '&',
        timer:'='
    },
    templateUrl: 'clock.html'

  }
 })

我的指示模板（时钟）;

 <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>

 <radialGradient id="toning" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
     <stop offset="0%"   style="stop-color: #FFFFFF; stop-opacity:1"/>
     <stop offset="100%" style="stop-color: #838a8a; stop-opacity:1"/>
 </radialGradient>
 </defs>

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

 <g id="markeringar" class="Mrk">
   <rect  ng-repeat="(key, item)  in hrs  track by key "  fill="{{item.color}}"   x-ng- attr-x="{{item.x}}" y="5" x-ng-attr-width="{{item.width}}" x-ng-attr-height="{{item.height}}"   id="{{item.key}}"  ng-click="setTime(item)"  x-ng-attr-transform="{{item.rotate}}"  ></rect>
   <text ng-repeat="(key, item)  in hrs  track by key"  x="255" y="60"  x-ng-attr- transform="{{item.rotate}}"  >{{getNum(item)}}</text>
 </g>
 </g>
 </svg>

Answer 1

我终于开始工作了。

我使用$ rootScope来存储'marker'功能。

flunker

谢谢大家

通过控制器功能将指令元素（SVG）绑定到控制器对象

1 个答案: