I am in the process of creating a website and I would like to have a $uiModal open when there is a querystring in the URL. If there is no query string, then the modal should not open. Here is the code snippet:
myApp.controller('jobObjectiveController', ['$scope', '$http', '$uibModal', 'EmployeeObjectiveService', '$routeParams', function ($scope, $http, $uibModal, EmployeeObjectiveService, $routeParams) {
$scope.init = function () {
$scope.AddButton = 'Save';
$scope.isProcessing = false;
$scope.UpdateButton = 'Update';
}
var id = $routeParams.id;
var items = [];
for (i = 0; i <10; i++) {
items[i] = i;
}
$scope.test = items;
$scope.Objective = {
Title: '',
KPI: '',
Target: '',
Weight: '',
Note:''
}
$scope.init();
//Column Selection
EmployeeObjectiveService.GetObjectiveColumnList().then(function (response) { $scope.ColumnList = response.data });
EmployeeObjectiveService.GetObjectiveSeletedColumnList().then(function (response) { $scope.SelectedColumn = response.data });
EmployeeObjectiveService.GetObjectiveSeletCol().then(function (response) { $scope.selectCol = response.data});
//Change Events for Multiple dropdown
$scope.changeEvents = {
onItemSelect: function (item) {
changeColumnViewShow(item);
},
onItemDeselect: function (item) {
changeColumnViewShow(item);
}
};
function changeColumnViewShow(item) {
if (item.id == 1) {
$scope.selectCol.Code = !$scope.selectCol.Code;
} else if (item.id == 2) {
$scope.selectCol.Title = !$scope.selectCol.Title;
} else if (item.id == 3) {
$scope.selectCol.KPI = !$scope.selectCol.KPI;
} else if (item.id == 4) {
$scope.selectCol.Target = !$scope.selectCol.Target;
} else if (item.id == 5) {
$scope.selectCol.Weight = !$scope.selectCol.Weight;
} else if (item.id == 6) {
$scope.selectCol.Note = !$scope.selectCol.Note;
} else if (item.id == 7) {
$scope.selectCol.Status = !$scope.selectCol.Status;
}
}
//Multiple Dropdown Config
$scope.dropConfig = {
scrollable: true,
scrollableHeight: '200px',
showCheckAll: false,
showUncheckAll: false
}
//Group by Pending and Approve
EmployeeObjectiveService.getGroupItem().then(function (response) { $scope.GroupBy = response.data });
//Open Modal for Add Objective
$scope.addObjective = function () {
var modalInstance = $uibModal.open({
templateUrl: '/View/Modal View/addObejective.html',
controller:'jobObjectiveController',
scope: $scope,
size: 'lg'
});
}
//Open Modal for View Objective
$scope.viewObjective = function (data) {
var modalInstance = $uibModal.open({
templateUrl: '/View/Modal View/ObejectiveModal.html',
controller: 'jobObjectiveController',
scope: $scope,
size: 'lg',
});
}
//Open Modal for Update Objective
$scope.updateObjective = function (data) {
$scope.Object = {
Title: 'xgdsg',
KPI: 'sgsg',
Target: 'sgsg',
Weight: 'sgsgggggg',
Note: data
}
var modalInstance = $uibModal.open({
templateUrl: '/View/Modal View/updateObejectiveModal.html',
controller: 'jobObjectiveController',
scope: $scope,
size: 'lg'
});
}
//Add the Objective
$scope.AddObjective = function (data) {
$scope.AddButton = 'Saving...';
$scope.isProcessing = true;
if (!data) {
alert("Submitting...");
$scope.init();
}else
$scope.init();
}
//Update Objective
$scope.UpdateObjective = function (data) {
$scope.UpdateButton = 'Updating...';
$scope.isProcessing = true;
if (!data) {
alert("Submitting...");
$scope.init();
} else
$scope.init();
}
if (id != null) {
$scope.viewObjective(id);
}
While testing the code with a querystring, the following errors are displayed:
TypeError: Cannot read property 'length' of undefined
at m.$scope.getButtonText (angularjs-dropdown-multiselect.min.js:1)
at fn (eval at compile (angular.min.js:1001), <anonymous>:4:230)
at angular.min.js:534
at m.$digest (angular.min.js:600)
at m.$apply (angular.min.js:610)
at l (angular.min.js:397)
at J (angular.min.js:417)
at XMLHttpRequest.t.onload (angular.min.js:420)