最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - document ready in AngularJS - Stack Overflow

programmeradmin2浏览0评论

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:

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>

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:

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>
Share Improve this question edited Sep 26, 2019 at 15:35 akmozo 9,8393 gold badges29 silver badges44 bronze badges asked Jul 17, 2014 at 14:51 user500468user500468 1,2217 gold badges22 silver badges36 bronze badges 5
  • if you want to "fire jquery code" on click, why you need angular to do anything? – Dalorzo Commented Jul 17, 2014 at 14:53
  • you can use the nginit directive docs.angularjs/api/ng/directive/ngInit – TecHunter Commented Jul 17, 2014 at 14:54
  • @Dalorzo: Because Im going to use the data that jQuery gets for my with Angular. – user500468 Commented Jul 17, 2014 at 14:55
  • "Don't even use jQuery. Don't even include it. It will hold you back." stackoverflow./questions/14994391/… – isherwood Commented Jul 17, 2014 at 14:56
  • definitely read the link @isherwood provided – charlietfl Commented Jul 17, 2014 at 15:13
Add a ment  | 

4 Answers 4

Reset to default 2

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.

Take a look at Angular's documentation for directives and give it a shot:

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:

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

And then modify your ng-click attribute to pass the id in the expression:

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

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.

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 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 remended approach.

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.

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 */
        }

    });  
发布评论

评论列表(0)

  1. 暂无评论