javascript - 当专注于 ng-repeat 中的最后一个元素时，无法使用 AngularJS/jQuery 触发 Controller 内部的功能

Question

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

如果我用 ng-click 来做在 <button> 上, 它工作正常但不适用于 focus最后一个事件<input> .

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 的情况下解决这个问题？怎么办？

Answer 1

不要像现在这样使用 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>

你原来的方法的问题是，当你在 Controller 中使用 jQuery 时，没有任何东西可以绑定(bind)焦点事件，因为 ngRepeat 还没有呈现任何东西。当然，您可以使用父容器上的委托(delegate)事件轻松解决它，但您会发现它变得多么笨拙而且不清楚。