Question

由于我正在进行的现有项目的结构，我坚持使用如下所示的模板：

<div ng-app="example">
  <div ng-controller="MainCtrl" id="inner">
    {{ inside }}
  </div>
</div>
<div ng-controller="MainCtrl" id="outer">
  {{ outside }}
</div>

#outer应该使用与#inner相同的控制器，但因为它位于ngApp范围之外，{{ outside }}不会被评估。很遗憾，我无法更改模板结构，因此我尝试编译#outer的内容，如下所示：

app.run(function($rootScope, $compile){
  $rootScope.$apply($compile(document.getElementById('outer'))($rootScope));
});

这样可行，但控制器功能将执行两次，这是不希望的。有没有更好的方法来实现我的目标？

Working example on Plunker

Answer 1

你可以做什么，不是在html中定义ng-app，而是通过javascript引导角度。例如，你可以做angular.bootstrap（document，['example']）;其中'example'是应用程序的角度模块，例如angular.module（'example'，[ 'ngResource'，'ui.router'，.... ]）; 你可能已经定义了自己。这样，您就可以在整个文档范围内定义ng-app。

Answer 2

这是正常的，你正在初始化两次控制器。你可以简单地创建另一个div，包装你想要的所有div并使用别名。但是这仍然会初始化两次，但是每个div都会有不同的值，比如第一个div上的{{inside}}与第二个div不一样。

   <div ng-app="example">
    <div>
     <div ng-controller="MainCtrl as FirstCtrl" id="inner"> // alias FirstCtrl
     {{ inside }}
     </div>
    </div>
    <div ng-controller="MainCtrl as SecondCtrl" id="outer"> // alias SecondCtrl
     {{ outside }}
    </div>
  </div>

但是如果你打算只使用一次相同的控制器，就我而言，你必须在一个div中包装你想要使用相同控制器的所有div，例如：

 <div ng-app="example" ng-controller="MainCtrl">
  <div id="inner">
    {{inside}}
  </div>
  <div id="outer">
   {{outside}}
  </div>
 </div>

这只会初始化一次。其他方式，可以在 html / body 标记中附加 ng-app 和 ng-controller 。

如何使用ngApp范围之外的控制器

2 个答案: