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＆amp;角度加载顺序问题。确保在Angularjs之前加载jQuery。看一下这个参考：

Loading jQuery after AngularJS (instead of before)

角结合延迟

2 个答案: