document.ready 不适用于 angularjs 中新创建的元素答案

【问题标题】：document.ready is not working for newly created elements in angularjsdocument.ready 不适用于 angularjs 中新创建的元素
【发布时间】：2014-08-20 10:02:55
【问题描述】：

以下是我在控制器中的jQuery 代码，它适用于模板加载时创建的输入元素。现在的问题是，我有一个下拉菜单，在选项选择的基础上，我显示了一个日期输入框，但是在这种情况下没有显示日期选择器。

让我知道在这种情况下我需要做什么。我尝试并找到了一些关于 directive 实现的解决方案，但我不是一个经验丰富的人，不知道它是否能解决我的问题。

我在控制器中的 jQuery 代码 -

angular.module("app").controller("myCtrl", function($scope, userService, $http) {
    $(document).ready(function(){
        /****  Datepicker  ****/
        if ($('.datepicker').length && $.fn.datepicker) {
            $('.datepicker').each(function () {
                var datepicker_inline = $(this).data('inline') ? $(this).data('inline') : false;
                $(this).datepicker({
                    inline: datepicker_inline,
                    formatDate:'Y-m-d'
                });
            });
        }

        /****  Datetimepicker  ****/
        if ($('.datetimepicker').length && $.fn.datetimepicker) {
            $('.datetimepicker').each(function () {
                var datetimepicker_inline = $(this).data('inline') ? $(this).data('inline') : false;
                $(this).datetimepicker({
                    inline: datetimepicker_inline,
                    formatDate:'Y-m-d'
                });
            });
        }
    });

});

【问题讨论】：

在angularjs中处理它的方法是使用像ui-date这样的指令
能否请您也分享您的html代码。
@BhushanKawadkar 我发布了我的解决方案..虽然我会深入研究指令以获得更具体的解决方案

标签： javascript jquery html angularjs datepicker

【解决方案1】：

如果代码不属于控制器，那么它一开始就不必存在。请记住，Angular 和 jQuery 插件可以共存，每个项目都不同。很难发表意见，因为我不知道您要达到什么目标，但这应该可以实现：

angular.module("app").controller("myCtrl", function($scope, userService, $http) {

 //... controller's logic here

});

$(document).ready(function(){
    /****  Datepicker  ****/
    if ($('.datepicker').length && $.fn.datepicker) {
        $('.datepicker').each(function () {
            var datepicker_inline = $(this).data('inline') ? $(this).data('inline') : false;
            $(this).datepicker({
                inline: datepicker_inline,
                formatDate:'Y-m-d'
            });
        });
    }

    /****  Datetimepicker  ****/
    if ($('.datetimepicker').length && $.fn.datetimepicker) {
        $('.datetimepicker').each(function () {
            var datetimepicker_inline = $(this).data('inline') ? $(this).data('inline') : false;
            $(this).datetimepicker({
                inline: datetimepicker_inline,
                formatDate:'Y-m-d'
            });
        });
    }
});

【讨论】：

【解决方案2】：

我通过使用ng-show 解决了这个问题。

最初我使用的是动态创建元素的ng-if，但我用ng-show 更改了它，比如-

.form-group(ng-if="event.repeat === 2")

到

.form-group(ng-show="event.repeat === 2")

【讨论】：