In my current setup, I have a controller that consists of one main object containing various functions.
Initially, default values for variables are set and the init() function is used to fetch data from the database.
Everything on the page seems to be functioning correctly except for one issue. Whenever I trigger the ng-click event to remove an item from the chosen list,
<a href="#" ng-click="listCtrl.removeFromChosen(chosen)" class="tagselect__close">
<span class="glyphicon glyphicon-remove remove-icon" aria-hidden="true"></span>
</a>
The entire controller gets re-initialized, resetting all values to default and calling the init() function again. It's puzzling why this behavior occurs.
"use strict";
myApp.controller('ListCtrl', ['$scope', '$cookies', '$http', function ($scope, $cookies, $http) {
var listCtrl = {
candidate: {},
candidates: [],
positions: [],
chosenPositions: [],
init: function () {
listCtrl.getCandidates();
listCtrl.getPositions();
},
getCandidates: function () {
$http.get('api/v1/candidates/getCandidates.php').then(function (res) {
listCtrl.candidates = res.data;
});
},
getPositions: function () {
$http.get('api/v1/positions/getPositions.php').then(function (res) {
listCtrl.positions = res.data;
});
},
removeFromChosen: function (position) {
var index = listCtrl.getChosenIndex(position);
listCtrl.chosenPositions.splice(index, 1);
//console.log(listCtrl.chosenPositions);
},
};
listCtrl.init();
$scope.listCtrl = listCtrl;
}]);
Does anyone have any insights into what might be causing this unexpected behavior?