How to make `$ocLazyLoad` work with `ui.router` in Angular 1.5?

340 views Asked by At

I am trying to lazy load ($ocLazyLoad) some non-angular libraries (jQuery + css files) through the route (using angular ui.router).

In this code snippet I am trying to load the iCheck library, and only use it in my InputsCtrl

here's my config:

            .state('dashboard.inputs', {
                url: "/elements/inputs",
                templateUrl: templateProvider.getTemplate('inputs'),
                controller: 'InputsCtrl',
                controllerAs: 'inputs',
                resolve: {
                    loadPlugin: function ($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            {
                                files: [
                                    'bower_components/iCheck/skins/polaris/polaris.css',
                                    'bower_components/iCheck/icheck.min.js'
                                ]
                            }
                        ]);
                    }
                }
            })

and it is causing the following error:

enter image description here

here's my empty controller:

(function () {
    'use strict';

    angular
        .module('mega-app')
        .controller('InputsCtrl', ctrl);

    function ctrl() {
        var vm = this;

    }

})();

and here's the directive I am using:

(function () {
    'use strict';

    angular
        .module('mega-app')
        .directive('icheck', icheck);

    function icheck($timeout) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function($scope, element, $attrs, ngModel) {
                return $timeout(function() {
                    var value;
                    value = $attrs['value'];

                    $scope.$watch($attrs['ngModel'], function(newValue){
                        $(element).iCheck('update');
                    })

                    return $(element).iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green'

                    }).on('ifChanged', function(event) {
                        if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                            $scope.$apply(function() {
                                return ngModel.$setViewValue(event.target.checked);
                            });
                        }
                        if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                            return $scope.$apply(function() {
                                return ngModel.$setViewValue(value);
                            });
                        }
                    });
                });
            }
        };
    }
})();
0

There are 0 answers