ディレクティブを追加するときにng-repeatを使用して値を渡すことができません

Question

ユーザーがプラグインを使用して時間を入力できるhtmlテーブルがあります。私は、JSONを使用してデータを外部に読み込むことができます。問題は、私のディレクティブを追加するときに発生します。値は、ディレクティブによって削除または非表示になります。私は説明のためにこのディレクティブを1列に追加しました。私の目標は、ユーザーがセルをクリックできるようにすることで、入力ボックスが表示され、ユーザーが時間を入力すると、時間が保存されます。これは主に指令によって達成されましたが、指令でデータを読み込むことができません。

app.directive('helloWorld',function($parse){ 

    return { 
     scope :{ 

     hours:"=" 
     }, 
    template:'<td style="table-layout:fixed;" ng-click="showInputBox($event)">{{hours}} <div ng-show="isChecked"><input type="text" style="width:89px;" class="form-control" time="hours" ng-change="saveTime($event)" ng-model="time" ui-timepicker></div><div ng-hide="isChecked"> <p>{{hours | date:"shortTime"}} </p></div></td>', 
    replace:true, 
    controller:function($scope){ 


     $scope.showInputBox = function ($event) {     
      $scope.isChecked = true; 

     }; 
     $scope.saveTime = function($event){       
      $scope.isChecked = false; 

     }; 

     } 
    }; 
}); 

HTMLテーブル

<h2>Business Hours</h2> 
<example example-attr="xxx"></example> 
<table class="table table-bordered"> 
    <tr> 
     <th></th> 
    <th style="vertical-align:top" scope="col" colspan="2">Sales</th> 
    <th style="vertical-align:top" scope="col" colspan="2" >Service</th> 
    <th style="vertical-align:top" scope="col" colspan="2">Parts</th> 
    <th style="vertical-align:top" scope="col" colspan="2">Accounting</th> 
    <th style="vertical-align:top" scope="col" colspan="2">Body Shop</th> 
    <th style="vertical-align:top" scope="col" colspan="2" >Other</th> 
    </tr> 
     </tr><tr ng-repeat="day in weekdays"><td>{{day}}</td>> 
     <td ng-repeat-start="hours in businessHours" hello-world>{{hours.startTime}}</td> 
      <td ng-repeat-end>{{hours.endTime}}</td> 
     </tr> 

私のコントローラうまくいけば

app.controller('main', ['$scope', '$location', function ($scope,$location) { 

     $scope.weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]; 
     $scope.businessHours = { 
     sales : { startTime : "5", endTime : "6" }, 
     service : { startTime : "-1", endTime : "-2" }, 
     accounting : { startTime : "4", endTime : "2" }, 
     parts : { startTime : "7", endTime : "8" }, 
      bodyShop : { startTime : "8", endTime : "9" }, 
     other : { startTime : "-5", endTime : "-6" }, 
    }; 



My fiddle http://jsfiddle.net/yu216x5w/45/ 

、私は十分にこのことを説明しました。どんな助けでも大歓迎です。私はちょうどこのプロジェクトのためにAngularで作業を始めました。

Answer 1

あなたが移入されていないセルを処理するための第二のディレクティブを作成する必要があります。

app.directive('helloWorldEnd',function($parse){ 

     return { 
      scope :{ 

      hours:"=helloWorldEnd" 
      }, 
     template:'<td style="table-layout:fixed;" ng-click="showInputBox($event)">{{hours.endTime}} <div ng-show="isChecked"><input type="text" style="width:89px;" class="form-control" ng-change="saveTime($event)" time="hours.start" ng-model="time" ui-timepicker></div><div ng-hide="isChecked"> <p>{{time | date:"shortTime"}}</p></div></td>', 
     replace:true, 
     controller:function($scope){ 


      $scope.showInputBox = function ($event) {     
       $scope.isChecked = true; 

      }; 
      $scope.saveTime = function($event){       
       $scope.isChecked = false; 

      }; 

      } 
     }; 
    }); 

あなたがそのようにのようなあなたのビューでそれにリンクする必要があります。

<td ng-repeat-end hours="businessHours" hello-world-end="hours">{{hours.endTime}}</td> 

これで、現在のループ変数を角度コントローラーに戻すことができます。

幸運を祈る！

Answer 2

"hours"変数をディレクティブに渡す必要があります。

<td ng-repeat-start="hours in businessHours" hello-world hours="businessHours">{{hours.startTime}}</td> 

更新フィドル：また http://jsfiddle.net/yu216x5w/46/

は、あなたがtransclude機能に置き換えるに使用しようとしているように思えます。関連のstackoverflow： How to use `replace` of directive definition?