Legion Legion - 6 months ago 11
Javascript Question

Angular stops working when injecting a factory

I have a resolve that I inject services and factories into. When I inject a factory I just made called ValidationMatrixFactory nothing works anymore. The homepage loads but links no longer resolve, basically clicking on anything has no effect. Angular does not throw any errors. Everything just stops working. I've tried multiple browsers, restarting IIS, all to no effect.

The console.log statement in the resolve is never hit. Here's the resolve:

resolve: {
eventData: ['$http', '$stateParams', 'ViewMatrixService', 'ValidationMatrixFactory', function ($http, $stateParams, ViewMatrixService, ValidationMatrixFactory) {
console.log('EventId: ' + $stateParams.eventId);
return $http.get('http://localhost:10569/api/eventView/' + $stateParams.eventId).then(function (response) {
ViewMatrixService.GenerateViewMatrix(response.data);
ValidationMatrixFactory.GenerateValidationMatrix(response.data);
return response.data;
});
}]
}


Everything works if I take out the references to ValidationMatrixFactory. ValidationMatrixFactory is very similar to ViewMatrixService so I'm not sure why it's a problem now.

Here's ValidationMatrixFactory:

angular.module('myWebApp.services')
.factory('ValidationMatrixFactory', function() {
var ValidationMatrixFactory = {};

ValidationMatrixFactory.GenerateValidationMatrix = function (eventData) {
var currentStage = eventData.CoreEvent.Stage;
initializeValidationMatrix();
determineRequiredFields(currentStage);
}

function initializeValidationMatrix() {
ValidationMatrixFactory.EventTitleRequired = false;
ValidationMatrixFactory.EventSummaryRequired = false;
ValidationMatrixFactory.DesiredPublicationDateRequired = false;
ValidationMatrixFactory.DesiredEffectiveDateRequired = false;
ValidationMatrixFactory.ReasonForDesiredEffectiveDateRequired = false;
ValidationMatrixFactory.AssessmentTargetDateRequired = false;
ValidationMatrixFactory.FRSOTargetDateRequired = false;
ValidationMatrixFactory.BLRTargetDateRequired = false;
ValidationMatrixFactory.SSOTargetDateRequired = false;
ValidationMatrixFactory.BLSOTargetDateRequired = false;
ValidationMatrixFactory.FSOTargetDateRequired = false;
ValidationMatrixFactory.PublicationTargetDateRequired = false;
ValidationMatrixFactory.EffectiveTargetDateRequired = false;
ValidationMatrixFactory.RMRequired = false;
ValidationMatrixFactory.PublisherRequired = false;
ValidationMatrixFactory.MoPRequired = false;
ValidationMatrixFactory.PriorityRequired = false;
}

function determineRequiredFields(currentStage) {
ValidationMatrixFactory.EventTitleRequired = true;
ValidationMatrixFactory.EventSummaryRequired = true;
ValidationMatrixFactory.ReasonForDesiredEffectiveDateRequired = true;
ValidationMatrixFactory.DesiredPublicationDateRequired = true;
ValidationMatrixFactory.DesiredEffectiveDateRequired = true;

if (currentStage.StageNumber > 1) {
ValidationMatrixFactory.AssessmentTargetDateRequired = true;
ValidationMatrixFactory.FRSOTargetDateRequired = true;
ValidationMatrixFactory.BLRTargetDateRequired = true;
ValidationMatrixFactory.SSOTargetDateRequired = true;
ValidationMatrixFactory.BLSOTargetDateRequired = true;
ValidationMatrixFactory.FSOTargetDateRequired = true;
ValidationMatrixFactory.PublicationTargetDateRequired = true;
ValidationMatrixFactory.EffectiveTargetDateRequired = true;
ValidationMatrixFactory.RMRequired = true;
ValidationMatrixFactory.PublisherRequired = true;
ValidationMatrixFactory.MoPRequired = true;
}

if (currentStage.StageNumber > 2) {
ValidationMatrixFactory.PriorityRequired = true;
}
}

ValidationMatrixFactory.ValidateFields = function (saveType) {

}
});


I have a reference to the script in index.html.

<script src="libraries/angular/1.4.8/angular.min.js"></script>
<script src="libraries/angular/1.4.8/angular-animate.min.js"></script>
<script src="libraries/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script src="libraries/angular-scroll/angular-scroll.min.js"></script>
<script src="libraries/uiboostrap/0.14.3/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="libraries/dirPagination/dirPagination.js"></script>
<script src="libraries/angular-loading-bar/loading-bar.js"></script>
<script src="libraries/ng-file-upload/ng-file-upload.min.js"></script>
<script src="libraries/ng-file-upload/ng-file-upload-shim.min.js"></script>
<script src="js/app.services.js"></script>
<script src="js/view.matrix.service.js"></script>
<script src="js/validation.matrix.factory.js"></script>
<script src="js/utility.service.js"></script>
<script src="js/app.controllers.js"></script>
<script src="partials/events/EventCtrl.js"></script>
<script src="partials/events/EventHeaderCtrl.js"></script>
<script src="partials/events/EventOverviewTabCtrl.js"></script>
<script src="partials/events/EventAdditionalInformationTabCtrl.js"></script>
<script src="partials/events/EventDSOTabCtrl.js"></script>
<script src="partials/events/EventFooterCtrl.js"></script>
<script src="js/nonAngular.js"></script>
<script src="js/app.js"></script>

Answer

You have to return ValidationMatrixFactoryobject from factory.

.factory is a method which we generally call with a name and a function as parameters. This function is just a function which must return an object. If you don't return anything, angular will get stuck in infinite digest.

If you used .service, it was fine to not return anything. That's because a service is a constructor function. You can have this in the service function and add property to this.