In this angular ng-click event, I have the following code:
eventApp.controller('DetailEventController', ['$scope', '$http', '$compile', '$timeout', function ($scope, $http, $compile, $timeout, uiCalendarConfig) {
$scope.customRule = { isReadOnly: true, isRegistered: false };
$scope.EventClick = function (event, jsEvent, view) {
var isRegistered;
console.log(event.character);
angular.forEach(event.character, function (pvalue, pkey) {
for (var item in pvalue.teilnehmer) {
if (pvalue.teilnehmer[item] == CurrenUserName) {
console.log("User is already registered!");
isRegistered = true;
} else {
console.log("User is not yet registered!");
isRegistered = false;
}
}
});
$scope.customRule.isRegistered = isRegistered;
console.log($scope.customRule);
$scope.eventDetails = event;
$("#detailEvent").css("display", "block");
};
}]);
When inspecting the console, $scope.customRule shows the correct value of "true".
User is already registered!
Object { isReadOnly: false, isRegistered: true }
However, on my View it still displays "false".
HTML:
<div class="modal-footer">
{{customRule}}
<button title="Register" class="btn btn-primary pull-right" ng-click="register(eventDetails.id,radio.class.klasse2Event_Id)" ng-disabled="customRule.isReadOnly || customRule.isRegistered">Register</button>
<button title="Delete" class="btn btn-primary pull-right" ng-click="removeEvent(eventDetails.id)" ng-disabled="customRule.isReadOnly">Delete Event</button>
</div>The View does not reflect the updated scope. Can you explain why?
I have read about the angular apply function, but I don't believe it will solve my issue. When I try to use apply after the update:
$scope.customRule.isRegistered = isRegistered;
$scope.$apply();
I encounter the following error
EDIT: Surprisingly, I managed to resolve the issue:
Instead of initializing custom rules, I now directly initialize one value (isRegistered) after the click event.
Before: $scope.customRule.isRegistered = isRegistered;
After: $scope.isRegistered = isRegistered;
$scope.EventClick = function (event, jsEvent, view) {
var isRegistered;
var testi;
angular.forEach(event.character, function (pvalue, pkey) {
for (var item in pvalue.teilnehmer) {
if (pvalue.teilnehmer[item] == CurrenUserName) {
console.log("User is already registered!");
isRegistered = true;
testi = "TRUE";
} else {
console.log("User is not yet registered!");
isRegistered = false;
testi = "FALSE";
}
}
});
$scope.isRegistered = isRegistered;
$scope.eventDetails = event;
console.log($scope.customRule);
//$scope.eventDetails = event;
$("#detailEvent").css("display", "block");
};