使用 AngularJS 在模态对话框中使用模板

Question

我正在努力让它发挥作用。我更熟悉 jQuery，但这个应用程序没有使用 jQuery，我不想混合使用 2。另外，我认为你不能在 jQuery 中使用模板。无论如何，我会展示我尝试过的代码 sn-ps，也许你可以告诉我哪里出错了。 我有 2 个按钮可以打开一个模式对话框，其中模式的内容存储在模板中，选择的模板取决于单击的按钮..

<button class="btn btn-primary pull-right" style="margin-left: 10px; background: #990000"
        ng-click="showEmail('1')"
        ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">
    T1
</button>
<button class="btn btn-primary pull-right"
        style="margin-left: 10px; background: #990000"
        ng-click="showEmail('2')"
        ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">
    T2
</button>

$scope.showEmail = function (id) {
   var modalInstance = $modal.open({
      templateUrl: (id == '1') ? 'template1.html' : 'template2.html',
      controller: 'AppController',
      resolve: {
         editId: function () {
           return id;
         }
      }
   });

起初我很困惑我应该在哪里引用我想要打开的实际模态 ID（在 html 中），但后来意识到这可能就是模板的用途..

<div class="modal fade" id="dlgEmail" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <p>
                        Content goes here
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" ng-click="doEmail()"
                            style="background-color:crimson;color:white">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

我第一次尝试运行它，我得到一个错误'$modal not defined'。当我查看它时，它说我需要将 $modal 注入到我的控制器中，所以我尝试了这个..

app.controller("AppController",
    function($scope, $http, $modal) {
        var t = this;

一旦我添加了它，我寄予厚望它会起作用，但我得到了另一个错误

'$injector:unpr 未知提供者'.

每个例子听起来都很简单，但我无法让它工作。 任何帮助将不胜感激。

Answer 1

我猜你没有将editId 注入到你的AppController 控制器中，你可以这样做并再次检查：

app.controller("AppController",
    function($scope, $http, $modal, editId) {
        var t = this;