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交互的正确方法是创建自己的自定义指令。然后，您可以在you指令的postLink函数中连接jQuery处理程序（Angular在加载时构建页面时运行）。您的处理程序将在那里等待页面准备就绪。

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

AnuglarJS: Developer Guide: Directives

看看你的例子，这可能太过分了。根本没有必要让jQuery监听click事件。您只需要在函数定义周围删除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)">

Answer 2

呈现项目的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);    
               });
            }
        };
});

...

每当angulare生成输入元素时，通过将指令myApp.directive("chkSample",...声明为属性chk-Sample=""，它将执行指令中的链接函数。

Answer 3

第二次点击后运行的直接原因是你在ng-click处理程序中使用了jQuery click（）函数，它在你执行alert中绑定了click处理程序。因此，在第一次单击后，您只绑定该函数，但不执行它。绑定后，下一次单击执行它。无论如何，就像之前所说的那样，应该使用指令来完成。

Answer 4

我不确定这是否正确，但以下代码对我有用： -

    $timeout(function(){
     if(condition){
       /*
             code you want to execute */
        }

    });

准备角度的文件

4 个答案: