当第三方库更新输入时，AngularJS 数据绑定不起作用答案

【问题标题】：AngularJS data-binding doesn't work when input updated by third-party libraries当第三方库更新输入时，AngularJS 数据绑定不起作用
【发布时间】：2016-10-07 22:11:54
【问题描述】：

表单使用jquery.placepicker 从谷歌地图获取地址和ng-bs3-datepicker 设置日期。我发现数据没有在控制器的范围内更新。如何手动触发这些字段的更新？

<div class="form-group">
        <input class="form-control" id="placepicker" name="address" ng-model="customer.address" data-latitude-input="#lat" data-longitude-input="#long" data-map-container-id="map-container" />
        <p class="address-indicator" id="map-address"></p>
        <input hidden id="lat" ng-model="customer.geo.latitude" />
        <input hidden id="long" ng-model="customer.geo.longitude" />
        <div id="map-container" class="collapse">
            <div class="placepicker-map thumbnail"></div>
        </div>
    </div>

    <div class="form-group">
        <select class="form-control" name="account_type" ng-model="customer.account_type">
            <option value="" disabled selected>Type de Compte</option>
            <option value="INTERCO">Interco</option>
            <option value="INTERNET">Internet</option>
        </select>
    </div>
    <div class="form-group">
        <ng-bs3-datepicker ng-model="customer.date_subscription" language="fr-ca" date-format="DD-MM-YYYY">
        <!--<input class="form-control" placeholder="Place a datepicker!" name="date_subscription" ng-model="customer.date_subscription" />-->
    </div>

【问题讨论】：

标签： jquery angularjs data-binding angularjs-scope updates

【解决方案1】：

没有看到你的控制器代码是相当困难的，但您可以尝试以下方法：

//Watch for Picker changes
$scope.$watch('customer.date_subscription', function(newValue, oldValue) {
   // Run your functions after the Picker is updated
   // Then refresh the $scope
   $scope.$apply();
}, false);

请注意，$scope.$watch 的回调函数可让您在需要时访问 Picker 的新旧值。

最后一个参数（在示例中设置为 false）允许您仅在新旧值不同时应用回调函数。如果将其设置为 true，则即使 newValue === oldValue 每次都会调用回调。

希望这会有所帮助。

【讨论】：