gpt4 book ai didi

javascript - AngularJS ng-click 不触发

转载 作者:行者123 更新时间:2023-12-02 14:25:16 28 4
gpt4 key购买 nike

我有一个用于 textdown 控件的自定义 AngularJS 指令。其中有一个 ng-repeat 正在打印模拟下拉列表的 div 列表,并且每个项目都有一个 ng-click 功能。单击 div 时该函数不会触发。你能帮我找出原因吗?

Plunkr:https://plnkr.co/edit/vOwtjqltq2WfCM9A0dFJ?p=preview

我不记得我第一次听到这个概念是在哪里,但它与 StackOverflow 的问题标签输入非常相似,只不过你只能选择 1 项。如果您还没有看到该示例,那么它是一个文本输入,当您开始在其中输入相关项目时,它会显示一个下拉列表,其中的字段与您目前所输入的内容部分匹配。然后用户可以单击下拉列表中的一个项目,它会填充文本输入。

这是主页的 HTML:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
<script src="textdown.js"></script>
</head>

<body ng-controller="MainCtrl">
<p>Hello and welcome to the Textdown example!</p>
<label>City:
<textdown input-placeholder-text="Select a City..." is-editable="true" items="cities" ng-model="selectedCity" title="Name" width="150px"></textdown>
</label>
</body>

</html>

这是指令的 HTML:

var HYG_TEXTBOX_DROPDOWN_TEMPLATE = '\
<div class="hyg-textdown-container activate-textdown" \
ng-class="{ \'hyg-focused\': isFocused() }"> \
<input type="search" class="activate-textdown" placeholder="{{ inputPlaceholderText }}" style="width: 100%;" \
ng-class="{ \'invalid\': !isValid() }" \
ng-change="onInputChanged()" \
ng-focus="onInputFocus($event)" \
ng-model="input" \
ng-blur="onInputBlur()" \
ng-show="isEditable"> \
</input> \
<div class="hyg-textdown-list activate-textdown" ng-show="selectActive" ng-style="{ top: ytop, left: xleft }" style="z-index:5; width: {{ width }}"> \
<div class="hyg-textdown-listed activate-textdown" \
ng-repeat="item in items | property: title: (ngModel != null ? \'\' : input) | orderBy: title | limitTo:5" \
ng-class="{ \'hyg-textdown-listed-active\': isSelected(item) }" \
ng-click="selectItem(item, $event);"> \
<span class="activate-textdown">{{ item[title] }}</span> \
</div> \
</div> \
</div>';

这是模块、指令、 Controller 和关联的过滤器代码:

angular.module("hyg.Textdown", [])
.directive("textdown", ["$compile", "$document", "$filter", "$log", "$timeout", function ($compile, $document, $filter, $log, $timeout) {
return {
restrict: "E",
replace: false,
controller: "hygTextdownCtrl",
template: function (element, attrs) {
return HYG_TEXTBOX_DROPDOWN_TEMPLATE;
},
require: "?ngModel",
scope: {
inputPlaceholderText: "@",
isEditable: "=",
items: "=",
ngModel: "=",
title: "@",
width: "@"
},
link: function (scope, element, attrs) {
scope.orderBy = $filter("orderBy");

if (scope.isEditable == null)
scope.isEditable = true;

$document.bind("click", function (e) {
var shouldHideSelectList = !Enumerable.From(e.target.classList).Any(function (x) { return x == "activate-textdown"; });

if (shouldHideSelectList) {
$timeout(function () { scope.selectActive = false; }, 0);
}
});

scope.destroy = function () {
if (scope.handler != null)
scope.handler();
};

scope.isFocused = function () {
return scope.focus;
};

scope.isSelectActive = function () {
return scope.selectActive;
};

scope.isValid = function () {
return scope.input == null || scope.input.length == 0 || scope.ngModel != null;
};

scope.onInputChanged = function () {
var input = scope.input == null ? null : scope.input.toLowerCase();
var item = Enumerable.From(scope.items).Where(function (x) { return x[scope.title].toLowerCase() == input; }).ToArray()[0];

scope.selectItem(item);
};

scope.onInputFocus = function ($event) {
scope.focus = true;
scope.selectActive = true;
};

scope.onInputBlur = function () {
scope.focus = false;
scope.selectActive = false;
};

scope.selectItem = function (item, $event) {
if (scope.isEditable) {
scope.ngModel = item;

if (item != null)
scope.selectActive = false;
}
};

scope.isSelected = function (item) {
return scope.ngModel == item;
};

scope.handler = scope.$watch("ngModel", function () {
if(scope.ngModel != null)
scope.input = scope.ngModel[scope.title];
});
}
}
}])
.controller("hygTextdownCtrl", ["$scope", function ($scope) {
$scope.focus = false;
$scope.handler = null;
$scope.selectActive = false;
}])
.filter("property", ["$filter", function ($filter) {
return function (array, propertyString, target) {
if (target == null)
return array;

var matched = [];
var toMatch = target.toLowerCase();

angular.forEach(array, function (item) {
if (item[propertyString].includes != undefined) {
if (item[propertyString].toLowerCase().includes(toMatch)) {
matched.push(item);
}
}
else
{
if (item[propertyString].toLowerCase().indexOf(toMatch) > -1) {
matched.push(item);
}
}
});

return matched;
}
}]);

谢谢,吉巴

最佳答案

ng-click 未触发的原因是,在单击选项之前,会在输入上触发 blur 事件,从而隐藏选项和您的选项永远不会被点击。

您可以尝试使用 ng-mousedown 而不是 ng-click 选择选项。

关于javascript - AngularJS ng-click 不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38316353/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com