Reputation: 527
I know similar questions have been asked but they don't apply to my case. I have defined some variables in my controller and display their values in a panel. My controller related to the part is like this:
var vm = this;
vm.wellId = "id";
vm.wellSeq = "sequence";
vm.onWellSelected = onWellSelected;
...
function onWellSelected(wells) {
...
vm.wellId = wells[0]["id"];
vm.wellSeq = wells[0]["sequence"];
...
}
and my html component is like this:
<div plate id="plate-layout"
on-well-selected="vm.onWellSelected(wells)">
</div>
<ul class="list-group" style="width: 400px; overflow: auto">
<li class="list-group-item">{{vm.wellId}}</li>
<li class="list-group-item">{{vm.wellSeq}}</li>
</ul>
I checked the source and set break points in the function onWellSelected: vm.wellId and vm.wellSeq are indeed changed to the correct values after the operation, but the new value cannot be displayed. The definition of plate involves quite a number of other js files so not easy to show here, but plate itself is a directive, with support from two services. What could be the reasons? Thanks!
Upvotes: 3
Views: 6302
Reputation: 527
Sorry I'm new to Angular so took me a while to find this:
$scope.$apply();
Put it after the modification part and then the value is updated on the page.
EDIT:
Just a follow-up: if use this: $scope.$apply() or $scope.$digest(), then I'll get this error: $digest already in progress; but if I remove it, the value won't get updated. So I refer to this post here: Prevent Error, and now it's working fine without the error message. Hope this can help those facing the same issue.
Upvotes: 7
Reputation: 6965
var app = angular.module('myApp', []);
app.controller("myCtrl", function () {
var vm = this;
vm.wellId = "id";
vm.wellSeq = "sequence";
vm.onWellSelected = function (wells) {
vm.wellId = wells[0]["id"];
vm.wellSeq = wells[0]["sequence"];
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl as vm">
<span>{{vm.wellId}}</span>
<span>{{vm.wellSeq}}</span>
<button ng-click="vm.onWellSelected([{id: 'new id', sequence: 'new sequence'}])">Select Well</button>
</div>
</div>
Upvotes: 1