HTML Template:
I have an element in the template file seats.tpl.html like this:
<select id="guest_table">
<option tables="emptySeats"
ng-repeat="table in emptySeats" value="{{table.tableId}}">{{table.tableNumber}}</option>
</select>
Controller:
In the controller, I use a factory to retrieve values from the database. I then load the results into the $scope.emptySeats array, which is used in the template with ng-repeat to display the data:
factP3_GetEmptyChairs.getEmptyChairs({'data': {'id': 58}})
.then(function (result) {
**$scope.emptySeats = result.data;**
$log.info("Empty chairs list loaded.");
},
function (result) {
$('.loading').hide();
$log.error("Error: we could not get Empty seats list.");
});
Directive:
In my directive, I utilize the parameter templateUrl to load the template file and display the select element. However, I am facing an issue where the values are not updating automatically when the $scope.emptySeats array changes:
.directive('emptySeats',function(){
return {
restrict: 'AE',
replace: true,
scope:{tables :'='},
templateUrl: function(){
return 'assets/modules/part3/templates/emptySeats.tpl.html';
},
link:function(scope, element, attrs) {
//bind change on element
element.bind('change', function() {
alert("table changed");
});
}
}
The problem arises when the $scope.emptySeats array values are updated and do not reflect in the select element. Is there something missing in the directive such as compile, observe, or ngmodel? Can anyone provide assistance?
UPDATE: I implemented a function to fetch new data from the database and update the select element accordingly.
$scope.onClickHall = function (hall) {
var tmp = [];
//call service to load empty Seats
factP3_GetEmptyChairs.getEmptyChairs({'data': {'id': $scope.currentHall}})
.then(function (result) {
//$scope.emptySeats = result.data;
A: If I use $apply here, I encounter the error: $rootScope:inprog Action Already In Progress
$scope.$apply(function () {
$scope.emptySeats = result.data;;
});
tmp = result.data; //I use a temporary array to pass it on timeout
$log.info("Empty chairs list loaded.");
},
function (result) {
$('.loading').hide();
$log.error("Error: we could not get Empty seats list.");
});
B. If I use $timeout function and try to change the data, nothing happens
$timeout(function() {
$scope.$apply(function () {
$scope.emptySeats = tmp;
});
}, 10);
}