Question

在最近的一个问题中，我遇到了使用Angular UI for Bootstrap实现的简单模态对话框的问题。

我从this fiddle开始，回答的人提出了this result.

然而，有一件事立刻引起了我的注意！

旧控制器实施

var controllers = angular.module('app.controllers', []);    

controllers.controller('ModalController', ['$scope', '$modal', '$log',
  function ($scope, $modal, $log) {
    // Overarching controller code...
  }
]);

controllers.controller('ModalInstanceController', ['$scope', '$modalInstance', 
  function ($scope, $modalInstance, params) {
    // ...Modal Instance Code...
  }
]);

此代码与Angst UI for Bootstrap Modal不起作用，但出于某种原因，此代码执行：

var ModalController = function($scope, $modal, $log) {
  // Overarching controller code...
};

var ModalInstanceController = function($scope, $modalInstance, params) {
  // Modal Instance Code...
};

......问题是，AngularJS代码通常像第一个例子一样模块化，以避免混乱全局命名空间。

到目前为止，我的实验中没有一个能够获得模块化设置才能获得成功。我尝试了一些简单的替换，我将制作一个控制器或另一个是模块化控制器，希望它只有一个控制器阻止params在控制器之间传递;事实证明并非如此。在声明$scope.params = [];函数之前实现$scope.open()，并在$scope.params函数中填充open同样没有效果。

问题：在AngularUI for Bootstrap系统的上下文中，为什么模块化方法会失败？更重要的是，我怎样才能让它发挥作用？

Answer 1

好的......所以我最近遇到了同样的问题并且也感到困惑。我从不费心去挖掘它。快速访问angular-ui github repo，我在问题跟踪器中找到了。

Angular-Ui演示传递函数引用作为控制器。对于模块化控制器，它需要是一个字符串

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl', /* use string for modular controller */
   /* OR */
    controller: ModalInstanceCtrl, /* use reference for controller as function*/

});

问题跟踪器参考：https://github.com/angular-ui/bootstrap/issues/2330

来自问题跟踪器的工作演示：http://plnkr.co/edit/38vBcPalBBNMgYis4cZX?p=preview

Answer 2

这是你固定的plnkr（http://jsfiddle.net/pEmXt/4/），它有几个问题：

您以错误的顺序定义了模块。
你的ui DI在错误的地方。
您的解析语法错误。
模态实例控制器中的DI缺少依赖项列表中的项目。

解决方法的用法如下：

resolve: {
  objectName: function(){
    return myObject;
  }
}

Answer 3

在第一个示例中，必须将模块'app.controllers'添加到主应用程序的依赖项列表中。

var app = angular.module('app', ['app.controllers']);

在第二个实例中，控制器是全局函数，因此在未明确添加为依赖项的情况下可见。

为什么作为函数的Angular控制器工作，但是包中的控制器不工作？

3 个答案: