在运行时动态注册指令

Question

通常，通过使用directive方法在模块上注册指令：

.directive('MyDirective', function (MyDep) {
    return {
        restrict: 'E',
        template: '<div></div>',
        controller: function ($scope) {
        }
    }
});

但是，如果我想在运行时动态地注册指令呢？例如，假设用户从服务器中提取以下数据：

{
    directives: {
        dir1: {
            restrict: 'E',
            template: '<div></div>',
        },
        dir2: {
            restrict: 'E',
            template: '<div></div>',
        }
    }
}

有什么方法可以使用这些数据来动态地为我的应用程序注册新的指令吗？如果成功的话，我应该能够动态地生成和$compile依赖于它们的HTML。

Answer 1

这是“延迟加载角工件”问题的一个子集(我已经研究过here，还有其他资源)。一个想法是使用config函数“窃取”$compileProvider (ref)，然后根据您的数据按需调用$compileProvider.directive(...)。

这个想法的大致草图是：

var cachedCompileProvider;
angular.module(...).config(['$compileProvider', function($compileProvider) {
    cachedCompileProvider = $compileProvider;
});

然后(例如，从一个可以访问$http的地方)：

$http.get(...).then(function(response) {
    angular.forEach(response.data.directives, function(dirDefinition, dirName) {
        cachedCompileProvider.directive(dirName, dirDefinition);
    });
});

(当然，您不能像上面这样接收来自JSON响应的控制器函数，您将不得不使用其他技术--但希望您能够理解。)