如何使用 jquery 更新 $scope？

Question

我有一個引導程序日期選擇器。 我正在更新hide事件中文本框的值。 文本框值更改成功但$scope不更新。

Javascript

 <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAdd').datepicker({
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 1,
                dateFormat: 'dd/mm/yy'
            }).on('hide', function (e) {
                $('#hdnDays').val($(this).val());
                $(this).val('Add');
            });
        })

    </script>

HTML

<input type="text" ng-model="c" id="hdnDays" />
<input type="button" class="btn btn-primary" id="btnAdd" value="Add" />

你可以看到我正在使用ng-model="c"這意味着$scope.c應該改變，但它沒有發生。

如何從hide事件更新$scope變量？

Answer 1

在 angular 中，DOM 操作是在指令內部完成的，這是因為您可以獲得兩個可以在其中使用的重要變量，並將解決您的問題：

• 你得到一個引用你元素的變量，這樣你就不必中繼它的 id 或其他一些選擇器，

• 最重要的是，您可以獲得對元素范圍的引用，這樣您就可以在范圍變量中進行更改時調用scope.$apply() 。

在您的情況下，您應該將代碼放在指令中，如下所示：

app.directive('datePicker', function($parse) {
    return {
    restrict: 'E',
    link: function (scope, element, attr) {
        element.datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            dateFormat: 'dd/mm/yy'
        }).on('hide', function (e) {
            scope.$apply(function(){
                $parse(attr['ng-model'])(scope).assign(element.val());
                element.val('Add');
            });
        });
    }
  };
});

並在視圖中：

<input type="button" class="btn btn-primary datePicker" value="Add" />

您可能需要根據您的需要調整此代碼。