AngularJS無法將變量傳遞給HTML頁面

數據集變量存在（我可以在console.log（）中看到它），但它沒有傳遞到html頁面。我相信，我正確設置了控制器和應用程序，但無法弄清楚我做錯了什麼。排除不應該對此產生影響的其他代碼，以便於閱讀。AngularJS無法將變量傳遞給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}) 
      });

來源

2017-10-20 user3711502

您可能需要創建一個服務。請參閱https://stackoverflow.com/questions/17747104/how-to-set-scope-of-controller-after-socket-io-message-event-in-angularjs –

你有2個ng-apps似乎很奇怪。 – user441521

儘管'message1'變量確實在html頁面中顯示，所以'$ scope.apply'應該足夠了。爲此添加了html代碼。 – user3711502

你的意思是有2 NG-應用程序定義和相同的NG-控制器定義兩個不同的時間？

來源

2017-10-20 16:30:39 user441521

補充說，看看我是否需要在本地定義這些元素（對於模態）。這兩種方法都沒有改變。 – user3711502

AngularJS無法將變量傳遞給HTML頁面

回答

相關問題