在角度注入$模态时出错

我想根据某些条件打开模式弹出窗口。不过，我得到以下错误 Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal at Error (<anonymous>)

以下是我的代码：“ui.bootstrap”包含在应用程序中。

angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal) { 

$scope.selectRow = function (position) { 

    $scope.changed = false; 
    if ($scope.select !== undefined && $scope.selectedRow !== position){ 
      $scope.changed = true; 
      $scope.open(); 
    } 
    $scope.select = position; 
}; 


$scope.open = function() { 
    console.log('Opening modal'); 
    var modalInstance = { 
     templateUrl: 'modal.html', 
     dialogClass: 'modal-selection', 
     controller: ModalInstanceCtrl 
    }; 
    $modal.open(modalInstance); 
}; 


var ModalInstanceCtrl = function ($modalInstance) { 

    $scope.ok = function() { 
     $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}; 
});

我的HTML：

<div id="modal-select" > 
    <h3> 
     Choose appropriate change 
    </h3> 
    <div> 
     <ul> 
      <li><a href="#">Change 1</a></li> 
      <li><a href="#">Change 2</a></li> 
      <li><a href="#">Change 3</a></li> 
      <li><a href="#">Change 4</a></li> 
     </ul> 
    </div> 
    <div> 
     <button class="button" ng-click="cancel()"> 
      Cancel 
     </button> 
     <button class="button" ng-click="ok()"> 
      Done 
     </button> 
    </div> 
</div>

来源

2013-12-13 Priyabrat Nanda

错误是因为我已经ui.bootstrap 0.5.0。我更新到0.6.0并重建应用程序以包含此问题，并解决了该问题。

来源

2013-12-13 23:10:43

从角网站： This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example

你有 'ui.bootstrap' 作为一个依赖于当前的模块？

angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal)

应该是：

angular.module('myApp', ['ui.bootstrap']).controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal)

来源

2013-12-13 22:13:44

ui.bootstrap是已经添加到父app.js文件中，原因是旧版本的ui.bootstrap。感谢您的意见。 –

@Oleg - 这完全正确！只要我将它添加到我的模块，它就完美了！ – webdad3

我解决这个问题，通过简单地追加$ modal.open（{...到$ scope.modalInstance变量。

(function() { 
var app = angular.module('app'); 

app.controller('ModalCtrl', [ 
    '$scope', '$modal', function ($scope, $modal) { 
     $scope.modalInstance = {}; 
     $scope.open = function() { 
      $scope.modalInstance = $modal.open({ 
       templateUrl: 'Template id goes here', 
       controller: 'ModalInstanceCtrl' 
      }); 
     }; 

    } 
]); })();

的 'ModalInstanceCtrl'

(function() { 
var app = angular.module('app'); 

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) { 
     $scope.submit = function (myForm) { 
      //submit code goes here 
     }; 

     $scope.cancel = function() { 
      $modalInstance.close(); 
     }; 
    } 
); })();

来源

2014-09-04 13:21:58

在角度注入$模态时出错

回答

相关问题