Fatal编程技术网
  • javascript/
  • Javascript AngularJS ng单击不点火

Javascript AngularJS ng单击不点火

javascript angularjs

Javascript AngularJS ng单击不点火,javascript,angularjs,directive,Javascript,Angularjs,Directive,我有一个用于textdown控件的自定义AngularJS指令。它是一个ng repeat，为模拟下拉列表打印div列表，每个项都有一个ng click功能。单击div时，该函数不会启动。你能帮我找出原因吗 普朗克： 我不记得我第一次在哪里听到这个概念，但它与StackOverflow的问号输入非常相似，只是您只能选择1项。如果您还没有看到该示例，那么当您开始在文本输入中键入相关项时，该文本输入会有一个下拉列表，其中的字段部分匹配您目前键入的内容。然后，用户可以单击下拉列表中的一个项目，它将填充

我有一个用于textdown控件的自定义AngularJS指令。它是一个ng repeat，为模拟下拉列表打印div列表，每个项都有一个ng click功能。单击div时，该函数不会启动。你能帮我找出原因吗

普朗克：

我不记得我第一次在哪里听到这个概念，但它与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>
谢谢，
Jibba

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

您可以尝试使用
ng mousedown
而不是
ng click

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

您可以尝试使用
ng mousedown
来选择选项，而不是在第47行单击
ng
，

未定义“可枚举”。（除非您在项目中包含linq.js，但不在plunkr中）从模板中删除ng blur事件。它将起作用。我在项目中使用linq.js，但在plunkr中没有正确设置它。感谢您捕获that.JAMEEL，当用户开始与任何其他元素交互时，需要使用ng模糊来隐藏文本。您是否有其他方法来处理该问题，但允许删除ng模糊？在第47行，“Enumerable”未定义。（除非您在项目中包含linq.js，但不在plunkr中）从模板中删除ng blur事件。它将起作用。我在项目中使用linq.js，但在plunkr中没有正确设置它。感谢您捕获that.JAMEEL，当用户开始与任何其他元素交互时，需要使用ng模糊来隐藏文本。你有没有其他方法来处理，但允许删除ng模糊？这很有效，耶！！！不过，这很让人困惑，因为我在另一个指令中做的事情几乎完全相同（该指令允许同时选择多个项目），并且它与ng click一起工作。爆炸！共享该工作指令的plunkr，我来看看，我实际上也将相关指令更改为使用ng mousedown。不管怎样，谢谢你的帮助。成功了，耶！！！不过，这很让人困惑，因为我在另一个指令中做的事情几乎完全相同（该指令允许同时选择多个项目），并且它与ng click一起工作。爆炸！共享该工作指令的plunkr，我来看看，我实际上也将相关指令更改为使用ng mousedown。不管怎样，谢谢你的帮助。 
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;
  }
}]);