Menu
New to AngularJS (and JavaScript frankly), but from what I've gathered, explicit calls to $scope.$apply() are only needed when changes happen outside of angular's radar. The code below (pasted in from this plunker) makes me think it wouldn't be a case where the call is required, but it's the only way I can get it to work. Is there a different approach I should be taking?
index.html:
<html ng-app="repro">
<head>
...
</head>
<body class="container" ng-controller="pageController">
<table class="table table-hover table-bordered">
<tr class="table-header-row">
<td class="table-header">Name</td>
</tr>
<tr class="site-list-row" ng-repeat="link in siteList">
<td>{{link.name}}
<button class="btn btn-danger btn-xs action-button" ng-click="delete($index)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</table>
</body>
</html>
script.js:
var repro = angular.module('repro', []);
var DataStore = repro.service('DataStore', function() {
var siteList = [];
this.getSiteList = function(callback) {
siteList = [
{ name: 'One'},
{ name: 'Two'},
{ name: 'Three'}];
// Simulate the async delay
setTimeout(function() { callback(siteList); }, 2000);
}
this.deleteSite = function(index) {
if (siteList.length > index) {
siteList.splice(index, 1);
}
};
});
repro.controller('pageController', ['$scope', 'DataStore', function($scope, DataStore) {
DataStore.getSiteList(function(list) {
$scope.siteList = list; // This doesn't work
//$scope.$apply(function() { $scope.siteList = list; }); // This works
});
$scope.delete = function(index) {
DataStore.deleteSite(index);
};
}]);
598
setTimeout(function() { callback(siteList); }, 2000);
This line will take you outside of Anglar's digest loop. You can simply replace setTimeout with Angular's $timeout wrapper (you can just inject it into your DataStore service), and you won't need $scope.$apply.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
