AngularJS沒有使用我的控制器中的$ scope變量的更新值

Question

我粘貼了下面我的代碼的相關代碼片段。 我知道基礎angularJS正在工作，因爲HTML文檔不顯示{{}}變量，但相反，我得到一個空白。

我相信這是因爲它獲得了變量的空值。當我在控制器內執行一些console.log表達式時，我可以看到值相應地更新，但在控制器外部是不同的。

代碼：

<div ng-controller="rangeSort"> 
      <h3>Range Selection</h3> 

      <div class="row"> 
       <div class="col-md-4"> 
        <h5><b>Observer</b></h5> 
        <select class="form-control" ng-model="obSelection"> 
         <option value="" >All</option> 
         <option ng-repeat="observer in observersS" value="{{observer}}">{{observer}}</option> 
        </select> 
       </div> 

       <div class="col-md-4"> 
        <h5> <b>Host</b></h5> 
        <select class="form-control" ng-model="hostSelection"> 
         <option value="" >All</option> 
         <option ng-repeat="host in hostsS" value="{{host}}">{{host}}</option> 
        </select> 
       </div> 

       <div class="col-md-4"> 
        <h5> <b>Bug</b></h5> 
        <select id="chooseBug" class="form-control" ng-model="bugSelection"> 
         <option value="" >All</option> 
         <option ng-repeat="bug in bugsS" value="{{bug}}" >{{bug}}</option> 
        </select> 
       </div> 
      </div> 

      <!--div ng-repeat="bugItem in bugsJSONList | filter: obSelection | filter: hostSelection | filter: bugSelection" > {{bugItem.bug}} on {{bugItem.host}} , observer {{bugItem.observer}} </div--> 
      <div class="row"> 
       <div style="text-align: center; margin-bottom: 15px" ng-repeat="observer in observerKeys | filter: obSelection" > 
        <h5><b> {{observer}}</b></h5> 
        <div class="row"> 
         <div class="col-md-6" ng-repeat="host in hostKeys | filter: hostSelection" > 
          <br> <span style="text-decoration:underline"> Host {{host}} </span> 
          <div style="text-align: left" ng-repeat="bug in bugsS | filter: bugSelection" > 
           <div ng-repeat="item in JSONbugsList[observer][host][bug]">{{bug}} from {{item.start}} to {{item.end}}</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

      <script> 
       var summaryApp = angular.module('summaryApp', []); 
       summaryApp.controller("rangeSort", function($scope) { 
        hosts =[], observers =[], bugs =[], JSONbugsList =[]; 
        hostKeys = [], observerKeys = [], bugKeys = []; 

        bugTracker = {}; 


        $.getJSON('../java_output/bug_summary.json', function (data) { 
         JSONbugsList = data; 
         var numObservers = data.numObservers; 
         var bugTracker = {}; 
         for (var observer = 1; observer <= numObservers; observer++) { 
          observers.push(observer); 
          observerKeys = Object.keys(data); 
          observerKeys.splice(observerKeys.indexOf('numObservers')); 
          for (var host in data["observer" + observer]) { 
           if (hosts.indexOf(host) == -1) { 
            hosts.push(host); 
           } 
           hostKeys = Object.keys(data["observer" + observer]); 
           for (var bug in data["observer" + observer][host]) { 
            if (bugs.indexOf(bug) == -1) { 
             bugs.push(bug); 
            } 
            for (var i in data["observer" + observer][host][bug]) { 
             bugTracker[bug] = true; 
             var dateVar = data["observer" + observer][host][bug][i]; 
             var intoList = {"observer":observer, "host":host, "bug":bug, "start":(new Date(1000*dateVar.start)), "end":(dateVar.end==null?' the end.':(new Date(1000*dateVar.end)))} 
             } 
           } 
          } 
         } 

         console.log ("host keys " + hostKeys); 

         var overviewVars = ['Congestion','Highlatency','LownumOIO']; 
         var overviewSpaceVars = ['Congestion','High latency','Low numOIO']; 
         for (var i in overviewVars) { 
          console.log (overviewVars[i]); 
          $('#' + overviewVars[i] + 'Content').append ('<p>There are' + ((bugTracker[overviewSpaceVars[i]])?' errors in ':' no errors in ') + overviewVars[i] + '.</p>'); 
          $('#' + overviewVars[i] + 'Content').append ('<button type=\"button\" class=\"btn\" onclick=\"displayRanges('+overviewSpaceVars[i]+')\">View Bug Ranges</button>'); 
         } 

         function displayRanges (bug) { 
          $('#chooseBug').val(bug); 
         } 

         //console.log(bugsCounter); 
         for (var i = 1; i <= numObservers; i++) { 
          $('#links').append('<a href=\"#observer' + i + '\">Observer ' + i + ' </a>'); 
          if (i != numObservers) { 
           $('#links').append(' - '); 
          } 
         } 
         $scope.hostsS = hosts; 
         $scope.bugsS = bugs; 
         $scope.observersS = observers; 
         $scope.JSONbugsList = JSONbugsList; 
         $scope.hostKeys = hostKeys; 
         $scope.observerKeys = observerKeys; 
         $scope.start = 'start'; 
         $scope.end = 'end'; 
        }); 


       }); 

      </script> 

      <hr> 


     </div> 

Answer 1

getJSON不是一個角調用，因此觸發沒有消化的週期，因此從來沒有更新您的看法。因此，將Angular和jQuery混合使用並不是一個好主意。 Angular附帶了jqLit​​e - jQuery函數的一個較小的子集。

你的數據呼叫應該使用$http保持消化週期內 - 一個快速的解決辦法是打電話給$scope.$apply()你的代碼觸發消化週期結束，但是重構使用角度的依賴將是最好的選擇行動。