angularjs-ng-click - w3toppers.com

Dynamic content added with AngularJS click event not working on the added content

app.controller(‘MainCtrl’, function($scope,$compile) { var btnhtml=”<button type=”button” ng-click=”addButton()”>Click Me</button>”; var temp = $compile(btnhtml)($scope); //Let’s say you have element with id ‘foo’ in which you want to create a button angular.element(document.getElementById(‘foo’)).append(temp); var addButton = function(){ alert(‘Yes Click working at dynamically added element’); } }); you need to add $compile service here, that will bind the angular directives … Read more

Angular ng-click event delegation

It seems angular doesn’t do event delegation with repeaters. Someone opened an issue on github about it. The argument is if it actually leads to better performance. There might be a workaround but it would require jQuery. It consists of creating a special directive to be used on a parent element and register the listener … Read more

How/when to use ng-click to call a route?

Routes monitor the $location service and respond to changes in URL (typically through the hash). To “activate” a route, you simply change the URL. The easiest way to do that is with anchor tags. <a href=”#/home”>Go Home</a> <a href=”#/about”>Go to About</a> Nothing more complicated is needed. If, however, you must do this from code, the … Read more

AngularJS – how to override directive ngClick

Every directive is a special service inside AngularJS, you can override or modify any service in AngularJS, including directive For example remove built-in ngClick angular.module(‘yourmodule’,[]).config(function($provide){ $provide.decorator(‘ngClickDirective’, [‘$delegate’, function($delegate) { //$delegate is array of all ng-click directive //in this case first one is angular buildin ng-click //so we remove it. $delegate.shift(); return $delegate; }]); }); angular … Read more

Ng-click doesn’t work inside ng-repeat

As Ven mentioned, ng-repeat does create a child scope for each item in the loop. The child scopes do have access to the parent scope’s variables and methods through prototypal inheritance. The confusing part is when you make an assignment, it adds a new variable to the child scope rather than updating the property on … Read more

adding and removing classes in angularJs using ng-click

I want to add or remove “active” class in my code dynamically on ng-click, here what I have done. <ul ng-init=”selectedTab = ‘users'”> <li ng-class=”{‘active’:selectedTab === ‘users’}” ng-click=”selectedTab = ‘users'”><a href=”#users” >Users</a></li> <li ng-class=”{‘active’:selectedTab === ‘items’}” ng-click=”selectedTab = ‘items'”><a href=”#items” >Items</a></li> </ul>

How to trigger ngClick programmatically

The syntax is the following: function clickOnUpload() { $timeout(function() { angular.element(‘#myselector’).triggerHandler(‘click’); }); }; // Using Angular Extend angular.extend($scope, { clickOnUpload: clickOnUpload }); // OR Using scope directly $scope.clickOnUpload = clickOnUpload; More info on Angular Extend way here. If you are using old versions of angular, you should use trigger instead of triggerHandler. If you need … Read more

Adding parameter to ng-click function inside ng-repeat doesn’t seem to work

Instead of <button ng-click=”removeTask({{task.id}})”>remove</button> do this: <button ng-click=”removeTask(task.id)”>remove</button> Please see this fiddle: http://jsfiddle.net/JSWorld/Hp4W7/34/

AngularJS ng-click stopPropagation

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call stopPropagation(): <table> <tr ng-repeat=”user in users” ng-click=”showUser(user)”> <td>{{user.firstname}}</td> <td>{{user.lastname}}</td> <td> <button class=”btn” ng-click=”deleteUser(user.id, $index); $event.stopPropagation();”> Delete </button> </td> </tr> </table> PLUNKER