【问题标题】:Angular $injector:unpr with uibModal带有 uibModal 的 Angular $injector:unpr
【发布时间】:2016-09-07 01:25:28
【问题描述】:

代码几乎直接来自 ui-bootstrap 教程。我的主页上有一个按钮,带有一个 ng-click 用于打开模式窗口,但我在开发工具中收到的错误是:

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- modalController

之后的每次点击都会在错误消息中添加一个modalController,例如

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- modalController <- modalController

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- modalController <- modalController <- modalController

home.js

'use strict';

angular.module('myApp')
  .controller('homeCtrl', ['$q', '$state', '$timeout', '$scope', '$http', '$filter',
  '$uibModal', function($q, $state, $timeout, $scope, $http, $filter, $uibModal){

$scope.open = function (size){
  var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'app/main/searchModal.html',
    controller: 'modalController',
    size: size,
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });

  modalInstance.result.then(function (selectedItem) {
    $scope.selected = selectedItem;
    }, function () {
  });
};
...

modalcontroller.js

'use strict';

angular.module('myApp')
.controller('modalController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
  $uibModalInstance.close();
}]);

【问题讨论】:

    标签: javascript angularjs twitter-bootstrap angular-ui-bootstrap


    【解决方案1】:

    问题出在我们(图书馆)的一端。当我们发布 0.14.0 并添加所有 uib 前缀时,我们错过了将其添加到 modalInstance。该问题已在 0.14.3 中修复。

    要在 0.14.0 - 0.14.2 中解决此问题,只需改用 $modalInstance 并注意,当您升级到 1.0 时,您需要更改为 $uibModalInstance 否则代码会再次出错。

    Here's a link GitHub 上的相关问题。

    【讨论】:

      【解决方案2】:

      一切看起来都正确。要检查的另一件事是确保将 angular-ui-bootstrap 库注入到您的应用程序依赖项中:

      angular.module('myApp', ['ui.bootstrap'])
      

      并且您正在使用具有前缀更改的 angular-ui-bootstrap 版本。 0.14.0 版引入了“uib”前缀,1.0.0 版删除了对无前缀组件的支持。在 0.14.0 版本之前,$uibModalInstance 是 $modalInstance。

      【讨论】:

      • angular.module('myApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'smart-table', 'nvd3', 'angucomplete-alt' ]) 是我的依赖项。我正在使用 Angular 1.4.7 和 0.14.0 ui-bootstrap,所以我没有看到任何问题。每次点击都会增加另一个modalController,这让我很反感。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多