使用angularjs，我如何觸發點擊，還是有更好的方法？

Question

我正在用AngularJS創建一個表單嚮導。

想想每個字段集像這樣：

<div ng-controller="MyController as fs"> 
    <fieldset> 
     ... 
     <button ng-click="fs.StepForward($event)">Next</button> 
    </fieldset> 

    <fieldset> 
     ... 
     <button ng-click="fs.StepBackward($event)">Previous</button> 
     <button ng-click="fs.StepForward($event)">Next</button> 
    </fieldset> 
</div> 

我所做的是，在我的控制器中發現的當前字段集和下一個字段集，像這樣：

app.controller("MyController", function() { 
    var ft = this; 
    ft.StepForward = function(event) { 
    // It's here that I need to find the fieldset 
    ft.current_fs = event.currentTarget.parentNode; 
    ft.next_fs = event.currentTarget.parentNode.nextElementSibling; 
    } 
}); 

所以第一，我不確定這是否是絕對最好的方式，但它是有效的。

回到我的主要問題...在其中一個字段集中，我有一些li元素，如果點擊了某些元素，我想自動觸發點擊NEXT按鈕。

我嘗試添加一個NG單擊：

<fieldset> 
    <ul> 
    <li><a ng-click="fs.TriggerClick($event)">Some Itme</a></li> 
    </ul> 
    <button id="MyButtonTest" ng-click="fs.StepForward($event)">Next</button> 
</fieldset> 

app.controller("MyController", function() { 
    var ft = this; 
    ft.StepForward = function(event) { 
    // It's here that I need to find the fieldset 
    ft.current_fs = event.currentTarget.parentNode; 
    ft.next_fs = event.currentTarget.parentNode.nextElementSibling; 
    } 

    ft.TriggerClick = function(event) { 
    angular.element('#MyButtonTest').trigger('click'); 
    } 
}); 

但是，當我創建了一個功能觸發按鈕點擊，我得到了錯誤：

Error: $rootScope:inprog Action Already In Progress 

所以我我想要達到jQuery，但我確信有這樣做的角度。

Answer 1

您必須跳出當前的$ apply（）循環。這樣做的一種方法是使用$超時（）（See why）

試試這個：

<fieldset> 
    <ul> 
    <li><a ng-click="triggerClick()">Some Item</a></li> 
    </ul> 
    <button id="MyButtonTest" ng-click="fs.StepForward($event)">Next</button> 
</fieldset> 

控制器

$scope.triggerClick = function(){ 
    $timeout(function() { 
     angular.element('#MyButtonTest').triggerHandler('click'); 
    }, 0); 
}