Question

我有angularjs文件

     <div class="container starter-template">

        <div class="col-md-9" >

        <select ng-model="selectedName" ng-options="x as x.TeamName for x in teams" ng-change="selectedItemChanged()">

        <option value="">Select Team</option>
        </select>

        </div>
        <div class="col-md-3">{{date}} </div>
        <hr>


          <!-- <div ng-repeat="s in user">
            <div ng-repeat="(key, value) in s">
                {{selectedName.FirstName}} : {{value["Date"]}} {{value["TimeStamp"]}} {{value["Status"]}}
            </div>
           </div>-->
         <div class="box box-default" style="width:1100px">
          <div class="box-header with-border">
                  <h3 class="box-title">Employee Details  </h3>   
         <div class="row" >

          <br/> 
         <div class="col-lg-3 col-xs-6" ng-repeat="name in fullName">
                  <!-- small box -->

                  <div class="small-box bg-aqua" style="height:130px;width:150px;" >
                    <div class="inner">
                      <h3></h3>


                    </div>
                    <div class="icon">
                      <i class="ion ion-person" ></i>
                    </div>

                   <button ng-click="info(name)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">More Info
                 <i class="fa fa-arrow-circle-right"></i>
                    </button><br/><br/>
                    <center><b><p >{{name}}</p></b></center>
                  </div>

          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">{{name}}</h4>
                </div>
                <div class="modal-body">
                  <p>Clock In : {{clock_in}}</p>
                  <p>Clock Out : {{clock_out}}</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

            </div>
          </div>   

                </div>
              </div>
            </div>
          </div>

        <div class="box box-default" style="width:1100px">
          <div class="box-header with-border">
                  <h3 class="box-title">Clock In</h3>  
                  <div class="row" > 

          </div>
        </div>  
        </div> 
        <div class="box box-default" style="width:1100px">
          <div class="box-header with-border">
                  <h3 class="box-title">Clock Out</h3>  
                  <div class="row" > 
          </div>
        </div>  
        </div>    






        <div id="inOut-container">FusionCharts will render here</div>
        <div id="attendance-container">FusionCharts will render here</div>
        </div>

和一个javascript文件：

           app.controller('organization_drill_down', ['$scope', '$firebaseArray', '$firebaseObject', 'FBURL', function($scope, $firebaseArray, $firebaseObject, FBURL){
  //current date
  var today = new Date(); 
  var dd = today.getDate(); 
  var mm = today.getMonth()+1; 
  var yyyy = today.getFullYear(); 
  if(dd<10){dd='0'+dd} 
  if(mm<10){mm='0'+mm} 
  $scope.date = dd+'/'+mm+'/'+yyyy;

  $scope.all_ins = [];
  $scope.all_outs = [];

  var teams = new Firebase("************"); 
  var time_stamps = new Firebase("*************")  //collecting team's data
    $scope.teams = $firebaseArray(teams);    //teams for select dropdown
     $scope.team = [];
     $scope.uId = [];
     $scope.in = 0;
     $scope.out = 0;
    $scope.selectedItemChanged = function() {
    console.log($scope.selectedName.TeamName);
  var ref = new Firebase("**************").orderByChild('TeamName')
      .equalTo($scope.selectedName.TeamName) //check if selected team's name matches users
      .on('value', function(snap) {
        $scope.fullName = [];
        $scope.user = snap.val();

         angular.forEach($scope.user, function(user,user_key) {

         $scope.fullName.push(user["FirstName"]+" "+user["LastName"]);

      });

         $scope.$digest();
      });

  };

  //info on clicking more info for a specific user
  $scope.info = function(name) {

   var users = new Firebase("********************");
   var name = name.split(" ");
   console.log(name);

   users.orderByChild('FirstName').equalTo(name[0]) //check if selected team's name matches users
      .on('value', function(snap) {
        $scope.user = snap.val();
        angular.forEach($scope.user, function(user,user_key) {

        if(user["LastName"] == name[1])   //checking if firstname and lastname are equal afterbutton click in user node
         {
        time_stamps.orderByKey()
        .equalTo(user_key) //check if selected name's key is in timestamps
        .on('value', function(snap) {
          $scope.time_stamp = snap.val();

          angular.forEach($scope.time_stamp, function(value, key) {
          angular.forEach(value, function(value1, key) {
          if(value[key]["Date"] == $scope.date ){
           if(value[key]["Status"]== "In"){
           $scope.all_ins.push(value[key]["TimeStamp"]);



           }
          else{
            $scope.all_outs.push(value[key]["TimeStamp"]);

           }


          } 


        });
        });
       $scope.clock_in =  $scope.all_ins[0];
      $scope.clock_out =  $scope.all_outs.pop();

        });

         }

      });

      $scope.$digest();
      });

   };
  }]);

我想要的是：点击按钮＆＃34;更多信息＆＃34;应该打开一个弹出窗口并调用函数info（name）并返回clock-in和clock out。但是发生的事情是，点击按钮时，按下ng-click就会点击信息（名称），但是在点击两到三次之后，信息就不会直接加载。我第一次遇到这种不寻常的错误，有人可以帮忙吗？

第一次点击按钮＆＃34时;更多信息＆＃34;：

点击按钮后的第二/第三次＆＃34;更多信息＆＃34;：

Answer 1

似乎（从我可以通过标识收集的内容和一些观察结果），您正在更新users.orderByChild().equalTo().on部分之外的变量。

Firebase功能（如您使用的功能）始终是承诺，在这种情况下，承诺将结束，然后on('value', function(snap){将运行。

由于它是异步承诺，您可能会将空值保存到要在模态中使用的变量。经过多次尝试后，最终会给出足够的时间来执行，以便获得正确的值。

另外，请记住，使用on将为该firebase节点添加一个侦听器（在'value'更改的条件下），每次满足条件时，它将运行您放入其中的任何代码（不是只是你第一次调用代码。）

Angularjs firebase在点击两到三次后点击加载值

1 个答案: