Unable to pass in a value using ng-repeat when adding my directive

Question

I have a html table that allows users to enter a time using a plugin. I can load the data externally using a JSON all the fields populate as I would like. The problem arises when I add my directive. The values are removed or invisible by the directive. I have added the directive to one column for illustrative purposes. My goal is to allow the user to click on a cell and an input box would appear, user then enters the time, and the time is saved. This has mostly been accomplished via the directive, but I am unable load the data with the directive.

    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 table

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

my controller

   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/

Hopefully, I have explained this well enough. Any help will be greatly appreciated. I have just started working on Angular for this project.

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

You need to pass the "hours" variable to your directive.

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

Updated fiddle: http://jsfiddle.net/yu216x5w/46/

Also, seems like you're trying to use replace for the transclude functionality. Related stackoverflow: How to use `replace` of directive definition?

edited May 23 '17 at 12:23

Community

1
1

answered May 11 '16 at 21:23

sh3nan1gans

2,246
5
19
23

I'm unable to access the property value. Otherwise, it works very well. – Louis345 May 11 '16 at 22:32

score 1 · Accepted Answer · answered May 12 '16 at 03:11

You need to create a second directive to handle the cell that is not being populated:

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;

            };

           }
      };
    });

You then need to link to that in your view like so:

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

You can then pass the current looping variable back to your angular controller.

Good luck!

Unable to pass in a value using ng-repeat when adding my directive

2 Answers2