Reputation: 602
i have this code and i can't see where is the source of problem, i don't get any error in the chrome console my controller :
function notifController($scope) {
$scope.refreshMsgs = function () {
$.post("notification-center-trait.aspx")
.success(function (data) {
$("#loadedthings").html(data);
newMsgs = JSON.parse($("#label1").html());
$scope.msgs = newMsgs;
});
}
$scope.refreshMsgs();
}
label1
and label2
are loaded correctly inside a div loadedthings;
newMsgs in the console is parsed just the way it should;
i had it working for other pages but it seems that i missed something on this one.i have <html ng-app>
tag :
<div ng-controller="notifController">
<div class="row">
{{msgs.length}} new msgs :
<table class="table">
<tbody >
<tr ng-repeat="msg in msgs">
<td>
{{msg.sender}}
</td>
<td>
{{msg.message}}
</td>
<td>
{{msg.date}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
i get 'undefined' in the console when i execute this : angular.element($0).scope()
Upvotes: 12
Views: 13301
Reputation: 43795
Disregarding other architectural issues I pointed out in the comments, the real issue is that you're using jQuery
's ajax
instead of Angular's $http
. When you don't do things like that through Angular, you're working outside of Angular's scope and it doesn't know about changes. While not ideal, you can use $scope.$apply
to let angular know something was updated outside of its knowledge. That would look like this:
$scope.$apply(function() {
$scope.msgs = newMsgs;
});
That is telling Angular that you've modified something it needs to know about from a context that it doesn't know about (the jQuery ajax call in this case).
There are some valid uses of $scope.$apply()
, such as in event handlers, but most other times it is a sign of bad practices. You should definitely be using Angular's $http
for ajax calls.
Upvotes: 25