角度绑定延迟答案

【问题标题】：Angular binding delayed角度绑定延迟
【发布时间】：2017-01-11 11:50:04
【问题描述】：

我试图在点击时获取 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;
});

【问题讨论】：

标签： javascript jquery angularjs angular-material

【解决方案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>

【讨论】：

【解决方案2】：

这可能是 jQuery 和 Angular 加载顺序问题。确保在 Angularjs 之前加载 jQuery。看看这个参考：

Loading jQuery after AngularJS (instead of before)

【讨论】：