angularjs - 在运行时动态注册指令

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

这是“延迟加载 Angular 工件”问题的一个子集(我已经探索过 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 响应中接收 Controller 函数，你将不得不使用其他技术 - 但希望你明白这一点。)