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

我创建了一个SVG时钟指令，它应该显示所选项目的时间。通过控制器功能绑定指令元素（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>

来源

2015-01-08 אVי

我fanily得到它的工作。

我用$ rootScope存储'marker'函数。

flunker

感谢的所有人

来源

2015-01-11 07:44:13

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

回答

相关问题