javascript 在 AngularJS 中准备好文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24806856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document ready in AngularJS
提问by user500468
I want to fire some jQuery code when you click on a checkbox. The problem is that when I click on a selectbox first time when the page is loaded, nothing happens. But when I click again, the jQuery-code is executed. I've tried to set angular.element(ready) as below, but it dont work:
当您单击复选框时，我想触发一些 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>
采纳答案by Justin Niessner
The proper way to interact with the DOM in Angular is to create your own custom directive. You can then wire up the jQuery handler in the postLink function of you directive (which Angular runs when it builds the page on load). Your handler will be there and waiting when the page is ready.
在 Angular 中与 DOM 交互的正确方法是创建您自己的自定义指令。然后，您可以在指令的 postLink 函数中连接 jQuery 处理程序（Angular 在加载时构建页面时运行该函数）。您的处理程序将在那里等待页面准备就绪。
Take a look at Angular's documentation for directives and give it a shot:
查看 Angular 的指令文档并试一试：
AnuglarJS: Developer Guide: Directives
Looking at your example, though, that may be too much. There's no need to have jQuery listen for the click event at all. You just need to remove the jQuery wrapper around your function definition and let Angular handle the click event itself:
但是，看看您的示例，这可能太多了。根本不需要让 jQuery 监听点击事件。您只需要移除函数定义周围的 jQuery 包装器，让 Angular 自己处理点击事件：
$scope.testa = function(id) {
alert(id);
};
And then modify your ng-clickattribute to pass the id in the expression:
然后修改您的ng-click属性以在表达式中传递 id：
<input type="checkbox"
id="{{info.id}}"
class="checkboxfisk"
ng-click="testa(info.id)">
回答by Dalorzo
The Angular way to render items is different from "On DOM Ready" that is why we need to treat these as 2 separate things.
Angular 渲染项目的方式与“On DOM Ready”不同，这就是为什么我们需要将它们视为两个独立的东西。
Angular could render items after DOM is ready, this could happen for example if there is an AJAX call($http.get) and that is why a directive may be the recommended approach.
Angular 可以在 DOM 准备好后呈现项目，例如，如果有 AJAX 调用（$http.get），这可能会发生，这就是为什么推荐使用指令的原因。
Try something like this:
尝试这样的事情：
<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);
});
}
};
});
...
By declaring the directive myApp.directive("chkSample",...as an attribute chk-Sample=""every time angulare generates the input element it will execute the link function in the directive.
通过在每次 angulare 生成输入元素时将指令声明myApp.directive("chkSample",...为属性chk-Sample=""，它将执行指令中的链接函数。
回答by mmp
The direct reason why it runs after second click is that in your ng-click handler you use jQuery click() function, which binds the click handler, within you execute alert. So after first click, you only bind the function, but not execute it. After it is bound, the next click executes it. Anyway, like it was said before, it should be done using directives.
它在第二次点击后运行的直接原因是，在您的 ng-click 处理程序中，您使用了 jQuery click() 函数，它绑定了点击处理程序，在您执行警报中。所以第一次点击后，你只绑定了函数，而不是执行它。绑定后，下次点击执行。无论如何，就像之前所说的那样，应该使用指令来完成。
回答by java dev
I am not sure if this is the right way, but the below code worked for me:-
我不确定这是否正确，但以下代码对我有用：-
$timeout(function(){
if(condition){
/*
code you want to execute */
}
});
