我想在单击复选框时触发一些jQuery代码。问题是,当我在加载页面时第一次单击选择框时,什么也没有发生。但是当我再次点击时,jquery代码被执行。我试过设置angular.element(ready)如下,但它不工作:
angular.element(document).ready(function() {
$http.get($rootScope.appUrl + '/nao/test/test')
.success(function(data, status, headers, config) {
$scope.test = data.data;
});
$scope.testa = function() {
$('.checkboxfisk').click(function() {
var fish = $(this).attr('id');
alert(fish);
});
};
});
<tr ng-repeat="info in test"><td>{{info.stracka}}</td><td>{{info.tid}}</td><td><input type="checkbox" id="{{info.id}}" class="checkboxfisk" ng-click="testa()"></tr>
在Angular中与DOM交互的正确方式是创建你自己的自定义指令。然后,你可以在指令的postLink函数中连接jQuery处理程序(Angular在加载时构建页面时运行该函数)。当页面准备好时,处理程序将在那里等待。
看看Angular的指令文档,试一试:
AnuglarJS: Developer Guide: Directives看看你的例子,虽然,这可能太多了。根本不需要让jQuery监听单击事件。你只需要移除函数定义周围的jQuery包装器,让Angular自己处理click事件:
$scope.testa = function(id) {
alert(id);
};
然后修改您的ng-click
属性以在表达式中传递id:
<input type="checkbox"
id="{{info.id}}"
class="checkboxfisk"
ng-click="testa(info.id)">
它在第二次点击后运行的直接原因是,在你的ng-click处理程序中,你使用了jQuery的click()函数,它绑定了点击处理程序,在你执行警报。因此,在第一次单击之后,您只绑定函数,而不执行它。绑定后,下一次单击将执行它。无论如何,就像之前说的,应该使用指令来完成。
Angular渲染项的方式与"On DOM Ready"不同,这就是为什么我们需要将它们视为两个独立的东西。
Angular可以在DOM准备好后渲染项目,例如,如果有AJAX调用($http.get
),这可能会发生,这就是为什么一个指令可能是推荐的方法。
试试这样写:
<body ng-controller="MainCtrl">
<input type="checkbox" chk-Sample="" >
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {}]);
myApp.directive("chkSample", function() {
return {
restrict: "A", //A - means attribute
link: function(scope, element, attrs, ngModelCtrl) {
$(element).click(function() {
var fish = $(this).attr('id');
alert(fish);
});
}
};
});
...
通过将指令myApp.directive("chkSample",...
声明为属性chk-Sample=""
,每次angular生成输入元素时,它都会执行指令中的链接函数。
我不确定这是否是正确的方式,但下面的代码为我工作:-
$timeout(function(){
if(condition){
/*
code you want to execute */
}
});