Q:
How to use ng-click in the same element?
For example, I have such template code:
After compilation, the HTML page should looks like this:
How can I do it without using nested ng-clicks?
EDIT: I know that there are some workarounds. For example, I can insert ng-init attribute and write something in it:
function init() { this.ngClick.a() this.ngClick.ngDisabled("b") }
And I can do it in JavaScript. But is there any possible way to do it in HTML?
A:
If I understand correctly, this does not work since the outer click is going to call a() in the scope of the inner click handler. If I put a function in a scope, it is called in the same scope. You can use an array or a factory or something similar for this. Here's a factory that does it. You can pass in the first and second elements of the array as optional arguments and it returns the function you can use to link.
You can extend the syntax to accept whatever parameters you need to use with these functions. I've made the example pass in a string for an identifier.
angular.module('ng').factory('linkFunction', [function () {
var funcs = [];
var linkFunctionFactory = {};
var addLinkFunction = function (func, args) {
funcs.push(func);
var argStrings = func.toString().split(/\W+/g);
var argNames = argStrings.filter(function (item, index, array) {
return item.indexOf('$') === -1;
});
funcs[0](argNames[0], args[0]);
if (argStrings.length > 1) {
funcs[1](argStrings[1], args[1]);
}
};
linkFunctionFactory.linkFunction = function (selector, firstArg, secondArg) {
// create function from $scope.one arg, $scope.two arg, $scope.three arg and make a wrapper
return function (newArg1, newArg2, newArg3) {
linkFunctionFactory.linkFunction(funcs[0], firstArg, newArg1);
linkFunctionFactory.linkFunction(funcs[1], newArg2, newArg3);
};
};
linkFunctionFactory.linkFunction(funcs[0], undefined, null);
return linkFunctionFactory.linkFunction;
}]);
In your case:
Demo
Working demo
A:
I had this problem once too. You cannot bind an event on elements dynamically. What you need to do is wrap them in a directive, and then assign the ng-click within the directive's link function.
In this example, I used an array called $actions to store the actions to be done. It contains an id and a function to call. If you want a function with different arguments or you need to change them, they can be added as a separate argument to the action array. For example:
var app = angular.module('app', []);
app.directive('myDirective', function() {
return {
restrict: 'A',
priority: 1,
link: function(scope, element) {
scope.actions = [];
element.on('click', function() {
scope.$eval(scope.actions[0].fn, {});
});
}
}
});
app.controller('TestController', function($scope, $timeout, $compile) {
$scope.actions = [{
fn: function(arg1, arg2) {
console.log(arg1);
console.log(arg2);
}
}];
$scope.clickMe = function() {
$compile("")($scope);
$timeout(function() {
angular.element('#myElement').trigger('click');
}, 1);
};
});
Demo: https://jsfiddle.net/6hcz4Ls6/
A:
Angular v1.4.3
The original version works if the function and/or the object which is called has no arguments.
If you want to have more complex params:
$scope.myClick = function(a) { alert(a.c); }
The above would be parsed like:
$scope.myClick = function() { alert(undefined); }
This is due to how variables are passed to the inner scope.
Angular v1.3.0
I have this working in the version I'm using:
$scope.clickMyButton = function() { alert(window.arguments.length); }
The above would be parsed like:
$scope.clickMyButton = function(a) { alert(window.arguments.length); }
However, this is undocumented, so not tested, and the version below should work. The version below is more in line with the other solution:
Click
$scope.myClick = function(a) { alert(window.arguments.length); }
This would generate:
Click
$scope.myClick = function() { alert(window.arguments.length); }
You could use Object.keys to clean this up:
Click
$scope.myClick = function() { alert(Object.keys(window.arguments).length); }
This generates the same markup as the first example.
