我们可以将ng-click绑定到CSS类吗?
我有<td>
s的负载可以绑定并检查它们是否被单击,然后点击标签中的单击,以便为触摸设备提供最大的可单击区域。
我做了以下类似的事情。
var myApp = angular.module("myApp", [])
.controller("myController", ["$scope", "$timeout", function myController($scope, $timeout) {
$scope.checkRadio = function checkRadio($event) {
$timeout(function() {
angular.element($event.target).find("label").trigger('click');
}, 100);
};
}]);
.invisible-radio {
position: absolute;
display: inline;
opacity: 0;
width: 0;
margin: 0;
-webkit-appearance: none;
overflow: hidden;
}
.custom-radio-label {
display: inline-block;
position: relative;
padding-left: 20px;
vertical-align: text-top;
line-height: 20px;
cursor: pointer;
border-style: solid;
border-width: 0;
}
.custom-radio-label::before {
border-color: #7f7f7f;
border-radius: 50%;
background-color: #fff;
border-width: 2px;
content: "";
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
border-style: solid;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.invisible-radio:checked+.custom-radio-label::after {
background-color: #337ab7;
border-radius: 50%;
top: 5px;
left: 5px;
content: "";
width: 12px;
height: 12px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table class="table table-hover text-center center-block" ng-app="myApp" ng-controller="myController">
<thead>
<tr>
<th>Option 1</th>
<th>Option 2</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-click="checkRadio($event)">
<input id="option1" type="radio" class="invisible-radio" name="option" value="0" ng-model="model.Option" required />
<label class="custom-radio-label" for="option1"></label>
</td>
<td ng-click="checkRadio($event)">
<input id="option2" type="radio" class="invisible-radio" name="option" value="1" ng-model="model.Option" required />
<label class="custom-radio-label" for="option2"></label>
</td>
</tr>
</tbody>
</table>
但是,使用ng-click
属性去装饰100 s的<td>
s似乎过于杀伤。
我在想如果可以将ng-click
绑定到我所有<td>
S共享的普通类。
当然可以使用jQuery
如下。
$(".someclassOnMyTD").click($event) {
$event.target.find("label").click();
}
但是我在这里寻找一种角度。指令可能。
您可以使用Angular.Element
来完成此操作 var cells = angular.element(document.querySelectorAll(".someclassOnMyTD"));
cells.on('click', function(event){
// write your code here
// var labels = angular.element(event.currentTarget).find('label');
})
实际上是 <label>
的
<td>
<label for="option1">
<input id="option1" type="radio" class="invisible-radio" name="option" value="0" ng-model="model.Option" required />
<label class="custom-radio-label" for="option1"></label>
</label>
</td>
您可能需要稍微修补CSS,以便填充其父级td
我正在使用ng-view
,需要将事件绑定到我几乎所有(超过20(视图中的td
s。
这是完整的解决方案,因为它可能会对以后与我的要求相似的人有用。
$scope.$on('$viewContentLoaded', function () {
var tables = angular.element(document.querySelectorAll(".myClassOnTable, .myOtherClassOnTable"));
angular.forEach(tables, function (table) {
angular.element(table).on("click", function (e) {
var targetElement = e.target;
if (targetElement.nodeName == "TD" || targetElement.nodeName == "td") {
var radio = angular.element(targetElement).find(".invisible-radio");
if (radio) {
angular.element(radio[0]).prop("checked", true);
// I needed to set the required attribute manually as I am setting the checked property manually
$scope.myForm[radio[0].name].$setValidity("required", true);
$scope.$apply();
}
}
});
});
});
请注意,我将单击事件绑在table
元素上,如果单击的目标是td
,我正在听。这是因为由于浏览器的限制将点击事件绑定到同一时间的hundreads,因此我遇到了以下错误。
未熟练的连击:最大呼叫堆栈大小超过
所以我将单击事件委派给较少数量的元素。