Angularjs 通过控制器函数将指令元素（SVG）绑定到控制器对象_Angularjs_Angularjs Directive

Angularjs 通过控制器函数将指令元素（SVG）绑定到控制器对象

angularjs

Angularjs 通过控制器函数将指令元素（SVG）绑定到控制器对象,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我创建了一个SVG时钟指令，它应该显示所选项目的时间我无法将时钟绑定到数据。功能timeMarker应为所选小时的范围设置颜色我的密码在上面我的HTML： <body ng-controller="MainCtrl"> <p>Currently selected {{currentSelected}}</p> <button class="btn btn-danger" ng-click="clearMe()">Clear selected

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

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

我的密码在上面

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


当前选定{currentSelected}
清除选定项



{{time.name}}
从时间：{{time.fromTime}
到时间：{time.toTime}


选择

我的控制器：

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';
   }

 }

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$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=函数（时间）{
$scope.currentSelected=时间；
};
$scope.clearMe=函数（）{
$scope.currentSelected=null；
};
$scope.selectedClass=函数（项）{
如果（项==$scope.currentSelected）{
返回“btn成功”；
}否则{
返回“btn警告”；
}
};
$scope.timeMarker=函数（时间）{
如果（（时间>=$scope.currentSelected.fromTime）&（时间我很快就让它工作了
我使用$rootScope存储“marker”函数

谢谢大家
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>