I have this tag:
<a ui-sref="MyModule">My Module</a>
When I click on the link, this will be executed:
$scope.$on("$locationChangeStart", function (event) {
if (!confirm('You have unsaved changes, continue?')) {
event.preventDefault();
}
});
But still my view will switch to MyModule interface.
try using this:-
$scope.$on("$stateChangeStart", function (event) {
if (!confirm('You have unsaved changes, continue?')) {
event.preventDefault();
}
});
You are using UI-router. which is state based.
Related
I am dabbling with customerElements:
customElements.define('state-button',
class extends HTMLElement {
constructor(...args) {
super(...args);
this.state = 0;
let o=this;
this.t = {
0:"<button class='btn btn-info'>"+(o.innerHTML)+"</button>",
1:"<button class='btn btn-warning'>Are you sure???</button>",
2:"<button class='btn btn-danger'>Last chance....</button>"
};
this.addEventListener("click", this.handleClick,{capture:false});
}
connectedCallback() {
this.setAttribute("data-toggle", "modal");
this.setAttribute("data-target", "#confirmModal");
this.setAttribute("data-jc_id", this.getAttribute("data-id"));
this.render();
}
render() {
console.debug("state", this.state);
this.innerHTML=this.t[this.state];
}
handleClick(event) {
this.state = (this.state+1) % 3;
this.render();
}
setState(state) {
this.state = state;
this.render();
}
}
);
This is just me testing how it works. The button is supposed to change state AND open modal Bootstrap4 window. But the modal never gets triggered.
If I add super.click(); inside handleClick() it will change state twice (as the event is triggered again).
If I do not addEventListener the Bootstrap 4 modal window triggers just fine. So it appears my event is stopping other events.
return true; at the end of handleClick has no effect.
What am I missing?
I found a way around it to the same effect. But I am sure it is not the correct way of doing it.
When I add the eventlistener this.addEventListener("click", this.handleClick,{once:true}); it will be removed once triggered. This will cause the bootstrap 4 modal window to trigger as well.
Then at the end of handleClick I just add the click event as above again.
As I said - it is a workaround.
I am still interested in why my event stops other click events....
I have implemented angular material dialog in my project , I also made the dialog draggable. Everything is working fine. Now I have a new requirement where I should keep parent component active when I open the dialog . Anyone have any idea on how to achieve this ?
you can add a class to disable the particular part based on the dialog.
In your component, you can add a variable to identify the dialog state.
openDialog(): void {
this.dialogActive = true;
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: {name: this.name, animal: this.animal},
hasBackdrop: false
});
dialogRef.afterClosed().subscribe(result => {
this.dialogActive = false;
console.log('The dialog was closed');
this.animal = result;
});
}
}
and you can add a class to HTML based on the dialog state.
<div [class.modal-page-disable]="dialogActive"> disable part </div>
<div> enable part </div>
Then finally add the style to disable the part.
.modal-page-disable {
pointer-events: none;
background: transparent;
opacity: 0.5;
}
you can refer the sample code here.
In Chrome, when the mouse is in the input number field in Material, I can scroll the value with my mouse.
I uploaded the code to stackblitz: https://stackblitz.com/edit/angular-bpj321, and I found in Chrome I cannot scroll when the mouse is in the field, but in Firefox, I can scroll.
I do not want to scroll, so how can I prevent this?
I've added these lines in my app.component.ts
#HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
this.disableScroll(event);
}
#HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
this.disableScroll(event);
}
#HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
this.disableScroll(event);
}
disableScroll(event: any) {
if (event.srcElement.type === "number")
event.preventDefault();
}
It works.
You could disable the scrolling event on the input manually:
Find the input element:
const input = document.getElementById("your-input");
And disable the wheel default functionality:
input.addEventListener("wheel", function(event) {
event.preventDefault();
});
I have the following button directive :
<button-data></button-data>
the button data directive template is:
<div class="buttonDiv">
<a ng-show="!isSomthing" class="{{className}}" >
</a>
</div>
in another place , I have a canvas (some plugin) that show an image
When clicking on the button I would like to check if the image response is 404 or other broken status and disable the button in that case(event just return in the "link" directive function without doing anything)
I have the image link in the scope of the button directive
Hos could I do that?
thanks
Try to get it before you display it. A simple $http get request is what you are looking for:
View
<div ng-controller="MyCtrl">
<button load-image image-src="imageSource">check photo</button>
<button load-image image-src="imageSourceInvalide">check photo</button>
</div>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller("MyCtrl", function($scope) {
$scope.imageSource = 'https://i.imgur.com/hlF1AEug.jpg';
$scope.imageSourceInvalide = 'https://i.imgur.com/nonono';
});
myApp.directive('loadImage', function($http) {
return {
restrict: 'A',
scope: {
imageSrc: '='
},
link: function(scope, element) {
element.on('click', function() {
$http.get(scope.imageSrc).then(function(data) {
element.append('<img src="' + scope.imageSrc + '">');
}, function errorCallback(response) {
console.log('could not load image');
})
});
}
}
});
> demo fiddle
I have a TextFiled component, where add clear trigger. like this one:
this.config.triggers = {
clear: {
cls : (Ext.baseCSSPrefix + 'form-clear-trigger'),
handler : function() {
this.setValue();
}
}
}
...
So, and I handle an event focus
this.text= Ext.create('TwinText', {
width: 400,
emptyText: 'dddd',
listeners: {
scope: this,
focus: this.show,
},
editable : false
});
Now, when I click on trigger clean, the focus event was fired. How can I suspend this?
You can add the click event to your Textfield component instead of using focus.
Ex. in the TwinText definition add:
initEvents: function () {
this.callParent(arguments);
this.mon(this.inputEl, 'click', this.onClick, this);
},
onClick: function (e) {
this.fireEvent('click', this, e);
}
then listen for the "click" event instead of "focus".