javascript - 获取动态 HTML/JQuery 以与 AngularJS 一起使用

Question

我有一个网页，它使用名为 custom-html 的指令，该指令将 HTML Web url 加载到页面中(允许子模板等)。我配置了这个系统，以便它可以正确注册 $scope 但我似乎在让 JQuery 监听器使用它时遇到问题。

例如，我的一个模板的底部有以下内容(其中在这一点上方使用了 custom-html 标签)

$(function() {
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
});

尽管如此，datepicker 永远不会在我通过 custom-html 指令包含的子模板中工作。有谁知道我该如何解决这个问题？以下是我正在使用的指令:

backendApp.directive('customHtml', function($compile, $http){
    return {
        link: function($scope, element, attrs) {
            $http.get(attrs['url']).then(function (result) {
                element.html(result.data);
                element.replaceWith($compile(element.contents())($scope));
            });
        }
    }
});

目前使用 JQuery 1.11.1 和 AngularJS 1.2.22。谢谢。

编辑:抱歉，让我澄清一下我遇到的问题是，当我单击通过 custom-html 插入的 .datepicker 字段时指示它不起作用。例如。当我单击 input 字段时，它没有打开 JQuery 日期选择器。当我使用常规 HTML(不是 custom-html)执行此操作时，它工作得很好。

Answer 1

问题是您需要在元素编译后运行 datepicker() init 。所以你应该在替换实际的 html 后执行此操作。上面的代码在页面加载时(或任何位置)运行一次，并且不会为该点之后创建的 html 元素创建日期选择器。

backendApp.directive('customHtml', function($compile, $http){
return {
    link: function($scope, element, attrs) {
        $http.get(attrs['url']).then(function (result) {
            element.html(result.data);
            element.replaceWith($compile(element.contents())($scope));
            // DO DATEPICKER INIT HERE ON NEW ELEMENT
        });
    }
}
});

更好的方法是使用 datepicker 指令，这样您就知道 datepicker 元素在初始化之前已被编译(在链接函数中)

backendApp.directive('myDatepicker', function($compile, $http){
return {
link: function($scope, element, attrs) {
    // ONLY JOB IS INITING DATE PICKER HERE
}
}
});