使用angularjs,如何触发点击,或者有更好的方法吗?
With angularjs, how can I trigger a click, or is there a better way?
我正在使用 AngularJS 创建表单向导。
像这样想每个 fieldset:
<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-click:
<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,但我确信有一种 angular 方法可以做到这一点。
您必须跳出当前的 $apply() 循环。一种方法是使用 $timeout() (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);
}
我正在使用 AngularJS 创建表单向导。
像这样想每个 fieldset:
<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-click:
<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,但我确信有一种 angular 方法可以做到这一点。
您必须跳出当前的 $apply() 循环。一种方法是使用 $timeout() (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);
}