如何在angularjs中重新定义模块? [英] How to redefine a module in angularjs?

问题描述

我希望引导后可以将模块附加到主模块.

I was hoping I can append a module to the main module after bootstrap.

我发现了这个问题: https://github.com/angular/angular. js/issues/3881 ，这正是我想要的.

I found this issue: https://github.com/angular/angular.js/issues/3881, which is just what I want.

他们说:

我不再觉得这是必须的，尽管如果重新定义模块会很高兴看到警告(但是即使在测试过程中这也可能是有益的)

I no longer feel this is necessary, although it would be nice to see warnings if we redefine a module (but even this may be beneficial during testing)

我不确定redefine a module是什么意思，所以我根据自己的猜测进行了尝试:

I'm not sure what redefine a module mean, so I tried it as my guessing:

html

<div ng-controller="Ctrl">
  {{hi }}
  <input ng-model="hi" />
  <button ng-click="say()">Say</button>
  <ul>
    <li phone="{{p}}" ng-repeat='p in ps'></li>
  </ul>
</div>

您会看到有一个phone指令.

角度代码

angular.module('ctrl',[])
.controller('Ctrl', ['$scope', function($scope){
  $scope.hi = 'Hi';
  $scope.say = function() {
    alert("Say something");
  };
  $scope.ps = ["1234567890123","001122334455667"];
}]);


angular.module('app', ['ctrl']);

angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
});

您可以看到还没有phone定义.

You can see there is no phone definition yet.

然后我尝试重新定义app模块并追加一个新的phone模块:

Then I try to redefine the app module and append a new phone module:

angular.module('phone', [])
.directive('phone', function() {
  return {
    restrict: "A",
    scope: {
      p : "@phone"
    },
    link: function(scope,el){
      el.text(scope.p.substr(0,5)+"...");
      el.css("cursor", "pointer");
      el.on("click", function(){
        el.text(scope.p);
        el.css("cursor", "text");
      });
    }
  };
});

setTimeout(function() {
    console.log('redefine module');
    angular.module('app', ['ctrl', 'phone']);
}, 3000);

它将在3秒内运行.

但这仍然无法正常工作.我不确定我的方法是否正确，如何解决?

But that's still not working. I'm not sure if my approach is correct, how to fix it?

您可以在此处观看实时演示: http://jsbin.com/xukafo/1/edit

You can see a live demo here: http://jsbin.com/xukafo/1/edit

已更新:

让我说清楚.我要附加到主模块的模块是第三方模块，该模块已经定义了一些模块和指令.由于它又大又慢，因此我想异步加载它，并将其附加到main(bootstrapped)模块中.我无法修改该模块的源代码.

Let me make it clear. The module I want to append to the main module is a 3rd party module, which has already defined some modules and directives. Since it's big and slow, I want to load it asynchronously, and append it to the main(bootstrapped) module. I can't modify the source code of that module.

已经有一个棘手的解决方案: https://stackoverflow.com/a/18365367/4022015

There is already a tricky solution: https://stackoverflow.com/a/18365367/4022015

我尝试过该解决方案，它可以工作，但是永远无法通过量角器e2e测试.因此，我创建了一个附加模块"功能请求，但告诉它已经存在一个(问题中的一个).人们说我们不需要此功能，因为我们可以重新定义"模块，但是我不知道如何重新定义"它.所以有这个问题.

I had tried that solution, it's working but can never pass protractor e2e testing. So I created a feature request for "appending a module" but told there is already one exist(the one in the question). And people say we don't need this feature because we can "redefine" a module, but I don't know how to "redefine" it. So there is this question.

推荐答案

重新定义模块意味着首先定义一个模块:

Redefining a module means, first defining a module:

angular.module('module1', []);

，然后在其他地方再次定义它:

and then defining it again somewhere else:

angular.module('module1', [])
    .config(...);

目的是添加一个.config块(请注意，使用单个参数调用.module():)

whereas the intention is to add a .config block (notice that .module() is called with a single parameter:)

angular.module('module1')
    .config(...);

这篇关于如何在angularjs中重新定义模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！