I have written a directive that as part of the functionality, reads a dropdown menu and passes the value back to an API. After investigating the network information, I've determined it's not detecting the change in values, and is always just passing the default value of "none". Unfortunately I cannot set up a demo of it, but I was hoping someone could look at my code snippet below and tell me where my error might lie. Thank you all so much in advance.
JS:
angular.module('web')
.directive('alertSettingsPanel', function (config, $window, moment, $timeout, $http, SimpleModal) {
'use strict';
return {
restrict: 'E',
scope: {
filter: '=alertSettingsPanel',
department: '='
},
templateUrl: config.moduleRoots['web'] + '/AlertSettings/templates/partial.alertSettingsPanel.min.html',
link: {
pre: function (scope) {
console.dir(scope);
//initialize save text
scope.saved = "Save Filter";
scope.validate = false;
// Collapse the body if not new
scope.UICollapseBody = scope.filter.id === 'new';
scope.UIBodyExpanded = scope.UICollapseBody;
/**
* Toggles the display of the body
*/
scope.UIToggleBody = function () {
var nextCollapse = !scope.UICollapseBody;
scope.UICollapseBody = nextCollapse;
$timeout(function () {
scope.UIBodyExpanded = nextCollapse;
}, 300);
};
//sends filter data to API for saving
scope.save = function(){
scope.saved = "Saving...";
if(scope.filter.id === 'new'){
$http.post(config.apiBase + 'users/me/shifts/' + scope.$parent.shifts[scope.$parent.selectedShiftIndex].id + '/filters', {
sendFollowup: scope.filter.sendFollowup,
alert: {fileName: "default", type: scope.filter.alert.type},
type: scope.filter.type,
description: scope.filter.description,
priority: scope.filter.priority,
value: scope.filter.value
}).then(function(response){
scope.filter.id = response.data.id;
scope.saved = "Saved!";
}, function(){
scope.saved = "Error saving";
});
}
else{
$http.put(config.apiBase + 'users/me/shifts/' + scope.$parent.shifts[scope.$parent.selectedShiftIndex].id + '/filters/' + scope.filter.id, {
sendFollowup: scope.filter.sendFollowup,
alert: {filename: scope.filter.alert.filename, type: scope.filter.alert.type},
type: scope.filter.type,
description: scope.filter.description,
priority: scope.filter.priority,
value: scope.filter.value
}).success(function(){
scope.saved = "Saved!";
}).error(function(){
scope.saved = "Error saving";
});
}
};
//Removes filter from local array
//Note: Only use when the filter no longer exists on the server
scope.uncreate = function() {
scope.$parent.uncreateFilter(scope.$parent.filters.indexOf(scope.filter));
};
//Removes filter from shift in API
scope.remove = function() {
SimpleModal.open({
title: 'Remove filter?',
body: 'Are you sure you want to remove this filter from your department?',
type: 'confirm',
buttons: {
ok: 'Yes, remove this filter',
cancel: 'Cancel'
}
}).then(function() {
//REMOVE FROM SERVER
$http.delete(config.apiBase + 'users/me/shifts/' + scope.$parent.shifts[scope.$parent.selectedShiftIndex].id + '/filters/' + scope.filter.id)
.then(
//remove locally
scope.uncreate()
);
});
};
}
}
};
});
HTML:
<form name="filtersForm" ng-submit="save()" autocomplete="off">
<div class="row">
<div class="col-md-5">
<h4><i class="fa fa-info-circle"></i> <strong>Filter Information</strong></h4>
</div>
</div>
<div class="row" style="border-top: 1px solid #ddd; padding-top: 10px">
<div class="col-md-12">
<div class="form-horizontal">
<div class="col-md-6">
<div class="form-group">
<label for="description" class="col-sm-4 control-label">Description </label>
<div class="col-sm-8">
<input ng-disabled="filter.priority<1" id="description" ng-model="filter.description" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="sendFollowup" class="col-sm-4 control-label">Followup</label>
<div class="col-sm-8">
<div class="checkbox normal-text">
<label>
<input type = "checkbox" id="sendFollowup" ng-model="filter.sendFollowup">
Send followup?
</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div job-type-search="filter" model-type="filter" validate="validate" autocomplete="off"></div>
<div class="form-group">
<label for="alertType" class="col-sm-4 control-label">Alert Type: </label>
<div class="col-sm-8">
<select class="form-control" id="alertType" ng-model="filter.alert.type" convert-to-string required>
<option value="none">No Alert</option>
<option value="silence">Vibrate Alert</option>
<option value="audio">Audio Alert</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="border-top: 1px solid #ddd; padding-top: 10px">
<div class="col-md-3 col-md-offset-4">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" ng-class="{'btn-success': saved === 'Saved!'}" ng-disabled="saved === 'Saving...' || filtersForm.$invalid || (!validate && filter.value!==null)">{{saved}}</button>
</div>
</div>
</div>
</form>
