Угловое связывание задерживается

Question

Я пытаюсь получить координаты x и y при щелчке и отображать их в полях ввода. Но значения видны только после того, как я нажимаю сначала на div, чтобы получить координаты, а затем щелкните в одном из полей ввода. Моя цель - заполнить поля ввода, когда пользователь нажимает координаты 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

Вы можете использовать $scope.$apply() в конце щелкните событие, чтобы обновить вид. Здесь проверить этот пример:

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 &. Убедитесь, что вы загружаете jQuery перед Angularjs. Посмотрите на эту ссылку:

Loading jQuery after AngularJS (instead of before)