Attempting to steer clear of using $scope within my controller function, I have instead chosen to use
var viewModel = this;
employing the "controller as" viewModel syntax. The issue at hand is that while I can access data from a service, invoking functions seems to be problematic.
//Controller
(function () {
'use strict';
angular
.module('app')
.controller('GeneralSettingsController', GeneralSettingsController);
GeneralSettingsController.$inject = ['SimulationService'];
function GeneralSettingsController(SimulationService) {
var viewModel = this;
viewModel.SimulationService = SimulationService;
viewModel.setSimulationPeriod = setSimulationPeriod;
function setSimulationPeriod() {
console.log("Entered local setSimulationPeriod");
viewModel.SimulationService.setSimulationPeriod();
}
}
})();
The controller is initialized in a directive specifying the controller and controllerAs: 'viewModel'
This is how my HTML code looks:
<div class="col-xs-2">
<input type="text" class="form-control" id="startyear" name="startyear" placeholder="start year"
autocomplete="off" value="2017" maxlength="4"
ng-model="viewModel.SimulationService.data.simulationPeriodStart" ng-change="viewModel.setSimulationPeriod">
</div>
Prior to referencing the controller, calling functions was seamless by utilizing $scope. However, I believe there could be a better way to achieve this without reverting back to $scope. Is it possible to still call a function with ng-change while using viewModel?