javascript - AngularJs - 无法调用标签的单击JavaScript单击功能

Question

我有两个 Bootstrap 选项卡，我在第一个选项卡上显示列表，在第二个选项卡上将有用于添加新记录的文本框。

<ul class="nav nav-tabs naviborder">
   <li class="active" ng-click="showTasksList()">
      <a class="icontab" data-target="#divTasks" data-toggle="tab">Tasks</a>
   </li>
   <li ng-click="addTask()" id="liCreateTask">
      <a id="aAddTask" class="icontab" data-target="#divCreateTask" data-toggle="tab">Create Task</a>
   </li>
</ul>

现在在列表上，我有一些编辑按钮，单击该按钮后，我将填充第二个选项卡中的文本框并自动显示第二个选项卡。

现在，我的问题是:我能够填充文本框，但无法切换到第二个选项卡。

我的 AngularJs 代码:

$scope.EditFieldForceTask = function (TaskData) {           
   $scope.TaskEditMode = true;
   $scope.TaskContactName = TaskData.CONTACT_NAME;
   $scope.TaskContactNumber = TaskData.CONTACT_NUMBER;
   $('#aAddTask').click();
   //$scope.tab2Click();
}

调用此 $('#aAddTask').click(); 后，我收到三个错误，例如

Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.8/$rootScope/inprog?p0=%24apply 
at Error (native)

我还尝试为该标签定义 ng-click 事件，但即使这样也不起作用。

但是当我尝试从控制台调用函数 $('#aAddTask').click(); 时，它工作正常。

谁能告诉我我犯的错误吗？

Answer 1

您正在尝试执行可能会触发摘要周期的点击功能，而摘要周期已经在进行中。

您可以使用 $timeout 或 setTimeout 延迟执行当前摘要周期后执行的点击函数。

$timeout(function() {
  $('#aAddTask').click();
});