在指令中使用 ng-click 进行 ng-repeat

Question

我正在尝试创建一个简单的自动完成标记指令。但是下拉菜单<li> 上的ng-click 不会触发。我确信这是某种范围问题，但我不明白为什么。有人可以告诉我如何让这个 ng-click 触发吗？谢谢！

这是模板：

<article ng-click="focus()">

  <div class="tags-container">

    <div ng-repeat="selectedTag in selectedTags" ng-click='removeTag($index)' class="tag">
      <span class="tagName">{{selectedTag}}</span>
    </div>

    <input type="text" ng-focus='activate()' ng-blur='listActive = false' id="searchInput" ng-keydown="checkKeyDown($event)" class="tags" ng-model="searchText" />

  </div>

  <ul id="suggestions" class="suggestions-list" ng-class="{active : listActive}">
    <li ng-repeat="tag in tagList | filter:searchText" class="tags" ng-click="addToSelectedTags($index)" ng-mouseover="$parent.index=$index" ng-class="{active : index===$index}">
      <strong>{{tag}}</strong>
    </li>
  </ul>

</article>

这是指令

angular
  .module('directives')

.directive('tagComplete', function() {
  return {
    restrict: 'AE',
    scope: {
      selectedTags: '=',
      tagList: '='
    },
    templateUrl: 'public/partials/tagAutocomplete.html',
    link: function(scope, elem, attrs) {
      scope.index = -1;
      scope.listActive = false;
      scope.test = 'false';

      scope.removeTag = function(index) {
        scope.selectedTags.splice(index, 1);
      };

      scope.addToSelectedTags = function(index) {
        var isSelected = _.includes(scope.selectedTags, scope.tagList[index]);

        if (!isSelected) {
          scope.selectedTags.push(scope.tagList[index]);
          scope.searchText = '';
          scope.index = -1;
        }
      };

      scope.focus = function() {
        console.log(scope.test);
        $(elem).find('#searchInput').focus();
      };

      scope.activate = function() {
        if (scope.tagList.length > 0) {
          scope.listActive = true;
        }
      };

      scope.checkKeyDown = function(event) {
        if (event.keyCode === 40) {
          event.preventDefault();
          if (scope.index + 1 !== scope.tagList.length) {
            scope.index++;
          }
        } else if (event.keyCode === 38) {
          event.preventDefault();
          if (scope.index - 1 !== -1) {
            scope.index--;
          }
        } else if (event.keyCode === 13) {
          scope.addToSelectedTags(scope.index);
        } else {
          scope.index = -1;
        }
      };
    }
  }
});

这是html中的指令

<tag-complete tag-list="vm.suggestions" selected-tags='vm.query.fields'></tag-complete>

Answer 1

您的 ng-click 应该会触发。我尝试将您的代码输入到小提琴中，并对其进行了一些修改： http://jsfiddle.net/vt52bauu/5/

您可以尝试单击 li 元素。我发现您的这部分代码有问题：

ng-click="addToSelectedTags($index)"

当您在 searchInput 中写入内容时，它会过滤您的 ng-repeat 列表。因此，$index 将与您的 tagList 中的索引不匹配，并且它可能会尝试添加您 selectedTags 列表中已经存在的内容。我改成直接输入标签：

ng-click="addToSelectedTags(tag)"

我在代码中更改的其他内容只是让它在 jsFiddle 中运行。 这对您的问题有帮助吗？我能想到的唯一另一件事是与 css 有关。