CODEWITHSUNDEEP
angularjskendo-uilazy-loading
Sjoerd222888
Sjoerd222888

Reputation: 3486

Kendo-Ui directives not working when lazy loading with oc.lazyLoad

I want to load the 'kendo.directives' angularJS module with lazy loading using ocLazyLoad. Here is my simple example code:

<!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>

The input field should become a date-picker as described here. But nothing happens.

I have created a plunkr.

Upvotes: 2

Views: 1067

Answers (2)

Olivier
Olivier

Reputation: 1269

Thanks for the report, this is now fixed in the library with the following commit: https://github.com/ocombe/ocLazyLoad/commit/6bbaed971cf2d23bb35a6ba5f29c6e6162edc5b5 !

It turns out that they are registering multiple directive with the same name but with different functions.

Don't do that in your code guys because you will make angular execute the directive wrappers multiple times and that's far from optimal.

But in the case of kendo they do that because they have automated the directive registering process and they only execute the differences when they register the directive a second time (the first registration is the generic stuff). Also they deal with aliases.

They probably should do that without registering the directive twice but go figure...

Anyway, it should work now !

Upvotes: 2

Petyo Ivanov
Petyo Ivanov

Reputation: 1137

I think you should add the kendo.directives as a dependency to the testApp module.

Upvotes: -1

Related Questions