Question

我正在尝试创建一个扩展管理器，用户可以在其中运行和测试他们的Angularjs指令。

用户创建一个extension对象并将其传递给我注册指令的函数。

angular.module('CloudBoxes').directive(extension._id, 
    function () {
        return {
            template: extension.html,
            restrict: 'E',
            replace: true,
            link: extension.js.controller,
            scope: extension.js.scope
        };
    }
);

测试对象extension

{
    _id: "testid",
    js: {
        title: "System.Dir",
        fa: "fa-folder",
        include: ["$http"],
        controller: function (scope, element, attrs) {
            alert("I am ready");
        },
        scope: {
            args: "=",
        }
    },
    html: "<div></div>"
};

我想在我的一个控制器上使用$compile来测试这个动态添加的指令。

$scope.$on('startExtension', function (event, id) {
    var el = $compile("<" + id + ">" + "</" + id + ">")($scope);
    $element.append(el);
});

关于id事件的

startExtension参数与我用于动态定义指令的extension._id完全相同。

但是在$ compile之后，指令没有被替换。在DOM上，它就像下面的

<testid class="ng-scope"></testid>

感谢您的帮助。

Answer 1

一旦AngularJS应用程序被引导，就会创建一个注入器，其中包含当时注册的所有内容。注册新组件不会将其添加到注射器，因此$compile看不到它。

执行此操作的一种方法是创建第二个AngularJS应用程序，每次需要添加新组件时都会重新创建该应用程序。您需要在与主应用程序分开的DOM中创建它，以防止两者之间发生冲突（可能在iframe中）。

Answer 2

哦，我的手指！我想死去试图找到一种方法。但终于找到了办法呢！

App.js

var providers = {};
angular
    .module('CloudBoxes', [], function ($controllerProvider, $compileProvider, $provide) {
        providers = {
            $controllerProvider: $controllerProvider,
            $compileProvider: $compileProvider,
            $provide: $provide
        };
    });

extensionFunction

var queueLen = angular.module('CloudBoxes')._invokeQueue.length;
if (extension.js.window) {
    angular.module('CloudBoxes').directive(extension._id, insertArrayAt([
        function () {
            return {
                template: extension.html,
                restrict: 'E',
                replace: true,
                link: extension.js.controller,
                scope: extension.js.scope
            };
        }
    ], 0, extension.js.include));
    var queue = angular.module('CloudBoxes')._invokeQueue;
    for (var i = queueLen; i < queue.length; i++) {
        var call = queue[i];
        var provider = providers[call[0]];
        if (provider) {
            provider[call[1]].apply(provider, call[2]);
        }
    }
    setBindings(extension);
} else {
    setBindings(extension);
}

感谢创建此fiddle的人！

动态定义的指令未编译

2 个答案: