Encountering an issue with a feature in AngularJS, the scenario is as follows:
A controller and directive are defined like this:
helpers.directive('someEvent', function() {
...
scope: {
api: '='
}
...
controller: ['$scope', function($scope) {
$scope.hasSomeEventOccured = function(){
return booleanVariable
};
$scope.api = {
hasSomeEventOccured: $scope.hasSomeEventOccured
}
}]
});
In another controller, trying to access the hasSomeEventOccured function...
the controller setup looks like this:
moduleName.controller('moduleSomethingController',
['$scope', '$state', 'moduleRepository', function ($scope, $state, moduleRepository) {
$scope.theEventOccured = $scope.someEventApi.hasSomeEventOccured();
}]);
Within the cshtml file there are:
<some-event api="someEventApi" ></some-event>
<div ng-if="theEventOccured"></div>
An occasional error occurs where $scope.someEventApi is undefined.
Thus breaking:
It seems to be happening because the call to $scope.theEventOccured = $scope.someEventApi.hasSomeEventOccured();hasSomeEventOccured within the moduleSomethingController happens before the binding with someEvent is completed.
The question now is how to resolve this issue?
Although in a directive you might have something like:
link: function(scope, element, attrs) {
attrs.$observe(...);
}
How can one ensure completion of the binding process in this particular scenario?