当聚焦于ng-repeat中的最后一个元素时，无法使用AngularJS / jQuery触发控制器内部的函数

Unable to trigger function inside controller using AngularJS / jQuery when focussed on last element in ng-repeat

本文关键字：jQuery AngularJS 内部 控制器 函数 ng-repeat 聚焦 最后一个 元素      更新时间：2023-09-26

在我的网页中，当用户关注最后一个<input>时，我希望动态添加一组<input>和<select>。

如果我在<button>上使用ng-click，它可以正常工作，但不能在最后一个<input>上使用focus事件。

var Note = function($scope){
  $scope.items = [];
  $scope.options = [{name: 'x'}, {name: 'y'}];
  $scope.add = function () {
    console.log('adding..');
    $scope.items.push({
      question: "",
      questionPlaceholder: "foo",
    });
    //console.dir($scope.items);
  };
  $scope.add();
  $('input:last-child').on('focus', function(){      // does not work
    console.log('adding elements dynamically');
    $scope.add();
    $scope.$apply();
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Note" id='itemsPool'>
    <form ng-submit="submitHandler()">
      <div ng-repeat="item in items">
        <input type="text" placeholder="URL" ng-model="item.question">
        <select ng-init="item.type = options[0]" 
                ng-model='item.type' 
                ng-options="option.name for option in options">
        </select>
      </div>
    </form>
    <button ng-click='add()'>Add</button> <!-- works! -->
    <span><-- button will be removed eventually</span>
  </div>
</div>

如何解决这个问题?

是否可以不使用jQuery解决这个问题?如何?

不要像现在这样使用jQuery，使用专用的Angular指令。在你的情况下，你需要ngFocus。

这个属性会很适合你:

ng-focus="$last && add()"

检查演示:

var Note = function($scope){
  $scope.items = [];
  $scope.options = [{name: 'x'}, {name: 'y'}];
  $scope.add = function () {
    console.log('adding..');
    $scope.items.push({
      question: "",
      questionPlaceholder: "foo",
    });
    //console.dir($scope.items);
  };
  $scope.add();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Note" id='itemsPool'>
    <form ng-submit="submitHandler()">
      <div ng-repeat="item in items">
        <input type="text" 
               placeholder="URL" 
               ng-model="item.question"
               ng-focus="$last && add()">
        <select ng-init="item.type = options[0]" 
                ng-model='item.type' 
                ng-options="option.name for option in options">
        </select>
      </div>
    </form>
    <button ng-click='add()'>Add</button> <!-- works! -->
    <span><-- button will be removed eventually</span>
  </div>
</div>

你原来的方法的问题是，没有什么绑定焦点事件，当你在控制器中使用jQuery，因为ngRepeat还没有呈现任何东西。当然，您可以使用父容器上的委托事件轻松地解决这个问题，但是您会看到它变得多么笨拙和不清晰。

相关文章：