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:
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);
});
}
});
});
}
};
}
})();