角度結合が遅れた

Question

クリックでx座標とy座標を取得して入力ボックスに表示しようとしています。しかし、値を表示するには、最初にdivをクリックして座標を取得してから、入力ボックスの1つをクリックしてください。私の目標は、ユーザーがx座標とy座標をクリックしたときに入力ボックスを設定することです。

<md-input-container class="md-block" flex-gt-sm > 
    <label>Vertical</label> 
    <input ng-model="pdfVertical"> 
</md-input-container> 

<md-input-container class="md-block" flex-gt-sm > 
    <label>Horisontal</label> 
    <input ng-model="pdfHorisontal"> 
</md-input-container> 


$("#overlayDiv").click(function (event) { 
    $scope.pdfVertical = event.clientY; 
    $scope.pdfHorisontal = event.clientX; 
}); 

Answer 1

。この例をここでチェックアウト：

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', MyCtrl); 
 

 
function MyCtrl($scope) { 
 
    $("#overlayDiv").click(function(event) { 
 
     $scope.pdfVertical = event.clientY; 
 
     $scope.pdfHorisontal = event.clientX; 
 
     $scope.$apply(); 
 
    }); 
 
}

#overlayDiv{ 
 
    width: 400px; 
 
    height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-controller="MyCtrl"> 
 
     <div id="overlayDiv"> 
 
      <md-input-container class="md-block" flex-gt-sm> 
 
       <label>Vertical</label> 
 
       <input ng-model="pdfVertical"> 
 
      </md-input-container> 
 
      <br> 
 
      <md-input-container class="md-block" flex-gt-sm> 
 
       <label>Horisontal</label> 
 
       <input ng-model="pdfHorisontal"> 
 
      </md-input-container> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

これは、jQueryの可能性があります。&角度の読み込み順序の問題です。 Angularjsの前にjQueryをロードするようにしてください。このリファレンスを見てみましょう：あなたはビューをリフレッシュするために、クリックイベントの最後に$scope.$apply()を使用することができます

Loading jQuery after AngularJS (instead of before)