代码：设置

Question

我有一个定义了模块的网页（myModule），我正在使用

来增强angularjs

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

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

进行编译

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

使用

添加指令

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

问题是当我在调用bootstrap之前添加指令时，$ compile最终正确处理我的指令。但是，如果在调用bootstrap之后添加了该指令，则$ compile对我的html没有任何作用。它只是将类ng-scope添加到它，并且不处理指令/标记。

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

感谢。

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

Answer 1

注册延迟控制器或指令的事情是你必须掌握 $ controllerProvider 和 $ compileProvider 分别。

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

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

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

特别是这个模块lazy-directives.js

注意：我在项目中使用 RequireJS ，但将解决方案应用于 yepnope 应该非常简单。

Answer 2

This Fiddle show-cases如何动态加载/注册和使用：

角度控制器（使用$controllerProvider）
Angular指令（使用$compileProvider）
角度局部模板（使用$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);

在bootstrap之后向模块添加指令并应用于动态内容

2 个答案:

代码：设置

代码：示例