2017-10-20 5 views
0

La variable datasets existe (je peux la voir w/console.log()), mais elle n'est pas transmise à la page html. J'ai configuré le contrôleur et l'application correctement, je crois, mais je n'arrive pas à comprendre ce que je fais de mal. Laissé dehors l'autre code qui ne devrait pas avoir un impact sur ceci pour le rendre plus facile à lire.AngularJS impossible de transmettre la variable à la page HTML

<!DOCTYPE html> 
<html lang="en" ng-app="ValidationApp"> 

<body ng-controller="Test1"> 

<div class="container-fluid" style="position:absolute;"> 

        <div class="btn-group-vertical text-center pull-left"> 
         <h3>Data Visualization</h3> 
         <button type="button" class="btn-danger" id="visualize" data-toggle='modal' data-target='#d3_choose' onclick="runfile('visualize','')"><i class="fa fa-area-chart"></i> Visualize Results</button><br> 
        </div> 

       </div> 
       <div style="height:70vh;font:16px/26px Georgia, Garamond, Serif ;overflow:auto; background-color:white;padding-top:30px;position:absolute;margin-left:-40px;" class="col-lg-7 col-lg-push-3"> 
        <pre>{{message1}} 
       </div> 

      </div> 
    </div> 
<div id="d3_choose" class="modal fade" role="dialog" "> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header" style="background-color:rgba(147, 147, 147, .5);"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title style1" style="font-size:24px;">Choose the Validation results to visualize</h4> 
      </div> 
      <div class="modal-body" p> 
       <!--<form class="form-group" name="file_used" id="file_used">--> 
         <label ng-repeat="dataset in datasets">Choose a dataset 
          <input type="radio" ng-value="dataset" value="dataset"> 
            <!--name='results_file' ng-model="results_file" required>--> 
          {{dataset}} 
         </label><br> 
         <h3 ng-show="datasets.length==0">No validation results available using {{folder_name}} folder.</h3><br> 
       <!--</form>--> 
       <button type="button" class="btn-danger" id="visualize2" data-toggle='modal' data-target='#d3_viz' 
         ng-disabled="file_used.$invalid" onclick="data_viz('file_used')"><i class="fa fa-check"></i> Visualize</button> 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Exit</button> 

      </div> 
     </div> 

    </div> 
</div> 

$(".modal").on("hidden.bs.modal", function(){ 
     $(".modal-body input").val("") 
     $(".modal-body select").val("") 
    }); 

    //////////////////////////////////////// 
    var app=angular.module('ValidationApp',[]); 

     app.controller('Test1', function($scope,$http) { 
      //will find current ip address wo hardcoding 
      var socket = io.connect(); 

      socket.on('messages', function(data) { 
       if ($scope.message1 == null) { 
        $scope.$apply(function(){$scope.message1 = data}) 
       } else { 
        $scope.$apply(function(){$scope.message1 = $scope.message1 += data;}) 
       } 
      }); 

      socket.on('file_list', function(data) { 
       $scope.$apply(function() {$scope.folder_name = data[0]}) 
       data.shift() 
       $scope.$apply(function() {$scope.datasets = data}) 
      }); 

+0

Vous devrez peut-être créer un service. Référer https://stackoverflow.com/questions/17747104/how-to-set-scope-of-controller-after-socket-io-message-event-in-angularjs –

+1

Vous avez 2 ng-apps qui semble étrange. – user441521

+0

La variable 'message1' apparaît correctement dans la page html, donc' $ scope.apply' devrait suffire. ajouté le code HTML pour cela. – user3711502

Répondre

0

Voulez-vous dire avoir 2 ng-apps définies et le même contrôleur ng défini 2 moments différents?

+0

ajouté que pour voir si j'avais besoin de définir ces éléments localement (pour le modal). n'a pas fait la différence des deux côtés. – user3711502