引导后向模块添加指令并应用于动态内容

Question

我有一个网页，其中定义了一个模块 (myModule)，我在其中使用 angularjs 进行提升

angular.bootstrap(element,[myModule.name]);

点击一个按钮后，我添加动态html并编译使用

$compile('<my-element data="data"></my-element>',$scope.$new());

指令添加使用

myModule.directive('myElement',function(){});

问题是当我在调用引导程序之前添加指令时，$compile 最终会正确处理我的指令。但是，如果在调用 bootstrap 后添加指令，$compile 不会对我的 html 执行任何操作。它只是将类 ng-scope 添加到其中，并且不处理指令/标签。

在我的例子中，并不是所有的指令都会在 bootstrap 被调用之前被加载。在调用 bootstrap 后加载指令的情况下，如何在页面中使用它？

谢谢。

编辑： 只是为了澄清。所有指令都是动态加载的。我在引导之前加载的那些工作正常。我在引导失败后加载的那些。当我交换加载的指令时，我可以得到相同的结果，所以它不是指令，但似乎是在引导之后，新添加的指令似乎没有生效。

Answer 1

注册惰性控制器或指令的问题是您必须掌握 $controllerProvider 和 $compileProvider强>分别。

只能在配置阶段完成，因此您必须保留引用，直到加载控制器/指令。

最近我在做控制器的延迟加载，今天我添加了对指令的支持，在这里查看我的代码：

https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/

尤其是这个模块lazy-directives.js

注意：我在我的项目中使用 RequireJS，但是将我的解决方案应用到 yepnope 应该很容易。

Answer 2

This Fiddle 展示如何动态加载/注册和使用：

• Angular 控制器（使用$controllerProvider）
• Angular 指令（使用$compileProvider）
• Angular 部分模板（使用$templateCache）

代码：设置

// Initialize app.lazyController and app.lazyDirective.
// We will later use them to create controller and directives dynamically.
var app = angular.module('app', []);
app.config(function($controllerProvider, $compileProvider) {
        // see page 12 of:
        //    http://www.slideshare.net/nirkaufman/angularjs-lazy-loading-techniques
        app.lazyController = $controllerProvider.register;

        // see: http://jsfiddle.net/8Bf8m/33/
        app.lazyDirective = $compileProvider.directive;
    });

// set of partials
var partials = [];

// store scope & templateCache, so we can dynamically insert partials
var scope, templateCache;

// define main controller
function MainCtrl($scope, $templateCache) {
    $scope.partials = partials;

    scope = $scope;
    templateCache = $templateCache;
}

代码：示例

var maxPartials = 3;
var i = 0;
var timer = setInterval(function() {
    var i = partials.length;

    app.lazyDirective('clickMe', function () { return {
        link : function (scope, element) {
            element.bind('click', function () {
                alert('Clicked: ' + element.text());
            });
        },
    };});

    // define controller
    var ctrlName = 'partial' + i + 'Ctrl';
    app.lazyController(ctrlName, function($scope) {
        $scope.text = 'hi ' + i;
    });

    // add partial template that I have available in string form
    var newPartial = {
        name: 'template' + i,
        content: '<div ng-controller="' + ctrlName + '" class="a' + i + '">' +
        '<input type="text" ng-model="text"></input>'+
        '{{text}} <br/>' + 
        '<button click-me="">Click Me!</button>' +
        '</div> <br/> <br/>'
    };
    partials[i] = newPartial;

    // add template and notify angular of the content change
    templateCache.put(partials[i].name, partials[i].content);
    scope.$apply();

    // stop timer
    if (partials.length >= maxPartials)  clearInterval(timer);
}, 1000);