角度1.5の片方向結合の使い方は？時計の代替品ですか？

Question

Component.HTMLファイル：

<div> 
    <table class="table table-bordered table-responsive"> 
    <thead> 
<tr> 
    <th>Company</th> 
    <th>Stock Price</th> 
    <th>Last Updated Time</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="list in model.myLists"> 
    <th>{{list.company}}</th> 
    <td>{{list.stockPrice}}</td> 
    <td>{{list.lastUpdateTime}}</td> 
</tr> 
</tbody> 
</table> 
</div> 

これはcomponent.jsファイルです：

(function() { 
"use strict"; 
var module = angular.module("stockdApp"); 

// Global variables 
var stockList = []; 

function getStocks (model) { 
// api gets stock values every 2 seconds and saves it to stockList variable 
stockList = newList; 
model.myLists = stockList; 
} 
function controller($http) { 
var model = this; 
model.$onInit = function() {  
     getStocks(model);    
} 

model.$onChanges = function (changes) { 
    console.log("channges",changes);   
}; 
}; 

module.component("stocks", { 
    templateUrl: "./stock.component.html", 
    controllerAs: "model", 
    controller: ["$http", controller], 
    bindings: { 
     myLists: "<" 
    } 
}); 
}()); 

私は2秒ごとに新しいデータを取得するAPI呼び出しを持っていると私は私が手にするたびに私のテーブルを更新したいです新しいデータ私はAngular 1.5を使用していますが、テーブルの更新方法がわかりません。

Answer 1

あなたが最初の配列の参照を変更している

stockList = newList; 
model.myLists = stockList; 

を行うと。 あなたがする必要があるのは、myListからアイテムを削除し、参照を保持しながら新しいアイテムを追加することです。

このような何か：。

(function() { 
"use strict"; 
var module = angular.module("stockdApp"); 

function getStocks ($http, model) { 
    // Modify to fit your case... 
    $http.get(....).then(function(newList) { 
     // Empty the array and add the new items while keeping the same refernece 
     model.myLists.length = 0; 
     newList.forEach(function(newElment) { model.myLists.push(newElment); }); 
    }); 
} 
function controller($http) { 
var model = this; 
model.myLists = []; 

model.$onInit = function() {  
     getStocks($http, model);    
} 

model.$onChanges = function (changes) { 
    console.log("channges",changes);   
}; 
}; 

module.component("stocks", { 
    templateUrl: "./stock.component.html", 
    controllerAs: "model", 
    controller: ["$http", controller], 
    bindings: { 
     myLists: "<" 
    } 
}); 
}()); 

Answer 2

たぶん、あなたは$スコープを使用することができます$（適用）}

function getStocks (model) { 
    $scope.$apply(function(){ 
    stockList = newList; 
    model.myLists = stockList; 
}); 
} 

あなたは、モデルの内容は、得たことをブラウザに伝えるその方法更新しました。