8

我有一个定义了模块(myModule)的网页,我正在使用

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 添加到其中,并且不处理指令/标记。

就我而言,并非所有指令都会在调用引导程序之前加载。在调用引导程序后加载指令的情况下,如何在页面中使用它?

谢谢。

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

4

2 回答 2

8

注册惰性控制器或指令的事情是您必须分别掌握$controllerProvider$compileProvider

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

最近我在处理控制器的延迟加载,今天我添加了对指令的支持,在这里查看我的代码:

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

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

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

于 2012-11-22T22:32:06.937 回答
2

这个小提琴展示了如何动态加载/注册和使用:

  • 角度控制器(使用$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);
于 2014-06-15T09:16:53.870 回答