納克重複 - 當陣列在控制器改變不更新視圖，使用控制器作爲語法

Question

我有內部控制器的以下功能：

app.controller("myCtrl", function(myServ, $scope){ 
    var ctrlScope = this; 
    ctrlScope.myData = []; 

    function getData(){ 
    myServ.getData().then(function(data){ 
     $scope.$evalAsync(function(){ 
     ctrlScope.myData = data; 
     }); 
    }); 
    } 

    getData(); // myData is initialised properly 

    ctrlScope.update = function(){ 
    // Data has already changed in backend 
    getData(); //myData inside controller is updated but ng-repeat is not able to show on the view the updated array 
    }; 
}); 

HTML：

<div data-ng-controller="myCtrl as mc"> 
    <span data-ng-repeat="d in mc.myData">{{d.name}}</span> 
    <button data-ng-click="mc.update()"> Update </button> 
</div> 

getData()即使控制器已更新數據，也會正確初始化ng-repeat，但無法更新視圖。

Answer 1

您正在更改數組的參考。這就是爲什麼數據沒有在UI中得到更新的原因。您可以更新數據如下：

function getData(){ 
    myServe.getData().then(function(data){ 
     ctrlScope.myData.length = 0; 
     ctrlScope.myData.push.apply(ctrlScope.myData, data); 
    }); 
} 

Answer 2

添加$scope().apply()

ctrlScope.update = function(){ 
     // Data has already changed in backend 
     getData(); //myData inside controller is updated but ng-repeat is not able to show on the view the updated array 

     $scope().apply(); 
     };