angularjs-ng-click | 易学教程

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

阅读更多关于 Dynamic content added with AngularJS click event not working on the added content

I just started on AngularJS this week for a new project, and I have to come up to speed ASAP. One of my requirements, is to add html content dynamically and that content might have a click event on it. So the code Angular code I have below displays a button, and when clicked, it dynamically adds another button. Clicking on the dynamically added buttons, should add another button, but I cannot get the ng-click to work on the dynamically added buttons <button type="button" id="btn1" ng-click="addButton()">Click Me</button> The working code sample is here http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6

Toggle class with ng-click on several elements

阅读更多关于 Toggle class with ng-click on several elements

问题 How can I toggle classes on several elements individually with ng-click? In this question https://stackoverflow.com/a/22072110/2169327 toggling classes with a click was done like this: CSS: .red { color: red; } JS: $scope.toggle = false; HTML: <button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button> But what if I have several buttons that each should toggle its own class with ng-click? If I set it up in this way: HTML: <button id="btn" ng-click="toggle =

Linking one controller to another to call service on ng-click

阅读更多关于 Linking one controller to another to call service on ng-click

I have two templates with respective controllers and service files. One template's(fleetListTemplate) controller(fleetListController) loads data from its service file(fleetService) and displays in its view(fleetListTemplate). When this happens, and I click on one of the loaded data from fleetService, I should link fleetListController to fleetSummaryController to get data from its service file (fleetSummaryService) and display in fleetSummaryTemplate view. Can someone please help me with the coding? Thank you. The following are the respective modules, templates, controllers and service files.

ng-click on firing on mobile or tablet devices

阅读更多关于 ng-click on firing on mobile or tablet devices

问题 On page load i have a controller that calls a service and then binds the returned data to some $scope.objects: app.controller("MainController", function($scope, $http, serviceGetData) { serviceGetData.getData(function(data) { $scope.LoginCount = data.LoginCount; $scope.ProductInfo = data.ProductInfo; $scope.ProfileInfo = data.ProfileInfo; // Delayed binding $scope.OrderHistory = { History: [] }; } $scope.populateModel = function(model, values) { var isArray = $.isArray(values); $.each(values,

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

阅读更多关于 How/when to use ng-click to call a route?

Suppose you are using routes: // bootstrap myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider.when('/home', { templateUrl: 'partials/home.html', controller: 'HomeCtrl' }); $routeProvider.when('/about', { templateUrl: 'partials/about.html', controller: 'AboutCtrl' }); ... And in your html, you want to navigate to the about page when a button is clicked. One way would be <a href="#/about"> ... but it seems ng-click would be useful here too. Is that assumption correct? That ng-click be used instead of anchor? If so, how would that

Handling ng-click and ng-dblclick on the same element with AngularJS

阅读更多关于 Handling ng-click and ng-dblclick on the same element with AngularJS

问题 I was looking for both single and double-click event handling with AngularJS, since AngularJS always fires only the ng-click event even if there is ng-dblclick directive set for our element. Here is some working code for those who seek solution: JS: function MyController($scope) { var waitingForSecondClick = false; $scope.singleClickAction = function() { executingDoubleClick = false; if (waitingForSecondClick) { waitingForSecondClick = false; executingDoubleClick = true; return $scope

angularjs ng-click silently eats errors

阅读更多关于 angularjs ng-click silently eats errors

问题 If I have an ng-click like this: ng-click="buggy()" and click on no error message is generated on the console. This makes it a bit tricky to debug. Why aren't error messages generated? Anything I can do? 回答1: Angular expressions Actually, It's not something special with ng-click , It's the default behavior of angular expressions . buggy() is not evaluated with regular javascript. It is evaluated with $parse . $parse evaluates expressions and returns a function that would run against a scope.

Pass callback function to directive

阅读更多关于 Pass callback function to directive

问题 I'm trying to pass a callback function from a controller to a directive. Here's the callback function code: $scope.onImageSelect = function(image) { alert('SET'); $scope.card.image = image; }; Directive usage: <google-image-search callback="onImageSelect" /> Directive code: ngmod.directive('directive', function() { return { templateUrl: '/templates/template.html', scope: { callback: '&' } } }); Callback usage in template: <a data-ng-click="callback(url)"></a> However, this gives me the

AngularJS - how to override directive ngClick

阅读更多关于 AngularJS - how to override directive ngClick

I want to override directive ng-click: to some make some $rootscope changes before each execution of ng-click. How to do it? You can't override AngularJS built-in directives. However, you can define multiple directives with the same name and have them executed against the same element. By assigning appropriate priority to your directive, you can then control whether your directive runs before or after a built-in directive. This plunker shows how to build an ng-click directive that executes before the built-in ng-click does. The code is also shown below. When clicking the link, the custom ng

differences between ng-submit and ng-click

阅读更多关于 differences between ng-submit and ng-click

问题 In angularjs I'm wondering what the differences are between ng-submit and ng-click? Specifically, pros and cons of each and when should you one or the other? Thanks! **EDIT** I've looked in to this a bit more but I'm still wondering what (if any) the benefit is of using ng-submit? Could you use an ng-click in place of all ng-submits? Would this cause any problems? Thanks again! 回答1: The ngSubmit directive binds to the submit event in the browser, which is fired when a form is submitted. From