2016-06-27 5 views
1

ページロード時にコントローラでクリックイベントが発生しない理由がわかりません。私が欲しいのは、チェックボックスをクリックするだけです。ここでトリガーイベントページロード時にクリック

<!DOCTYPE html> 
<html > 

    <head> 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    </head> 

    <body ng-app="ngToggle"> 
    <div ng-controller="AppCtrl"> 
     <input type="checkbox" ng-model="dean" ng-click="btnChange($event, values, 1)" id="one" name="one" class="here" > 
     <input type="checkbox" ng-model="armada" ng-click="btnChange($event, values, 2)" id="two" name="one" class="here" > 
     <!--<p ng-repeat="btn in btns">--> 
     <!-- <input type="checkbox" ng-model="btn.bool" class="here" > {{ btn.value }}--> 
     <!--</p>--> 
     {{btn }} 
     {{values }} 
    </div> 
    <script type="text/javascript"> 
     angular.module('ngToggle', []) 
      .controller('AppCtrl',['$scope', function($scope){ 
      $scope.btns = [{}, {}, {}]; 
      $scope.values = []; 
      $scope.btnChange = function(event, model, val){ 
       _this = angular.element(event.target); 
       x = _this.prop("checked"); 
       if(x){ 
       model.push(val); 
       }else{ 
       index = model.indexOf(val); 
       model.splice(index, 1); 
       } 
      }; 
      angular.element("#one").triggerHandler("click"); 
     }]); 
    </script> 
    </body> 
</html> 

はplunkerです:http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=preview

答えて

2

です。だから、単純にこれを行うことができます。

$(function(){ 
    angular.element("#one").trigger("click"); 
}); 

完全なjQueryのソリューションは次のようになります(他の人が述べたように)

$(function(){ 
    $("#one").click(); 
}); 

完全な角度のソリューションは次のようになります。

angular.element(document).ready(function() { 
    angular.element("#one").trigger("click"); 
}); 

http://plnkr.co/edit/0OHDIVB2JGqDZnF56E6M?p=preview

文書がコンパイルされていないときにクリックするコードをトリガーしていますレディーレディ/レンダリングのため、ドキュメント全体(またはこの場合はチェックボックス)がロードされるまで待つ必要があり、その場合にのみ要素に対してアクションを実行できます。

+0

ありがとうございました!私はこれを使う方がはるかに簡単で、JqueryとAngularJSのハイブリッド –

1

あなたはちょうど私があなたのplunkerリンクはPlunker

をそれをチェックアウト更新したクリック

$timeout(function() { 
      angular.element('#one').click(); 
     }, 100); 

をトリガするために小さなタイムアウトを追加する必要がありますまたはできるか

angular.element(document).ready(function() { 
      angular.element("#one").trigger("click"); 
     }); 
2

あなたはここでは、この

angular.element(document).ready(function() { 
      angular.element("#one").trigger("click"); 

     }); 

のように、コントローラ上に置くことができ、私はあなたがページ上のjQueryを使用していることがわかりPlunker

関連する問題