My application utilizes nested controllers following John Papa's style guide, with a controller as approach. One of the controllers manages the form for client validation and submission, while the other is responsible for handling location-related functionality in the HTML view. Specifically, it should hide the STATE input field for countries that do not have states, preventing any input from occurring.
The country selection is made using a select tag populated by a JSON translation object from a factory, and selecting English works fine. However, when certain countries are selected, the STATE input field fails to hide or disappear as intended. I suspect this issue arises because the user's click on a country in the dropdown occurs outside the $digest cycle, so I tried using $timeout() to address this but with no success. Avoiding ng-click due to double clicks being triggered (one to open the select menu and another to make the selection) poses another challenge. Moreover, the countrySelected variable remains undefined in the SelectCountryController, puzzling me further. Even though hard coding a country yields the desired outcome upon page load, user selections from the dropdown never trigger the expected behavior.
Code snippet from the HTML:
<div name="postApartment4Rent" data-ng-controller="InputFormController as cntrl">
<form id="residenceInput" name="residenceInput" data-ng-submit="cntrl.submit()">
<div id="countryAndState" data-ng-controller="SelectCountryController as vm">
<div class="boldHeading">
<p>TEST Language: {{ vm.langKey }} </p>
<p translate>COUNTRY</p>
<select data-ng-model="vm.countrySelected"
data-ng-init="vm.countrySelected = vm.countrySelected || vm.countries[0].code"
data-ng-options="country.code as country.text group by country.continent for country in vm.countries">
</select>
<p>TEST selected item is : {{vm.countrySelected}}</p>
</div>
<div id="stateProvince">
<div id="stateDiv" data-ng-hide="vm.hideState">
<p class="boldHeading" translate>STATE</p>
<input type="text" id="state" name="state" data-ng-model="cntrl.input.state" size="50" maxlength="50" />
</div>
</div>
</div>
</form>
</div>
Here's an excerpt of the Angular/Javascript code inside the SelectCountryController:
(function() { 'use strict';
angular.module('residenceApp').controller('SelectCountryController', SelectCountryController); //end of controller module
SelectCountryController.$inject = ['$translate', 'selectCountryTranslateFactory', '$timeout'];
function SelectCountryController($translate, selectCountryTranslateFactory, $timeout) {
var vm = this;
vm.langKey = {};
vm.hideState = false;
vm.countries = countries();
vm.hideState = hideStateSelector();
function countries() {
vm.langKey = $translate.use(); // Using use() as a getter
return selectCountryTranslateFactory.withLangChoice(vm.langKey);
}
function hideStateSelector() {
var countriesWithNoStates = ["AI", "AG", "AW", "BS", "BB", "BM"];
if(countriesWithNoStates.indexOf(vm.countrySelected) > -1) {
$timeout(function() {
vm.hideState = true;
angular.element('stateDiv').trigger('click');
return vm.hideState;
}, 10); //end of $timeout
}
} // End of hideStateSelector function
} // End of controller function
})();
If relevant, all these components are contained within a partial view.