angularjs - 停止从通过库动态创建的 DOM 元素的事件传播
问题描述
我正在使用 AngularJS 1.7.5、x-editable 和智能表。在表格行内,我有一个锚点,它通过 x-editable 打开一个选择。我还在智能表中启用行选择。
问题是我不确定如何阻止选择中的点击事件传播和选择或取消选择表格行。我编写了一个指令来禁止从打开选择的 A 元素单击,但选择是由 x-editable 库创建的(例如,不在我的 HTML 中。)
https://plnkr.co/edit/kAKbgLg05uBA9etICxV7?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery@*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script data-require="angular.js@1.7.0" data-semver="1.7.0" src="https://code.angularjs.org/1.7.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script data-require="xeditable@*" data-semver="0.1.8" src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link data-require="bootstrap-css@3.3.7" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController as $ctrl">
<table st-table="collection" class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Secret Identity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in collection" st-select-row="row" st-select-mode="multiple">
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>
<a href="#" editable-select="row.secretIdentity" data-value="{{ row.secretIdentity }}" class="editable editable-click" buttons="no" mode="inline" e-ng-options="i for i in options" stop-event="click">
{{ row.secretIdentity }}
</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
angular
.module('myApp', ['xeditable', 'smart-table', 'ui.bootstrap'])
.controller('myController', ['$scope', 'editableOptions', function($scope, editableOptions) {
editableOptions.theme = 'bs3';
$scope.collection = [{
name: 'Ed',
id: 1,
secretIdentity: 'Just some guy'
}, {
name: 'Tony',
id: 2,
secretIdentity: 'Iron Man'
}, {
name: 'Steve',
id: 3,
secretIdentity: 'Captain America'
}, {
name: 'Bruce',
id: 4,
secretIdentity: 'Hulk'
}, {
name: 'Clint',
id: 5,
secretIdentity: 'Hawkeye'
}, {
name: 'Natasha',
id: 6,
secretIdentity: 'Black Widow'
}, ];
$scope.options = ['Iron Man', 'Captain America', 'Hulk', 'Black Widow', 'Hawkeye', 'Just some guy'];
}])
.directive('stopEvent', () => {
return {
restrict: 'A',
link: (scope, element, attr) => {
if (attr && attr.stopEvent) {
element.bind(attr.stopEvent, e => {
e.stopPropagation();
});
}
}
};
});
是否有一种标准方法来操作由 x-editable 创建的元素,它也可以与 AngularJS 配合使用?
解决方案
您可以将您包装<a>
在 a 中<div>
并将您的stop-event
指令添加到该 div 中。
<td>
<div stop-event="click">
<a href="#"
editable-select="row.secretIdentity"
data-value="{{ row.secretIdentity }}"
class="editable editable-click"
buttons="no"
mode="inline"
e-ng-options="i for i in options"
>
{{ row.secretIdentity }}
</a>
</div>
</td>
推荐阅读
- mysql - sql:如何创建第三列并使用相同的 id 移动 2° 结果
- javascript - 如何修改此 HTML 和 JavaScript,使其在网页上提供多个可移动项目?
- excel - Excel VBA 将单引号插入包含 16 个以上数字的列中
- jquery - 如何根据输入值禁用和启用提交按钮
- react-native - 从静态方法调用函数
- ios - 如何在 SwiftUI 中从减去的子视图中关闭视图
- jetty - Jetty 服务器不适用于与 JSP 的战争
- javascript - 如何过滤具有多个数组的对象
- python - Python — 打印一天中某个事件的剩余时间
- php - 带有 mPDF 问题的 PHP