I'm studying angular and I'm having a problem.
I created a directive called action, I'm trying to get the click on the element ul > but it does not work using find and I can not put ng-click because it may contain N tags ...
Example of how I'm calling
//Exemplo de criação do bind do click
$element.find("ul li").bind('click', function(){
console.log(this);
});
Note: if I bind only in ul it works.
You can use ng-click inside a ng-repeat, yes, keep the function outside the object you pass pro ng-repeat and pass the necessary data to it by
$scope.lista = [{item1},{item2},{item3}];
$scope.acao = function(index){
var item = $scope.lista[index]; //valor selecionado }
<ul ng-repeat="item in lista">
<li ng-click="acao($index)"></li>
</ul>
One solution, which I particularly prefer, is the use of an existing function only in the policy scope, so you do not have to "fix", "hacks" or worse depend on a function of% - which goes completely against the purpose of a controller .
Just make a definition of a function within the directive and assign it to the element by directive , see:
.directive('acao', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
scope.meuClick = function() {
console.log('rodou');
}
}
};
});
And in your html:
<ul acao>
<li ng-repeat="item in items" ng-click="meuClick()"></li> //ngRepeat somente de exemplo
</ul>
Why use this template?
You have greater control and better maintenance over the code. Imagine that in the future you need to change the structure of ul / li to div / span, for example, or that you change the location where the policy is defined. This way you do not need to review the entire structure of the code in the directive, check if it needs a new find, etc.
You apply the click directly on the element you need and only within the policy scope, which does not interfere with the others.
Add the acao attribute to each li in ng-repeat , so you can handle the clicks on the elements.
angular.module("exemplo", [])
.controller("exemplo", function() {
this.letters = ["a", "b", "c", "d"];
})
.directive("acao", function() {
return {
restrict: "A",
link: function(scope, elem) {
elem.on("click", function() {
// do something!
alert("You clicked at: " + elem.text());
});
}
}
});@import "compass/css3";
.clickable-li {
cursor: pointer;
color: blue;
}
.clickable-ul {
cursor: pointer;
color: red;
}<html ng-app="exemplo">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script></head><bodyng-controller="exemplo as ctrl">
<p>Ação em cada 'li'</p>
<ul>
<li class="clickable-li" ng-repeat="letter in ctrl.letters" ng-bind="letter" acao></li>
</ul>
</body>
</html>