I have encountered a small issue while using md-dialog from Material Design that is causing me some trouble.
The dialog serves as a form for creating a new record in the database, and I need its controller to be loaded from an external file. This is because I am utilizing the same dialog in multiple places within the app (in various other controllers) and I want to avoid duplicating it in each one.
I attempted to write it as a service, but ran into a problem when binding data from the form to the controller using $scope, resulting in a "$scope is not defined" error. When I added $scope as a dependency in that service, I encountered an injection error. Do you have any suggestions on how to load the modal controller externally so that it works seamlessly with the use of $scope?
$scope.showNewContactDialog = function($event) {
var parentEl = angular.element(document.body);
$mdDialog.show({
parent: parentEl,
targetEvent: $event,
templateUrl: 'app/Pages/directory/contacts/newContact.dialog.html',
controller: NewCompanyContactDialogCtrl,
clickOutsideToClose: true,
hasBackdrop: true
});
};
// New User dialog controller
function NewCompanyContactDialogCtrl($scope, $mdDialog) {
var self = this;
$scope.modalIcon = "add";
$scope.modalTitle = 'Nová položka';
$scope.modalAdvanced = true;
// Country Selector
apiCalls.getData(countryUrl, function(response){
$scope.countries = response;
})
// Add New Object
$scope.newItem = function() {
var url = baseUrl + 'new/';
var data = JSON.stringify({
code: $scope.newItem.contactCode,
first_name: $scope.newItem.contactFirstName,
last_name: $scope.newItem.contactLastName,
street: $scope.newItem.contactStreet,
city: $scope.newItem.contactCity,
country: $scope.newItem.contactCountry,
postal: $scope.newItem.contactPostal,
pobox: $scope.newItem.contactPobox,
price_lvl: $scope.newItem.contactPriceLvl,
orgid: $cookies.get('orgid')
});
apiCalls.postData(url, data, function(response){
console.log(response);
// Toast
if(response.status == 201){
$mdToast.show(
$mdToast.simple()
.textContent('Záznam bol vytvorený.')
.position('bottom right')
.action('Skryť')
.highlightAction(true)
.highlightClass('md-warn')
);
$mdDialog.cancel();
}
});
}