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

时间:2016-10-07 22:11:55

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

表单正在使用jquery.placepicker从Google地图中获取地址 和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>

1 个答案:

答案 0 :(得分:0)

如果没有看到您的控制器代码,那将非常困难 但您可以尝试以下内容:

//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也是如此。

希望这会有所帮助。