使用oc.lazyLoad延迟加载时,Kendo-Ui指令不起作用

时间:2014-12-18 10:54:33

标签: angularjs kendo-ui lazy-loading

我想加载' kendo.directives'使用ocLazyLoad延迟加载的angularJS模块。这是我的简单示例代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="ocLazyLoad.js"></script>
</head>
<body>
    <div id="example" ng-app="LazyLoadTest" ng-controller="TestController">

    </div>
    <script>
        angular.module("LazyLoadTest", [ "oc.lazyLoad"])
            .controller("TestController", function($scope, $ocLazyLoad, $compile, $timeout){
                $ocLazyLoad.load({
                        name: "kendo.directives",
                        files: ["http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"],
                        serie: true
                    }).then(function () {
                        var el, elToAppend, compiled;
                        var targetElement = angular.element('#example');
                        el = angular.element('<input kendo-date-picker />');
                        compiled = $compile(el);
                        targetElement.append(el);
                        compiled($scope);
                    }, function (e) {
                        console.log(e);
                    })
        });
    </script>
</body>
</html>

输入字段应成为here所述的日期选择器。但没有任何反应。

我创建了一个plunkr

2 个答案:

答案 0 :(得分:2)

感谢您的报告,现在已使用以下提交在库中修复此问题:https://github.com/ocombe/ocLazyLoad/commit/6bbaed971cf2d23bb35a6ba5f29c6e6162edc5b5

事实证明,他们正在注册具有相同名称但具有不同功能的多个指令。

不要在你的代码中那样做,因为你会使angular多次执行指令包装器并且远非最佳。

但是在kendo的情况下,他们这样做是因为他们已经自动化了指令注册过程,并且他们只在第二次注册指令时执行差异(第一次注册是通用的东西)。他们还处理别名。

他们可能应该在没有注册指令两次的情况下这样做,但是要计算......

无论如何,现在应该可以了!

答案 1 :(得分:-1)

我认为您应该将kendo.directives添加为testApp模块的依赖项。