javascript - 在 AngularJS 中准备好文档

Question

我想在您单击复选框时触发一些 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>

Answer 1

在 Angular 中与 DOM 交互的正确方法是创建您自己的自定义指令。然后，您可以在指令的 postLink 函数中连接 jQuery 处理程序(Angular 在加载时构建页面时运行)。当页面准备好时，您的处理程序将在那里等待。

查看 Angular 的指令文档并试一试:

AnuglarJS: Developer Guide: Directives

不过，看看你的例子，这可能太多了。根本不需要让 jQuery 监听点击事件。您只需要删除函数定义周围的 jQuery 包装器，让 Angular 自己处理点击事件:

$scope.testa = function(id) {
    alert(id);
};

然后修改您的 ng-click 属性以在表达式中传递 id:

<input type="checkbox" 
       id="{{info.id}}" 
       class="checkboxfisk" 
       ng-click="testa(info.id)">