Angular.js + require.js + jQuery Plugin custom directive

Question

I am new to Angular and Require, my question is regarding the following piece of code (I have already hooked up angular and require, I can include files if asked); the bootstrap-switch element is not being initialized :

define(['myapp.ui/module', function (module) {
module.directive('bootstrapSwitch', ['$parse', '$path', function ($parse, $path) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element) {
            //load requirements for this directive.
            console.log(element.bootstrapSwitch);
            element.bootstrapSwitch();
        }
    };
    return require([
        'myapp.ui/switch/bootstrap-switch.min',
        'css!myapp.ui/switch/bootstrap-switch.min'],
        function () {
            return {
                restrict: 'A',
                replace: false,
                link: function (scope, element) {
                    //load requirements for this directive.
                    element.bootstrapSwitch();
                }
            };
        });
}]);

}]);

I am able to see the directive file being loaded (the one above), but the element is not initialized, I fail to see bootstrap-switch.min.css and bootstrap-switch.min.js (I know the paths are working, I'm sure I have a sintax problem somewhere. If not, please elaborate. Any help would be appreciated!!!!

Thank you!!!

Ateş Göral · Accepted Answer · 2014-10-10 22:51:30Z

2

Syntax problem 1:

Change:

define(['myapp.ui/module', function (module) {

To:

define(['myapp.ui/module'], function (module) {

Also, consider using a different argument name than 'module' since it can be confused with an AMD module. (The module called 'module' is a special module that refers to the loaded module itself.)

Syntax problem 2:

The second return statement won't do anything. Perhaps you wanted to include all dependencies in the outer define:

define([
    'myapp.ui/module',
    'myapp.ui/switch/bootstrap-switch.min',
    'css!myapp.ui/switch/bootstrap-switch.min'
], function (ui) {

answered Oct 10, 2014 at 22:51

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peng · Accepted Answer · 2014-10-10 22:47:51Z

0

not possible to return another thing after return statement. if the require statement try to load some dependencies, you could put it in the define first parameter.

answered Oct 10, 2014 at 22:47

Peng

941 silver badge8 bronze badges

1 Comment

Jose Over a year ago

As in: define(['myapp.ui/module', 'myapp.ui/switch/bootstrap-switch.min', ..]) etc?

Collectives™ on Stack Overflow

Angular.js + require.js + jQuery Plugin custom directive

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related