角度変数はビューにバインドされていませんが、ログに更新されます

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コントローラ）タブが開かれ、loadJenkinsDataは私のログに、実行され

$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); 
}); 
}; 

今I $ scope.jenkins_jobs_dataが正常に更新されたことを示すデータが正確に出力されていることがわかります。

しかし、htmlページでは、jenkins_jobs_dataの値を取得するはずの空の配列が表示されます。

私はこれまで同様のコードを書いています。なぜこれは違うのですか？この問題をデバッグしたり解決したりすることについては、大変感謝しています。

P .:私はloadJenkinsData（）の最後に$ scope。$ apply（）を使用しようとしましたが、助けにはなりませんでした。

Answer 1

ここにはworking exampleのプラカードがあります。私は文字列 "ESXのいくつかのデータ"を含むダミーのESXファイルを作成しました。

おそらくスコープの問題です。$ scopeはloadJenkinsDataとは機能（応答）が異なります。

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); 
}); 
}; 

私たちを知ってみましょう：私は "これは" "VM" のような変数に入れ、

$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); 
}); 
}; 

は、これらの問題を避けるようにしてください。

<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

<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> 
... 

はそれを試してみてください:)