AngularJS UI-Bootstrap模態傳遞參數到模態

Question

我試圖在幾天後打開一個模式並根據用戶點擊的鏈接傳遞一些參數。

我使用的是AngularJS 1.5.8和UI-Bootstrap 2.1.3以及Bootstrap CSS 3.3.7。我從AngularJS和UI-Bootstrap開始並熟悉它，這應該是直接的，但由於某些原因，它不是。我在Stackoverflow上看過很多不同的解決方案，但沒有一個爲我工作。

我敢肯定，我的錯誤來自控制器的定義，我得到一個「錯誤：$注射器：unpr未知提供商」的錯誤

我的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.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 
}]) 

這應該解決你的問題。

只是重新迭代，我所說的一切都在錯誤消息提供給您的鏈接上。