动态加载未添加到$ compileProvider的angular指令

时间:2014-03-25 06:34:01

标签: javascript angularjs angularjs-directive lazy-loading

我不能为我的生活弄清楚为什么这不起作用。指令文件正在加载,但是实际指令没有加载到angular中,因为它应该在routeProvider.js中的defer.resolve()中加载。

我一直在使用这两个例子作为参考,但尚未弄清楚它为什么不起作用。

https://github.com/ifyio/angularjs-lazy-loading-with-requirejs https://github.com/DanWahlin/CustomerManager

动态路线

console.log('Log: initializing Providers');
        app.controller = $controllerProvider.register;
        app.service = $provide.service;
        app.factory = $provide.factory;
        app.filter = $filterProvider.register;
        app.directive = $compileProvider.directive;

        var route = routeResolverProvider.route;

        console.log('Log: initializing Routes');
        $routeProvider
            .when('/',
                route.resolve({
                    module:'start',
                    directives: ['moduleButton']
                })
            )

RouteProvider.js

define(['angular'], function () {
/**
 * this service returns a valid route definition object
 * for the angular route 'when' method
 *
 * @type {*|module}
 */
angular.module('routeResolver', [])

    .provider('routeResolver', function () {

        this.$get = function () {
            return this;
        };

        /**
         * configuration object
         */
        this.routeConfig = (function () {

            var serviceDirectory = 'scripts/services/',
                viewsDirectory = 'views/',
                modulesDirectory = 'data/',
                directiveDirectory = 'scripts/directives',

                setServiceDirectory = function (serviceDir) {
                    serviceDirectory = serviceDir + '/';
                },

                getServiceDirectory = function () {
                    return serviceDirectory;
                },

                setViewsDirectory = function (viewsDir) {
                    viewsDirectory = viewsDir + '/';
                },

                getViewsDirectory = function () {
                    return viewsDirectory;
                },
                getModuleDirectoy = function () {
                    return   modulesDirectory;
                },
                setModuleDirectory = function (moduleDir) {
                    modulesDirectory = 'data/' + moduleDir + '/';
                },
                getDirectiveDirectory = function(){
                    return directiveDirectory;
                },
                setDirectiveDirectory = function(directiveDir){
                    directiveDirectory = directiveDir + '/';
                }
            return {
                getModuleDirectory: getModuleDirectoy,
                setModuleDirectory: setModuleDirectory,
                setServiceDirectory: setServiceDirectory,
                getServiceDirectory: getServiceDirectory,
                setViewsDirectory: setViewsDirectory,
                getViewsDirectory: getViewsDirectory,
                getDirectiveDirectory: getDirectiveDirectory,
                setDirectiveDirectory: setDirectiveDirectory

            };
        }());

        /**
         * build and return the route definiation object
         */
        this.route = function (routeConfig) {

            var resolve = function (data) {

                    var viewDir;
                    var view = 'view' in data ? data.view : "index";
                    var module = 'module' in data ? data.module : "";
                    var services = 'service' in data ? data.services : [];
                    var directives = 'directives' in data ? data.directives : [];
                    if (view != 'index') {
                        viewDir = view + '/';
                    } else {
                        viewDir = '';
                    }

                    var routeDef = {};

                    routeConfig.setModuleDirectory(module);
                    routeConfig.setViewsDirectory(routeConfig.getModuleDirectory() + viewDir);
                    routeConfig.setDirectiveDirectory(routeConfig.getModuleDirectory() + routeConfig.getDirectiveDirectory());

                    routeDef.templateUrl = routeConfig.getViewsDirectory() + viewDir + view + '.html';
                    routeDef.controller = view + 'Ctrl';
                    routeDef.resolve = {

                        load: ['$q', '$rootScope', function ($q, $rootScope) {

                            /**
                             * init the dependencies array
                             * @type {Array}
                             */
                            var dependencies = [routeConfig.getViewsDirectory() + viewDir + view + '.js'];

                            /**
                             * add data.services to dependencies array
                             */
                            if (services) {
                                var service;
                                for (service in services) {
                                    if (services.hasOwnProperty(service)) {
                                        dependencies.push(routeConfig.getServiceDirectory() + services[service] + '.js');
                                    }
                                }
                            }
                            if(directives){
                                var directive;
                                for(directive in directives){
                                    if(directives.hasOwnProperty(directive)){
                                        dependencies.push(routeConfig.getDirectiveDirectory() + directives[directive] + '.js');

                                    }
                                }
                            }
                            return resolveDependencies($q, $rootScope, dependencies);
                        }]
                    };

                    return routeDef;
                },

                /**
                 * load the required dependencies, resolve
                 * a promise on success
                 * @param $q
                 * @param $rootScope
                 * @param dependencies
                 * @returns {Function|promise}
                 */
                    resolveDependencies = function ($q, $rootScope, dependencies) {
                    var defer = $q.defer();
                    require(dependencies, function () {
                        $rootScope.$apply(function(){
                            defer.resolve();
                        });
                    });

                    return defer.promise;
                };

            return {
                resolve: resolve
            }

        }(this.routeConfig);

    });
});

ModuleButton.js

define(['app'],function(app){
   app.directive('moduleButton',function(){
    return {
        templateUrl: '../views/moduleButton/moduleButton.html',
        restrict: 'E',
        scope: {

        },
        link: function(){
            console.log('hi');
        }

     }
  });
});

0 个答案:

没有答案