AngularJS模态的AngularJS注入问题

Question

我正在集成Angular Bootstrap中的模式，并尝试将代码示例从此处适应我的应用程序。我得到错误：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() {});
      }
    };
  }
]);

Answer 1

好的-问题实际上出在我的模板上。我已将样本中的partial修改为：

<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上绊脚石，但这似乎可以解决问题！