添加我的指令时无法使用 ng-repeat 传递值

Question

我有一个 html table 允许用户使用插件输入时间。我可以使用 JSON 从外部加载数据，所有字段都按照我的意愿填充。当我添加指令时出现问题。这些值被指令删除或不可见。为了便于说明，我已将该指令添加到一栏中。我的目标是让用户点击一个单元格，然后会出现一个输入框，然后用户输入时间，并保存时间。这主要是通过指令完成的，但我无法使用指令加载数据。

    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>

我的控制器

   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

您需要将 "hours" 变量传递给您的指令。

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

已更新fiddle： http://jsfiddle.net/yu216x5w/46/

此外，您似乎正在尝试使用替换来实现嵌入功能。相关计算器： How to use `replace` of directive definition?

Answer 2

您需要创建第二个指令来处理未填充的单元格：

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;

            };

           }
      };
    });

然后您需要 link 在您看来是这样的：

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

然后您可以将当前循环变量传递回您的 angular 控制器。

祝你好运！

添加我的指令时无法使用 ng-repeat 传递值

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

angularjs

ng-repeat