I am new using angular material and i have a question about the possibility to put a sidenav modal,
Today i tried to use the sidenav it works perfectly but i need another option, i want to disallow the closure of this sidenav using 'esc' from keyboard or clicking out the sidenav.
Here is an exemple with the sidenav by default.
CODEPEN EXAMPLE
//Javascript : from codepen
angular.module('MyApp').controller('AppCtrl', function ($scope,$timeout, $mdSidenav, $mdUtil, $log) {
$scope.toggleRight = buildToggler('right');
/**
* Build handler to open/close a SideNav; when animation finishes
* report completion in console
*/
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$log.debug("toggle " + navID + " is done");
});
},300);
return debounceFn;
}})
.controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
backdrop : 'static',
$scope.close = function () {
$mdSidenav('right').close()
.then(function () {
$log.debug("close RIGHT is done");
});
};
});
I found "backdrop:static" and "keyboard:false" options but it doesn't work. Or i don't know how to do it.
If somebody know a solution it will be cool !
You can set the md-is-locked-open attribute after the sidenav is opened. E.g. use a scope flag in your event handler:
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$scope.isLockedOpen = true;
});
},300);
...
and then in your template use sth like
<md-sidenav class="md-sidenav-right" md-component-id="right" md-is-locked-open="isLockedOpen">
sorry for making an answer that late ...
I just forgot two braces in the last code line :
},300); become },300)();
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$scope.isLockedOpen = true;
});
},300)();
Related
I have simple controller with one method:
app.controller('MyApp', function($scope) {
$scope.myMethod() {...}
}
I have also many components for input fields (for example for text input, number input, checkbox, radio etc.):
app.component('TextInput', {
template: "<input type='text' ng-change='$ctrl.myMethodInComponent()' ng-model='inp' />",
bindings: {
myMethod: '&',
},
controller: function() {
var ctrl = this;
ctrl.myMethodInComponent = function() {
/* some customizations */
ctrl.myMethod();
}
}
});
I create this input in following way:
<text-input myMethod="myMethod()"></text-input>
Everything works as expected, but the problem is that I have many components which want to use method 'myMethod' from main controller and I don't want to transfer it to each component using bindings ('&').
Rather I want to have this method in something like mainScope. I know that Angular provides rootScope but I don't have idea how to use it in my case. Is there possibility to attach 'myMethod' to some main (root) scope which will be shared between all my components?
What you want to do can be achieved by using services and factories. Take alook into it, and if you need help or a template, just ask me.
EDIT template
app.factory('myFactory', function($scope)
var ret = {
myMethod: myMethod,
myMethodWithParams: myMethodWithParams
}
return ret;
function myMethod() {...}
function myMethodWithParams(param1, param2) {...}
}
And now, in your controllers, you can use it as a dependency
app.controller('myController', function(myFactory) {
var x = myFactory.myMethod();
var y = myFactory.myMethodWithParams('hello', 'world');
});
Not sure this is the sort of use case you are looking for using $rootScope, but here's a solution along those lines:
angular.module('myApp', [])
.controller('MyController', function ($scope, $rootScope) {
$scope.message = 'Hello from Controller 1';
$scope.$watch('message', function () {
$rootScope.$emit('controller1_scope_change', {
message: $scope.message
});
});
}).controller('MyController2', function ($scope, $rootScope) {
$scope.message = 'Hello from Controller 2, here is the output from Controller 1:';
$rootScope.$on('controller1_scope_change', function (event, args) {
console.log('arguments received by the handler for the event: ', args);
$scope.message2 = args.message;
});
// really hacky way of doing it
/*var controller1_scope = angular.element(document.querySelector('#controller1')).scope();
controller1_scope.$watch(function () {
$scope.message2 = controller1_scope.message
});*/
});
View example here on codepen
I have to store closingtime after closing of tab and browser.that closing time should be stored in localstorage in angularjs.
I am using $localStorage and $window directive.
You can use... beforeunload
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return "Do you really want to close?";
});
});
With pure JS
window.addEventListener("beforeunload", function (e) {
});
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM%2FMozilla_event_reference%2Fbeforeunload
You can use onunload and onbeforeunload events to handle this but with the condition that they will fire even while navigating to other sites on clicking links
angular
.module('app', [])
.controller('AppController', function ($localStorage, $window) {
$window.onunload = function () {
$localStorage.setItem('LastLoggedOutTime', new Date());
}
});
angular.module('app', [])
.controller('exitController', function($scope, $window) {
$scope.onExit = function() {
// your function
};
$window.onbeforeunload = $scope.onExit;
});
I'm trying to use $ionicModal.
when I call $scope.codeModal.show(); modal pops up but immediately disapears. but when I click on the modal , it appears.
here is my Angular code:
$ionicModal.fromTemplateUrl('templates/resetCodeTemplate.html', {
scope: $scope
})
.then(function (modal) {
$scope.codeModal = modal;
});
$scope.resetBaseCodeShow = function () {
$scope.codeModal.show();
};
any Idea why it happens?
Use $timeout.
$scope.closeModal = function () {
$scope.codeModal.hide();
};
$timeout($scope.closeModal, 5000);
I wanted to display the added users dynamically in the dashboard.
My code is in the following way.
Controller: where the actual action triggers .
Adding the user function
$scope.addUser= function(){
modalService.addUser();
}
function init(){
// Someother functions
getUserRequests()
};
function getUserRequests() {
datacontext.getExtranetUserRequests()
.then(function (data){
vm.ExtranetUserRequest = data;
});
};
Service: modalService
addUser: function (column) {
var modalInstance = $modal.open({
templateUrl: 'app/NewExtranetSite/Popup/userModal.html',
controller: 'userModal',
});
updateUser: function(){
// updates the user
});
Controller :userModal
In the userModal.html after adding the info and on clicking save, add user function will be triggered.
function addUser(){
datacontext.saveNewExtranetuserRequest($scope.user);
};
I would like to initiate the getUserRequests() after the completion of add user in the user modal
So that the newly added user can be visble on the dashboard without refreshing the page
Let me answer u shortly.
You have a view where you are adding user details from input using one form ().
On ng-submit or ng-click action you can call one method in your that particular view's controller.
Now to display user details, you might know json. So create a blank $scope variable which will contain added user details.($scope.variable=[];)
Now on submit just hit **
$sope.variable.push({'key':value,'value':value});
**
once your object is populated with new data it will automatically displayed in the view.
5. We have just awesome ng-repeat angular's directive to show dynamical list containing objects.
6. **
ng-repeat="key in variable track by $index"
**
The $modal.open function returns a promise, so it's easy to wait for the modal to close and then execute another function. Let 'addUser' return this promise, then wait for it to finish before executing getUserRequests:
in modalService:
addUser: function (column) {
var modalInstance = $modal.open({
templateUrl: 'app/NewExtranetSite/Popup/userModal.html',
controller: 'userModal',
});
return modalInstance;
}
in controller:
$scope.addUser= function(){
modalService.addUser().then((resultReturnedFromModal) => {
getUserRequests();
});
}
Sorry for the bad post.
Let me explain briefly in this post
I would like to display the added data dynamically on the page.
I have a controller where the user addition action takes place.
(function () {
'use strict';
var controllerId = 'newUser';
angular.module('app').controller(controllerId,
['modalService', '$scope', 'dataContext', newUser]);
function newUser(modalService, $scope, dataContext) {
init();
function init() {
var extranetSiteRequestId = +$routeParams.id;
if (extranetSiteRequestId && extranetSiteRequestId > 0) {
getItem(extranetSiteRequestId);
getUserRequests();
}
}
$scope.newuserRequest = function () {
modalService.addUser();
}
function getUserRequests() {
datacontext.getExtranetUserRequests().then(function (data) {
vm.UserData = data;
});
};
}
}());
I am using a service modalService to handle the add user request.
(function (){
'use strict';
var serviceId = 'modalService'
angular.module('app').service(serviceId, ['$modal', modalService]);
function modalService($modal) {
return {
addUser: function () {
var modalInstance = $modal.open({
templateUrl: 'app/NewExtranetSite/Popup/userModal.html',
controller: 'userModal',
});
modalInstance.result.then(function (userDetails) {
if (userDetails) {
alert(userDetails) ;
};
})
},
};
}
})();
finally in the userModal controller am handling the new user added request
(function () {
'use strict';
var controllerId = 'userModal';
angular.module('app').controller(controllerId, ['$scope', '$modalInstance', 'datacontext', 'common', addUserModalFunction]);
function addUserModalFunction($scope, $modalInstance, datacontext, common) {
var vm = $scope;
vm.cancel = cancel;
vm.submit = addUser;
init();
function init() {
common.logger.log("controller loaded", null, controllerId);
common.activateController([], controllerId);
}
function cancel() {
$modalInstance.close();
}
$scope.open = function ($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
function addUser() {
datacontext.saveNewExtranetuserRequest($scope.user).then(function(data){
$modalInstance.close($scope.user);
});
};
};
})();
Now the problem is I would like to add a success or then function in the newUser Controller after the modalService.adduser complete
EX: modalService.addUser().then(function(results){
});
Fikkatra Thanks for the reply but couldn't able to achieve
am very bad # angular
I want to hide my headmenu.
app.controller("kpiOverviewCtrl", function ($scope, $stateParams,) {
"use strict";
var setUpController = function () {
$scope.headmenu = $state.current.controller === "kpiCompareCtrl";
};
$rootScope.$on('$locationChangeSuccess', function () {
setUpController();
});
$rootScope.$on('$stateChangeSuccess', function () {
setUpController();
});
setUpController();
});
As you can see on the code it sets headmenu to true on a controller switch. It works fine. But now I want to set headmenu to true on a ng-click statment from a controller thats already been loaded.
app.controller("kpiDetailsCtrl", function ($scope, $state) {
"use strict";
$scope.loadDataForMonthView = function () {
$scope.errorNoDataForDate = false;
$scope.yearMode = false;
$scope.monthMode = true;
//Here I want to set $scope.headmenu = true;
//Other code.....
};
Any nice suggestions?
Use a broadcast. They're a great way for communication between controllers.
Create a regular function in your main controller, which you can call from within the controller itself.
app.controller('Main', function($scope) {
function setHeadMenu() {
// Set menu to true
}
$scope.$on('setHeadMenu', function() {
setHeadmenu(); // Fires on broadcast
})
});
Create an ng-click which fires a broadcast from the other controller
app.controller('Second', function($scope) {
$scope.click = function() {
$scope.$broadcast('setHeadMenu'); // Send a broadcast to the first controller
}
});
You can declare new method to $rootScope inside kpiOverviewCtrl:
app.controller("kpiOverviewCtrl", function ($scope, $stateParams, $rootScope) {
"use strict";
//your code...........
$rootScope.setUpController = setUpController;
});
And then call it from kpiDetailsCtrl controller:
app.controller("kpiDetailsCtrl", function ($scope, $state, $rootScope) {
"use strict";
$scope.loadDataForMonthView = function () {
$scope.errorNoDataForDate = false;
$scope.yearMode = false;
$scope.monthMode = true;
$rootScope.setUpController();
}
});
First dummy suggestion:
$scope.loadDataForMonthView = function () {
$scope.headmenu = true; //(or false)
}
But most likely you are using some asynchrounous call, so something like this would be better:
$scope.loadDataForMonthView = function () {
// First: you need some promise object
// the most simple is to use $http
var promise = $http({url: 'some.url', method: 'GET'});
promise.then(function() {
// the data have arrived to client
// you can hide or show menu according to your needs
$scope.headmenu = true; //(or false)
})
}
More on how $http works is in the docs https://docs.angularjs.org/api/ng/service/$http