如何使用 jquery 更新 $scope？答案

【问题标题】：How to update $scope using jquery?如何使用 jquery 更新 $scope？
【发布时间】：2015-09-18 09:40:07
【问题描述】：

我有一个引导程序日期选择器。我正在更新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 变量？

【问题讨论】：

只是一个可以帮助你开发的注释。有一个完全用角度编写的引导库。 Angular 和 JQuery 不能很好地配合使用。 here is a link
plnkr.co/edit/l7wKCUSGJIwHLhz54tUN?p=preview
@JoeLloyd 并不是说 Angular 和 jQuery 不能很好地协同工作。如果这是真的，angular 不会在内部将 jQlite (angular.element) 转换为 jQuery 重要的是你如何使用它

标签： jquery angularjs datepicker

【解决方案1】：

在 Angular 中，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" />

您可能需要根据您的确切需要调整此代码。

【讨论】：