Question

点击按钮

加载第二个控制器的问题

我可以在另一个控制器中使用控制器（就像我的例子下面）
点击＆＃34; showMore＆＃34; div，是否可以打电话给另一个人控制器在对话框中加载内容？

的Page1.jsp

<div ng-controller="FirstController">
  <div ng-click="showMore()">Text 1</div>
  <div ng-click="showMore()">Text 2</div>
</div>

<!-- my modal dialog -->
<script type="text/ng-template" id="SecondController.html">
 <div ng-controller="SecondController" style="top:20px;left:300px;position:absolute;">
   <div ng-repeat="content in Contents">{{content}}</div>
 </div>
</script>

page1.js

var app = angular.module('MyApp',[]);
app.controller("FirstController", function($scope, $templateCache){

  $scope.showMore = function(){

     $templateCache("SecondController.html");
     // what should be done here to open Second Controller 
     // and populate "Contents" div
  }

});

Answer 1

您无需明确“加载”控制器。当编译ng-controller指令或使用路由时，Angular会加载关联的控制器。

对于你的情况，你可以这样做：

在FirstController控制器中，在范围上声明一个布尔值：

$scope.showMore = false;

在视图中：

<div ng-controller="FirstController">
  <div ng-click="showMore = true">Text 1</div>
  <div ng-click="showMore = true">Text 2</div>
</div>

<div ng-if="showMore" ng-include="'SecondController.html'"/>

你也可以使用状态angular-ui-router（正如另一个答案所建议的那样），但我觉得状态更适合于明确定义的应用状态，而不是你想要的对话框中的状态。

P.S。

此外，您为模板命名的方式 - 即“SecondController.html” - 表明您将控制器和视图视为耦合。他们不应该。控制器不应该关心它是否具有关联的view / html，它是什么以及是否显示该HTML。所有控制器都应该关心的是管理它控制的应用程序的一小部分ViewModel“状态”，以及在ViewModel和Models之间编组数据。

Answer 2

我可以在另一个控制器中使用控制器（如下面的例子）

是的，您设置模板的方式将允许您为模态子部分使用单独的控制器。然而，以另一种方式解决它可能会更好。

点击“showMore”div，是否可以调用另一个控制器来加载对话框中的内容？

角度控制器很少直接交互，因此信息主要通过服务或广播传递，具体取决于您的需要。在这种情况下，您需要在父作用域（FirstController）或Secondcontroller.Contents中填充Contents变量。在后一种情况下，您可能需要将ng-repeat引用更改为SecondController.Contents。

我建议在理解你的意图时，最容易实现预期功能的方法是使用像f.e.这样的模态库。 Angular UI：http://angular-ui.github.io/bootstrap/或ngDialog https://github.com/likeastore/ngDialog。除非您有特殊原因，否则这两个项目都有很好的使用模态对话框的示例，您可以根据自己的需要调整控制器。

Answer 3

您可以拥有嵌套控制器，但是除非您执行<ng-include src="{{ somevar }}"等丑陋的事情，否则不会从模板加载标记内容（不要这样做）

要真正拥有真正的嵌套路线，最好使用以下内容：

angular-ui-router：[https://github.com/angular-ui/ui-router]
有角度的路线段：[http://angular-route-segment.com/]

如何从AngularJS中的第一个控制器点击按钮加载第二个控制器

3 个答案: