javascript - AngularJS 没有使用我的 Controller 中 $scope 变量的更新值

Question

我已在下面粘贴了我的代码的相关片段。 我知道基本的 angularJS 正在工作，因为 HTML 文档不显示 {{}} 变量，但我得到的是空白。

我相信这是因为它获得了变量的空值。当我在 Controller 内执行一些 console.log 表达式时，我可以看到该值相应更新，但在 Controller 外则不同。

代码:

 <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 调用，因此不会触发摘要周期，因此永远不会更新您的 View 。因此，混合 Angular 和 jQuery 并不是一个好主意。 Angular 附带了 jqLit​​e - jQuery 函数的较小子集。

您的数据调用应该使用 $http 来保持在摘要周期内 - 一个快速的解决方法是在结束时调用 $scope.$apply()您的代码触发摘要周期，但是重构以使用 Angular 依赖项将是最佳操作选择。