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 回答