AngularJs:
I'm trying to show an edit modal box. For this, I'm using $mdDialog of AngularJs material design. Here is my code:
angular.module('main').controller('UserCtrl', ['$scope', function($scope){
function loadUser(){
...
}
function showEditSale(index) {
var sale = $scope.user.Sales[index];
$mdDialog.show({
clickOutsideToClose: true,
fullscreen: $scope.customFullscreen,
parent: angular.element(document.body),
locals: {
sale: sale
},
templateUrl: 'front/templates/user/edit-sale.html',
controller: 'UserSaleCtrl'
})
.then(function(answer) {
}, function() {
});
}
}]);
angular.module('main').controller('UserSaleCtrl', ['$scope', function($scope, sale){
$scope.sale = sale;
function updateSale(){
...
**Need to reload user**
}
}]);
When I click on edit button against user sale, I call showEditSale passing the index of user.Sales item. A popup is displayed and I can edit values there. When clicking on update, an api is called which is updating sale information.
The problem is I want to reload this user. To reload, I have to call function from another controller.
My questions are:
Is there another way to pass data to dialog box instead of injecting in controller?
Do I have to use emit event of AngularJs to call function of another controller?
Can I somehow use same controller? I tried but I think $scope is being reset for modal dialog.
I added following code in UserSaleCtrl:
function updateSale(){
...
$rootScope.$broadcast('reloadUser');
}
Added following code in UserCtrl:
$scope.$on('reloadUser', function(event) {
loadUser();
});
Related
I have an angular ui-router state with a controller as follows.
$stateProvider.state('contacts', {
template: '<h1>{{title}}</h1>',
controller: function($scope){
$scope.title="MyTitle";
$scope.myFunction= function(){
//do something
};
},
data:{
list:[
{
item:"item1",
callback:{{myFunction}}
}
]
}
})
As shown in the code above, the state controller has a function attached to the scope called "myFunction".
I also have a directive which accesses this state. In that directive, I want to call the myFunction as callback when item1 is clicked(i have a button corresponding to item1 mentioned in data section).
Please let me know how i can call the myFunction method from my directive.
When we are switch between one state to another state here i am able to check unsaved changes and i can ask user for conformation before moving one page to another but in a same view i have multiple forms in that if am switch between one form to another form first i have to to give message to the user are you sure u want leave page without saving the data then only i can move to another form How can i do this.
example of multiple forms in same view below i have metioned
<div ng-switch-when="formTab">
<div ng-include="'/views/tmpl/workForm.html'"></div>
</div>
<div ng-switch-when="effortTab">
<div ng-include="'/views/tmpl/workEffort.html'"></div>
</div>
In the above example while moving from formTab to effortTab i need to show that unsaved changes message
Use the $dirty property of the form:
console.log(myForm.$dirty);
Plunker
I got solution for this Instead of using ng-switch we can use nested states with the parent state.
using unsavedChanges directive we can check automatically whether any unsaved data is there in the current form. if condition matches this directive will warn the user this will work based on ui-state so it will check automatically when we are injected directive no need to do manually..
Below example
$stateProvider.state('edit', {
abstract: true,
url: '/edit',
templateUrl: 'edit.html',
controller: function($scope) {
$scope.model = {};
$scope.validator = {
basic: null,
extended: null,
isValid: function() {
return this.basic && this.extended;
}
};
}}).
state('edit.formTab', {
url: '/formTab',
templateUrl: 'formTab.html',
controller: function($scope) {
$scope.$watch('formTab.$valid', function(value) {
$scope.validator.formTab= value;
});
}}).
state('edit.effortTab', {
url: '/effortTab',
templateUrl: 'effortTab.html',
controller: function($scope) {
$scope.$watch('effortTab.$valid', function(value) {
$scope.validator.effortTab= value;
});
}});
we can use below link :
http://plnkr.co/edit/OyVBpp?p=preview
I have a ion-view that shows a list of items in a modal. I want to dismiss the modal once I select an item. I have associated the modal template with a controller using an ng-controller attribute.
How do I dismiss the modal form inside the controller where I will be getting click events ?
try like this
$scope.modal.hide();
If you are using multiple modals, give different names to scope variables..
$ionicModal.
fromTemplateUrl('example.html', {
scope: $scope,
animation: 'slide-in-up' }).
then(function(modal) {
$scope.exmapleModal = modal;
$scope.exmapleModal.show();
$scope.closeExample = function() {
$scope.exmapleModal.hide();
$scope.exmapleModal.remove();
};
});
Close the modal the same name as
$scope.closeExample();
What is the best way to pass a function to an angular ui bootstrap modal dialog? I created a method in my modal controller that calls $scope.$parent.myMethod() like so:
$scope.isChosen = function(concept) {
return $scope.$parent.isChosen(concept);
};
This works, but I would rather pass the function to the modal in a similar way to how functions are passed to directives. I've tried to use the modal "resolve" parameter to do this but without success. Is it possible to resolve a function for a modal, and if so, what is the syntax? If not possible, is there any other way to do this other than accessing the parent scope?
Edit: Here is a plunk attempting to pass a method to a modal, it is a little simplified but represents what I'm trying to do: http://plnkr.co/edit/eCjbZP
When you are defining your modal , you must resolve like this :
// here is the controller where you want to trigger the modal to open
$scope.openModal = function () {
// somewhere in your html , you may click on a button to envoke openModal()
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
isChosen: function () {
return $scope.isChosen;
}
}
});
};
And later on , in your modalCtr you can inject isChosen like this :
app.controller('modalCtrl',function($scope,isChosen){
// now you can use your isChosen function however you want
});
Im fairly new to AngularJS and I'm trying to create an List with "Draggables" that you can drop in 4 lists which are sortable. I got this to work with AngularUI-Sortable.
Now for the next part I'm trying to edit the content (more options and settings in the feature). With a modal from AngularUI-Bootstrap.
I got this to work with opening the content from the selected item I want to edit.
As you can see in the Plunker I almost got it working. Only thing I cant figure out is how I can get the {{ item }} to be {{ widgetOption }} AFTER I pressed the save button.
http://embed.plnkr.co/TTNccRuToObZuSmwYlTG/preview
My approach would be to keep a reference to the original object in your modal controller. So, assume the object passed in is the original, and it should only be modified if the form is saved. Making the fewest changes possible to your code to make it work, I came up with this plunker.
http://plnkr.co/edit/eSbEZZajsNfmVv3vmTdc?p=info
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: ModalInstanceCtrl,
resolve: {
widgetOptionsLocal: function () {
return widgetOptions;
}
}
});
var ModalInstanceCtrl = function ($scope, $modalInstance, widgetOptionsLocal) {
var widgetOptionsOriginal = widgetOptionsLocal;
$scope.widgetOptions = angular.copy(widgetOptionsLocal);
$scope.ok = function () {
widgetOptionsOriginal.content = $scope.widgetOptions.content;
$modalInstance.close($scope.widgetOptions);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};