AngularJS ng-click没有触发

Question

我有一个用于 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>';

这是模块、指令、控制器和相关的过滤器代码：

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;
  }
}]);

谢谢， 吉巴

Answer 1

ng-click 没有触发的原因是因为在单击选项之前，在输入上触发了blur 事件，这隐藏了选项并且您的选项永远不会被单击。

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