Angular 引导模式的 AngularJS 注入问题答案

【问题标题】：AngularJS inject issue with Angular Bootstrap modalAngular 引导模式的 AngularJS 注入问题
【发布时间】：2013-11-30 19:06:34
【问题描述】：

我正在集成来自 Angular Bootstrap 的模态，并尝试将 here 中的代码示例调整到我的应用程序中。我收到错误：Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

我需要做什么才能使 $modalInstance 工作？我从代码示例中看到他们已经编写了它，因此它在函数的范围内，但我不确定在链接控制器时如何编写。

angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
  function($http, $rootScope, $modal) {
    return {
      loginModal: function(callback) {
        var modalInstance = $modal.open({
          templateUrl: '/partials/main/signin',
          controller: 'ModalInstanceCtrl'
        });
        modalInstance.result.then(function(selectedItem) {
          $scope.selected = selectedItem;
        }, function() {});
      }
    };
  }
]);

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

好的 - 问题实际上出在我的模板上。我已将示例中的部分修改为：

<div ng-controller="ModalInstanceCtrl">
  <div class="modal-header">
    <h3>I am a modal!</h3>
  </div>
  <div class="modal-body">
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{ item }}</a>
      </li>
    </ul>
    Selected: <b>{{ selected.item }}</b>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</div>

虽然实际上我需要删除 ng-controller 引用。

<div>
  <div class="modal-header">
    <h3>I am a modal!</h3>
  </div>
  <div class="modal-body">
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{ item }}</a>
      </li>
    </ul>
    Selected: <b>{{ selected.item }}</b>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</div>

我仍然觉得我在 Angular 上磕磕绊绊，但这似乎可以解决问题！

【讨论】：

如果这有帮助的话，我创建了一个使用 Angular、Angular-UI 和 Bootstrap 3 创建预定义模态的服务，您还可以添加自己的模态部分和控制器来生成模态，这是一个演示：codepen.io/m-e-conroy/pen/ALsdF你可以在gitHub上找到代码：github.com/m-e-conroy/angular-dialog-service
当然，希望对您有所帮助。如果没有别的可能只是看看代码来获得想法。
m.e.conroy 的工作很棒！谢谢你这样做:)
谢谢，这把我逼疯了。

【解决方案2】：

如modal example angular ui 所示，您不必指定 ng-controller 元素。定义modal时可以指定controller属性。

    var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            items: function () {
                return $scope.items;
            },
            dataModel: function () {
                return $scope.data;
            }
        }
    });

【讨论】：