角度變量未綁定到視圖，但已在日志中更新

Question

這是我遇到過的最煩人的問題。

我的html代碼段 ：

    <!--test_management.html-->
    <div ng-controller="TestCtrl as tcl">
    <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab">Populated Tests</a></li>
    <li><a href="#pane2" ng-click="loadOnAdditionalData()" data-toggle="tab">Additional Testing</a></li>
    <li><a href="#pane6" ng-click="loadJenkinsData()" data-toggle="tab">Jenkins Jobs</a></li>
    </ul>
    <div class="tab-content" ng-controller="TestCtrl">
    <div id="pane1" class="tab-pane active">
    <ul class="nav nav-tabs">
    <br />
    <button type="button" ng-click="runTests()" class="btn btn-primary active">Run Tests</button>
    <button type="button" ng-click="toggleRunModal()" class="btn btn-primary active">Check Run Status</button>
    <br />
    <br />
      <li class="active"><a href="#pane3" data-toggle="tab">Selected Tests</a></li>
      <li><a href="#pane4" data-toggle="tab">NextGen Tests</a></li>
      <li><a href="#pane5" data-toggle="tab">Default Tests</a></li>
      </ul>
      <div class="tab-content">
    <div id="pane3" class="tab-pane">
    <table class="table">
    <thead>
    <tr>
    <th>Test Name</th>
    <th>Set CPD Flag</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="test in populated_tests_data" class="info">
    <th>[[test]]</th>
    <th><md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model='set' ng-change="addTestToRunlist(test)">
    </md-switch></th>
    </tr>
    <tr ng-repeat-end></tr>
    </tbody>
    </table>
    </div>
<div id="pane4" class="tab-pane">
<table class="table">
<thead>
<tr>
  <th>Test Name</th>
  <th>Set CPD Flag</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in nextgen_list[current_pr]" class="info">
  <th>[[test]]</th>
  <th><md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model='set' ng-change="addTestToRunlist(test)">
  </md-switch></th>
</tr>
<tr ng-repeat-end></tr>
</tbody>
</table>
</div>
<div id="pane5" class="tab-pane">
<table class="table">
<thead>
<tr>
  <th>Test Name</th>
  <th>Set CPD Flag</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
  <div id="pane2" class="tab-pane">
    <br />
    <md-switch class="md-primary" ng-model="granularityLevel" aria-label="Switch 2" ng-true-value="true" ng-false-value="false" ng-change="loadOnAdditionalData(page_no_tests)"><label>Show test level granularity</label></md-switch>
  <br />
      <md-autocomplete flex md-selected-item="selectedTest" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display" md-floating-label="Search Test Feature Name">
    <md-item-template>
      <span md-highlight-text="searchText">[[item.display]]</span>
    </md-item-template>
    <md-not-found>
      No matches found.
    </md-not-found>
  </md-autocomplete>
  <center>
  <table>
  <tr>
  <th>
   <button ng-click="previousPageTests()" class="btn btn-default">&nbsp;&laquo;&nbsp;</button>
   </th>
   <th>
     &nbsp;&nbsp;[[page_no_tests]] / [[test_feature_name_pages]]&nbsp;&nbsp;
   </th>
   <th>
     <button ng-click="nextPageTests()" class="btn btn-default">&nbsp;&raquo;&nbsp;</button>
   </th>
   </tr>
   </table>
   </center>
  <!--<md-progress-circular md-mode="indeterminate" ng-show="progress_on" md-diameter="50"></md-progress-circular>-->
    <treecontrol class="tree-classic"
   tree-model="testDataWithBranch"
   options="treeOptions"
   on-selection="updateTestData(node)"
   selected-node="node1"
   >
   [[node.name]]
  </treecontrol>
  <br /><br />
  <center>
  <table>
  <tr>
  <th>
   <button ng-click="previousPageTests()" class="btn btn-default">&nbsp;&laquo;&nbsp;</button>
   </th>
   <th>
     &nbsp;&nbsp;[[page_no_tests]] / [[test_feature_name_pages]]&nbsp;&nbsp;
   </th>
   <th>
     <button ng-click="nextPageTests()" class="btn btn-default">&nbsp;&raquo;&nbsp;</button>
   </th>
   </tr>
   </table>
   </center>
</div>
<div id="pane6" class="tab-pane">
  [[tcl.jenkins_jobs_data]]
</div>
  </div>
  </div>
  </div>

app.js（內部TestCtrl控制器。）

$scope.loadJenkinsData = function(){
  $scope.jenkins_jobs_data = [];
  $http.get("/jenkins_jobs_by_product/ESX").then(
    function(response){
  $scope.jenkins_jobs_data = response.data;
  console.log($scope.jenkins_jobs_data);
} );
};

現在，當打開選項卡並執行loadJenkinsData時，在我的日志中，我可以看到數據已正確打印，表明$ scope.jenkins_jobs_data已成功更新。

但是在html頁面上，它會打印一個空數組，該數組應該獲取jenkins_jobs_data的值。

我之前寫過類似的代碼，並且已經奏效。 為什么有什么不同？ 在調試或解決此問題方面的任何建議將不勝感激。

PS：我嘗試在loadJenkinsData（）的末尾使用$ scope。$ apply（），但它沒有幫助。

Answer 1

這是一個帶一個plunker 工作示例 。 我創建了一個虛擬ESX文件，其中包含字符串“ ESX中的某些數據”。

可能是范圍問題，$ scope函數（響應）與loadJenkinsData不同。 嘗試

$scope.loadJenkinsData = function(){
  var myscope = $scope;
  myscope.jenkins_jobs_data = [];
  $http.get("/jenkins_jobs_by_product/ESX").then(
    function(response){
  myscope.jenkins_jobs_data = response.data;
  console.log(myscope.jenkins_jobs_data);
} );
};

為了避免這些問題，我將“ this”放在“ vm”之類的變量中：

var vm = this;
vm.loadJenkinsData = function(){
  vm.jenkins_jobs_data = [];
  $http.get("/jenkins_jobs_by_product/ESX").then(
    function(response){
  vm.jenkins_jobs_data = response.data;
  console.log(vm.jenkins_jobs_data);
} );
};

讓我們知道

我還更改了HTML以使用Controller作為構造：

<body ng-controller="MainCtrl as vm">
  <p>Hello {{vm.name}}!</p>
  <li><a href="#pane6" ng-click="vm.loadJenkinsData()" data-toggle="tab">Jenkins Jobs</a></li>
  <div id="pane6" class="tab-pane">
    {{vm.jenkins_jobs_data}}
  </div>
</body>

Answer 2

試試Gregori的第二個片段並修改您的視圖

<div ng-controller="TestCtrl as ctrl">
...
...
 <li><a href="#pane6" ng-click="ctrl.loadJenkinsData()" data-toggle="tab">Jenkins      Jobs</a></li>
 ...
 ...
<div id="pane6" class="tab-pane">
  {{ctrl.jenkins_jobs_data}}
</div>
...

試試吧 ：）