I made simple directive for testing: module.directive(‘toggleClass’, function() { return { restrict: ‘A’, link: function(scope, element, attrs) { element.bind(‘click’, function() { element.toggleClass(attrs.toggleClass); }); } }; }); so you can make any element toggle class you need <button id=”btn” toggle-class=”active”>Change Class</button> <div toggle-class=”whatever”></div>
Your problem is the :focus, you can get around by doing something like this span:focus { outline: none; border: 0; } So this is just for your span, you could get more specific on other items if you wanted to remove it elsewhere.
You could just write your own. I took a look at how angular handled click and modified it with code I found here: Jquery bind double click and single click separately <div sglclick=”singleClick()” ng-dblClick=”doubleClick()” style=”height:200px;width:200px;background-color:black”> mainMod.controller(‘AppCntrl’, [‘$scope’, function ($scope) { $scope.singleClick = function() { alert(‘Single Click’); } $scope.doubleClick = function() { alert(‘Double Click’); } }]) … Read more
The ngSubmit directive binds to the submit event in the browser, which is fired when a form is submitted. From MDN: Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.) So you might use it to submit a user sign-up form, or something … Read more
Just add the function reference to the $scope in the controller: for example if you want the function MyFunction to work in ng-click just add to the controller: app.controller(“MyController”, [“$scope”, function($scope) { $scope.MyFunction = MyFunction; }]);
This solution worked for me (I’m only supporting recent browsers, so I tried to modify the code to be more retro-compatible): HTML: <li ng-repeat=”item in items” ng-click=”showItem(item)”> <h3>{{item.title}}</h3> <button ng-click=”remove(item, $event)”>Remove</button> </li> Scripts: function remove(item, $event) { // do some code here // Prevent bubbling to showItem. // On recent browsers, only $event.stopPropagation() is needed … Read more
Simply using ‘;’ instead of ‘&&’ to separate the expression should work for you: <a ng-click=”navigation.book = book; bookSvc.showBook(book)” href=”#{{book.id}}”>{{book.title}}</a>
Is there a way to change it through css? Yes, see cursor. If you just wanted to target elements with the ng-click attribute, for example: [ng-click], [data-ng-click], [x-ng-click] { cursor: pointer; }
While you do the following, technically speaking: <button ng-click=”doSomething($event)”></button> // In controller: $scope.doSomething = function($event) { //reference to the button that triggered the function: $event.target }; This is probably something you don’t want to do as AngularJS philosophy is to focus on model manipulation and let AngularJS do the rendering (based on hints from the … Read more
Take a peek at the ng-click directive source: … compile: function($element, attr) { var fn = $parse(attr[directiveName]); return function(scope, element, attr) { element.on(lowercase(name), function(event) { scope.$apply(function() { fn(scope, {$event:event}); }); }); }; } It shows how the event object is being passed on to the ng-click expression, using $event as a name of the parameter. … Read more