Question

我有一个bootstrapper datepicker。我正在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应该更改，但它不会发生。

如何从$scope事件更新hide变量？

Answer 1

在角度中，DOM操作是在directive内完成的，这是因为你得到了两个可以在那里使用的重要变量，并且会解决你的问题：

你得到一个引用你的元素的变量，这样你就不必转发它的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" />

您可能需要根据所需内容调整此代码。

如何使用jquery更新$ scope？

1 个答案: