Javascript AngularJS文件准备就绪_Javascript_Angularjs_Document Ready

Javascript AngularJS文件准备就绪

javascript angularjs

Javascript AngularJS文件准备就绪,javascript,angularjs,document-ready,Javascript,Angularjs,Document Ready,我想在单击复选框时触发一些jQuery代码。问题是，当我在页面加载时第一次单击选择框时，什么都没有发生。但是当我再次单击时，jQuery代码被执行。我已尝试将angular.element（就绪）设置为如下所示，但它不起作用： angular.element(document).ready(function() { $http.get($rootScope.appUrl + '/nao/test/test') .success(function(data,

我想在单击复选框时触发一些jQuery代码。问题是，当我在页面加载时第一次单击选择框时，什么都没有发生。但是当我再次单击时，jQuery代码被执行。我已尝试将angular.element（就绪）设置为如下所示，但它不起作用：

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.element（document）.ready（function（）{
$http.get（$rootScope.appUrl+'/nao/test/test'）
.success（函数（数据、状态、标题、配置）{
$scope.test=data.data；
});
$scope.testa=函数（）{
$（'.checkboxfisk'）。单击（函数（）{
var fish=$（this.attr（'id'）；
警觉（鱼）；
});
};
});
{{info.stracka}{{info.tid}

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

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

但是，看看你的例子，这可能太多了。根本不需要jQuery监听click事件。您只需要删除函数定义周围的jQuery包装器，并让Angular处理单击事件本身：

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

然后修改

ng单击属性以在表达式中传递id：
<input type="checkbox" 
       id="{{info.id}}" 
       class="checkboxfisk" 
       ng-click="testa(info.id)">

呈现项目的角度方式不同于“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);    
               });
            }
        };
});

...


var myApp=angular.module（'myApp'，[]）；
控制器（'MainCtrl'，['$scope'，函数（$scope）{}]）；
指令（“chkSample”，function（））{
返回{
限制：“A”//A-表示属性
链接：函数（范围、元素、属性、ngModelCtrl）{
$（元素）。单击（函数（）{
var fish=$（this.attr（'id'）；
警觉（鱼）；
});
}
};
});
...

通过将指令myApp.directive（“chkSample”，…
声明为属性chk Sample=”“
，每次angulare生成输入元素时，它都将执行指令中的链接函数。
第二次单击后运行该指令的直接原因是在ng click处理程序中使用jQuery click（）函数，它绑定单击处理程序，在您执行警报后。因此，第一次单击后，您只绑定函数，而不执行它。绑定后，下一次单击将执行它。无论如何，就像前面所说的，应该使用指令来完成。
我不确定这是否正确，但下面的代码对我来说很有用：-
    $timeout(function(){
     if(condition){
       /*
             code you want to execute */
        }

    });  

如果你想在点击时“触发jquery代码”，为什么你需要angular做任何事情？你可以使用nginit指令@Dalorzo:因为我将使用jquery为我的angular获取的数据。“甚至不要使用jquery。甚至不要包含它。它会让你退缩。”一定要阅读@isherwood提供的链接谈到AngularJS，我只是一个新手，所以我不知道指令是如何工作的。你有针对非专业开发人员的解决方案吗？@user500468-非专业开发人员的解决方案是阅读文档，了解正在发生的事情，并且仍然以正确的方式进行。我链接到文档，所以您可以看一看并开始。谢谢。我将试一试。@user500468-我刚刚更新了我的答案，因为您的问题不需要使用jQuery就可以轻松解决。