Question

我正在处理需要将可重用组件“注入”页面的内容管理系统。

我想注入以下组件（html和javascript）。

<script type="text/javascript">
if(typeof angular == 'undefined') {
   document.write(unescape("%3Cscript type='text/javascript' src='/resources/scripts/lib/angular.min.js'%3E%3C/script%3E"));
   document.write(unescape("%3Cscript type='text/javascript' src='/resources/scripts/pricing/app.js'%3E%3C/script%3E"));     }    
}
  </script>           
<div ng-app="pricing" ng-controller="PriceController as pc" ng-init="pc.getPrices('myprod', 'PER')">
 Some text {{ pc.prices.msg["startdat tarief"] | jsDate }} . 
 More text {{ pc.prices.msg["einddat product"] | jsDate }}.

</div>

组件必须能够在页面上多次注入。

问题是控制器工作正常，但仅适用于第一次注射。

这可能与我多次使用同一个应用程序有关。

我对角度很新。

如何多次注入相同的组件？

请注意，我无法在更高级别启动应用。因为这需要内容管理员编辑所有页面，我们juist想要用javascript注入HTML组件（即代码片段）。

Answer 1

您不能在一个页面上拥有多个ng-App指令。来自Angular.js documentation：

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。 AngularJS应用程序不能互相嵌套。

如果在树中放置ng-App不是一个选项，则必须重新编写组件，以便每个组件都获得唯一的angular.module()，并且在注入组件时，它将需要解雇angular.bootstrap()。

Answer 2

如果您能够为模块div添加唯一ID，则可以按如下方式手动引导角度应用程序：

function bootstrapAngular(id) {
    angular.bootstrap(document.getElementById('module-' + id), ['app']);
}

angular.module('app', []).controller('sample', function ($scope) {
   $scope.foo = 'bar'; 
});

bootstrapAngular(1);
bootstrapAngular(2);
bootstrapAngular(3);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="module-1">
    <div ng-controller="sample">
        {{ foo }}
    </div>
</div>
<div id="module-2">
    <div ng-controller="sample">
        {{ foo }}
    </div>
</div>
<div id="module-3">
    <div ng-controller="sample">
        {{ foo }}
    </div>
</div>

Angularjs在页面上多次使用相同的ng-app

2 个答案: