I have this simple angular example where I want to capture a mouse right click for a custom action. The default context menu must not show up. I read the questions here at SO. Unfortunately I cannot stop it from opening the browser built in context menu. I'm sure I'm missing something simple here. (see plunker http://plnkr.co/edit/YieQh23xNUFmPrjZscGB)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Plunk</title>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="plunker" ng-controller="myController">
<p ng-mousedown="mouseClicked($event)">Click me!</p>
</body>
</html>
script.js
var app = angular.module('plunker', []);
app.controller('myController', ['$scope', '$log', function($scope, $log) {
$scope.mouseClicked = function(event) {
if (event.button===2) {
$log.debug('right mouse click detected')
// don't do anything else
event.preventDefault();
event.stopPropagation();
}
};
}]);
If you are going to disable the context menu, you need to listen to the contextmenu event in order to stop it.
To achieve this in angular, maybe you need to add a custom directive:
app.directive('noContextMenu', [function() {
return function(scope, ele, attr){
ele.on('contextmenu', function(e) {
e.preventDefault();
});
}
}]);
<p no-context-menu >Click me!</p>
Related
The below code is detecting click in desktop but in mobile the touch event gets triggered when trying to scroll over the element,how to prevent this touch event and only detect tap events.I am not allowed to use ng-touch or ng-click.
I have tried the below approaches but these dont seem to work.What changes need to be made in below code?
What's the best way to detect a 'touch screen' device using JavaScript?
onClick not working on mobile (touch)
What is the most reliable way to detect clicks (or touches) on both desktop and mobile devices?
(function() {
'user strict';
angular.module('myModule').directive('myDirective',function(){
return{
restrict:'A',
scope:{
id: '=myId',
pm: '=myPm'
},
link:function(scope,element,attrs){
element.on('click touchend',funtion(event){
console.log("clicked");
});
}
}:
});
}());
use onclick="myFunction()" or use ng-click
it'll work for sure
in HTML--
ng-click="xyz(params)"
like below shown::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ng-click in AngularJs</title>
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ngClickCtrl', ["$scope", function ($scope) {
$scope.domain = "stackoverflow.com";
$scope.IsDisplay = false;
$scope.clickMe = function (clicked) {
alert(" My Click function is called.");
$scope.IsDisplay = clicked == true ? false : true;
};
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ngClickCtrl">
<div><h2>ng-click in AngularJs</h2> </div>
<div>
Domain name: <input type="text" ng-model="domain"> <button type="button" ng-click="clickMe(IsDisplay)">NG-CLICK</button>
</div>
<div>
<div ng-show="IsDisplay"> My Click function is called. <br /><h3 style="color:green;">testing ng-click events: {{domain}} </h3></div>
</div>
</div>
</body>
</html>
I am using emojionearea in angularJs project . when i parsed unicode to emojis smiley faces using my custom directive it gives me error Refrence Error . emojione is not defined . here is directive
app.directive('emojifyIt', emojifyIt);
function emojifyIt($timeout) {
console.log('directove bya sad')
return {
link : function(scope, element, attributes){
console.log(attributes['emojifyIt']);
element.html(emojione.unicodeToImage(attributes['emojifyIt']));
}
};
}
if i use $timeout function in this it works fine.
e.g
app.directive('emojifyIt', emojifyIt);
function emojifyIt($timeout) {
console.log('directove bya sad')
return {
link : function(scope, element, attributes){
console.log(attributes['emojifyIt'])
$timeout(function() {
element.html(emojione.unicodeToImage(attributes['emojifyIt']))
}, 1000);
}
};
}
is there solution for this so that i dont use timeout function it should load script and javascript code before rendering the directive
my html code is
<span emojify-it="😁😂😃asd😶😚😙"></span>
here is complete html file
Edited
<html>
<head>
<link rel="stylesheet" href="components/emojionearea/dist/emojionearea.min.css">
<script src="components/jquery/dist/jquery.js"></script>
<script src="components/emojionearea/dist/emojionearea.min.js"></script>
<title>
emoji example
</title>
<style> .ng-cloak { display: none !important; } </style>
</head>
<body ng-app="emojiApp" ng-controller="mainCtrl">
<span emojify-it="😁😂😃asd😶😚😙"></span>
<script src="components/angular/angular.js"></script>
<script src="components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
<script>
$(function(){
$("#emojionearea2").emojioneArea({
pickerPosition: "bottom",
tonesStyle: "radio"
});
})
</script>
want this result without timeout
fiddle link is
fiddle link
When I surround my input with ng-if, after hide and show the autofocus attribute does not take effect:
Here is the code:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-init="view={}; view.show = true">
<button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
<div ng-if="view.show">
<input autofocus />
</div>
</body>
</html>
And here is the plunker:
http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview
Just click on hide and after that on show and you will see the autofocus does not working!
In Chrome is working only on the first show, in FF and IE it's not working at all!
The problem is the attribute autofocus isnt an Angular directive. It is a browser supported specification of the <input> element. If you want this to work as intended across multiple browsers and auto focus every time you click hide/show you will need to make a directive.
I took this directive right off Github Gist, credit to mlynch for building this directive.
Heres a working example of your application
angular
.module('App', [
'utils.autofocus',
]);
/**
* the HTML5 autofocus property can be finicky when it comes to dynamically loaded
* templates and such with AngularJS. Use this simple directive to
* tame this beast once and for all.
*
* Usage:
* <input type="text" autofocus>
*
* License: MIT
*/
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$timeout(function() {
$element[0].focus();
});
}
}
}]);
<!DOCTYPE html>
<html ng-app="App">
<head ng-init="view={}; view.show = true">
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
</body>
<div ng-if="view.show">
<input autofocus />
</div>
<script src="script.js"></script>
</html>
You can use a directive for this. Plunker Demo
angular.module('myApp', []).directive('focusMe', function($timeout) {
return {
scope: {
focusMeIf:"="
},
link: function ( scope, element, attrs ) {
if (scope.focusMeIf===undefined || scope.focusMeIf) {
$timeout( function () { element[0].focus(); } );
}
}
};
});
You could also define a condition in it in focus-me-if attribute in it.
Hope it helps.
First of all you have to wrap the div and it's content inside the body element. You have it outside. please correct it.
Input element should not be blank and may not work sometimes. please add some more attribute like name and type="text" or appropriate.
This is html5 feature and should start with <!DOCTYPE html>.
Please Note : The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.visit here for more details
I'm new in Angular, so maybe I missing something. Does anybody know, what's wrong with expression state in such case:
The value 'isDisable.state' change in 'p' tag, but not in 'ng-disabled'. The button doesn't change it state to disabled.
Here is the plunk:http://plnkr.co/edit/zc8k9oCUxlMRCkZKjQa5?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module('switcher',[]);
myapp.controller('switchState', function ($scope) {
$scope.isDisable = {'state':false};
$scope.toggle = function () {
$scope.isDisable.state = !$scope.isDisable.state;
}
});
</script>
</head>
<body ng-app="switcher">
<div ng-controller="switchState">
<button ng-click="toggle()">toggle</button>
<button ng-disabled="{{isDisable.state}}">Disabled</button>
<p>{{isDisable.state}}</p>
</div>
</body>
</html>
Remove the {{}}
ng-disabled="isDisable.state"
I am new to angular js. I am trying out an example from http://egghead.io/lessons/angularjs-directives-talking-to-controllers but somehow it does not seem to work correctly for me.
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/twitterApp.js"></script>
</head>
<body>
<div ng-app="twitterApp">
<div app-controller="AppCtrl">
<div enter="loadMoreTweets()">Roll over to load tweets.</div>
</div>
</div>
</body>
</html>
here is app, controller and directive
var tApp= angular.module("twitterApp",[])
tApp.controller("AppCtrl", function ($scope) {
$scope.loadMoreTweets = function () {
alert('Loading tweets.');
}
})
tApp.directive("enter", function () {
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
scope.$apply(attrs.enter);
})
}
})
the problem is below statement seems to be failing and I can't figure out the reason since I did exactly the way it is done in demo.
scope.$apply(attrs.enter)
I even tried following but error console displays loadMoreTweets is not found, any help is greatly appreciated.
scope.loadMoreTweets()
<div app-controller="AppCtrl">
should be
<div ng-controller="AppCtrl">