AngularJS UI-Bootstrap 模态向模态传递参数

Question

几天以来我一直在尝试打开一个模式并根据用户将单击的链接传递一些参数。

我将 AngularJS 1.5.8 和 UI-Bootstrap 2.1.3 与 Bootstrap CSS 3.3.7 一起使用。我从 AngularJS 和 UI-Bootstrap 开始并熟悉它，这应该很简单，但由于某些原因它不是。我在 Stackoverflow 上查看了许多不同的解决方案，但没有一个对我有用。

我确定我的错误来自控制器定义，因为我收到“错误：$injector:unpr Unknown Provider”错误

我的 HTML：

<div ng-controller="ctrlForm" class="container-fluid">

    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">{{modalTitle}}</h3>
        </div>
        <div class="modal-body" id="modal-body">
            {{modalContent}}
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" type="button" ng-click="$close()">Cancel</button>
        </div>
    </script>

    <form name="myForm" class="form-horizontal">
        <div class="row">
            <div class="col-xs-12 hidden-lg">
                <input name="lala" type="radio" ng-model="bSType" value="type1" ng-Model="mdlType1" ng-checked="!mdlType2">&nbsp;Type 1 - 
                <a href="#" role="button" ng-click="open('type1')">What is it?</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 hidden-lg">
                <input type="radio" ng-model="bSType" value="type1" ng-Model="mdlType2" ng-checked="!mdlType2">&nbsp; Type 2 - <a href="#" role="button" ng-click="open('type2')">What is it?</a>
            </div>
        </div>
      </form> 
</div>

我正在使用 javascript，方法是在 :

之前通过以下调用调用我的代码

<script src="../scripts/parent/parent.js"></script>

parent.js 包含以下代码：

var app = angular.module('TCB', ['ui.bootstrap', 'ngRoute']);

  //[Edit] I have updated the method's signature below as recommended
  angular.module('TCB').controller('NavBarCtrl', ["$scope", function ($scope) {
  $scope.isCollapsed = true;
});

//[Edit] Same for method below
angular.module('TCB').controller('ctrlForm', ["$scope", function ($scope) {

  $scope.Languages = {

    language01: "Fran" + String.fromCharCode(231) + "ais",
    language02: "Anglais"
  }

  $scope.Children = {
    child01: 01,
    child02: 02,
    child03: 03,
    child04: 04
  }

  $scope.numberChildren = $scope.Children.child01;

});

//[Edit] And same for this one
angular.module('TCB').controller('ctrlForm', ["$scope", "$modal", "$log", function ($scope, $modal, $log) {

  var key = 1000;
  items = ['type1', 'type2', 'type3'];

  $scope.open = function (type) {

    alert("type: " + type);
    var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
            item: function () {
                return type;
            }
        }
    });

    modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

var ModalInstanceCtrl = function ($scope, $modalInstance, item) {

  alert("I'm on modal " + item)


  $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
  };
};

[编辑] 我已经在头部引用了所有需要的脚本文件和 css：

<link rel="stylesheet" type="text/css" href="../css/ui-bootstrap-csp.css" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../scripts/platformOverrides.js"></script>
<script type="text/javascript" src="../scripts/index.js"></script>
<script type="text/javascript" src="../scripts/angular.min.js"></script>
<script type="text/javascript" src="../scripts/angular-touch.min.js"></script>
<script type="text/javascript" src="../scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="../scripts/angular-route.min.js"></script>
<script type="text/javascript" src="../scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

详细的错误信息是：

angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20ctrlForm
at Error (native)
at http://localhost:4400/scripts/angular.min.js:6:412
at http://localhost:4400/scripts/angular.min.js:43:174
at Object.d [as get] (http://localhost:4400/scripts/angular.min.js:40:432)
at http://localhost:4400/scripts/angular.min.js:43:236
at d (http://localhost:4400/scripts/angular.min.js:40:432)
at e (http://localhost:4400/scripts/angular.min.js:41:158)
at Object.invoke (http://localhost:4400/scripts/angular.min.js:41:243)
at S.instance (http://localhost:4400/scripts/angular.min.js:89:436)
at p (http://localhost:4400/scripts/angular.min.js:65:128)(anonymous function) @ angular.js:13920(anonymous function) @ angular.js:10467$apply @ angular.js:17787(anonymous function) @ angular.js:1761invoke @ angular.js:4718c @ angular.js:1759Bc @ angular.js:1779fe @ angular.js:1664(anonymous function) @ angular.js:31763b @ angular.js:3207Sf @ angular.js:3497d @ angular.js:3485

Answer 1

如果您点击您的链接，它会告诉您错误是由于 $injector 无法解决您的依赖关系造成的。当 javascript 获取 minified/uglified/whatever 时，这是 Angular 的一个常见问题，您正在对它进行生产。

问题是当你有例如控制器；

angular.module("TCB").controller('ctrlForm', function ($scope, $modal, $log) {
  // your code
})

缩小将$scope, $modal and $log 更改为不告诉角度注入什么的随机变量。解决方案是像这样声明您的依赖项：

angular.module("TCB")
  .controller("ctrlForm", ["$scope", "$modal", "$log", function($scope,  $modal, $log) {
  // your code
}])

这应该可以解决您的问题。

再次重申，我所说的一切都在错误消息提供给您的链接中。