Tôi tiếp tục nhận được lỗi này khi tôi đang cố gắng triển khai cửa sổ Phương thức bootstrap. Điều gì có thể là nguyên nhân của nó? Tôi đã sao chép / dán mọi thứ từ http://angular-ui.github.io/bootstrap/#/modal tại đây.
Tôi tiếp tục nhận được lỗi này khi tôi đang cố gắng triển khai cửa sổ Phương thức bootstrap. Điều gì có thể là nguyên nhân của nó? Tôi đã sao chép / dán mọi thứ từ http://angular-ui.github.io/bootstrap/#/modal tại đây.
Câu trả lời:
Loại lỗi này xảy ra khi bạn viết phụ thuộc cho bộ điều khiển, dịch vụ, v.v. và bạn chưa tạo hoặc bao gồm phụ thuộc đó.
Trong trường hợp này, $modalkhông phải là một dịch vụ đã biết. Có vẻ như bạn đã không vượt qua ui-bootstrap như một phụ thuộc khi bootstrapping angle. angular.module('myModule', ['ui.bootstrap']);Ngoài ra, hãy đảm bảo rằng bạn đang sử dụng phiên bản mới nhất của ui-bootstrap (0.6.0) để an toàn.
Lỗi xảy ra trong phiên bản 0.5.0, nhưng cập nhật lên 0.6.0 sẽ làm cho dịch vụ $ modal khả dụng. Vì vậy, hãy cập nhật lên phiên bản 0.6.0 và đảm bảo yêu cầu ui.boostrap khi đăng ký mô-đun của bạn.
Trả lời nhận xét của bạn: Đây là cách bạn đưa vào một phụ thuộc mô-đun.
<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">js:
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
});Các $modaldịch vụ đã được đổi tên $uibModal.
Ví dụ sử dụng $ uibModal
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
//code here
});5 năm sau (đây không phải là vấn đề vào thời điểm đó) :
Không gian tên đã thay đổi - bạn có thể tình cờ gặp thông báo này sau khi nâng cấp lên phiên bản bootstrap-ui mới hơn ; bạn cần tham khảo $uibModal& $uibModalInstance.
Chỉ là một lưu ý bổ sung cho một vấn đề mà tôi cũng gặp phải hôm nay: Tôi đã gặp lỗi tương tự "Nhà cung cấp không xác định: $ aProvider" khi tôi bật tính năng thu nhỏ / uglify mã nguồn của mình.
Như đã đề cập trong hướng dẫn tài liệu Angular (đoạn: "Lưu ý về sự tối thiểu hóa"), bạn phải sử dụng cú pháp mảng để đảm bảo các tham chiếu được giữ chính xác cho việc chèn phụ thuộc:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];Đối với ví dụ Angular UI Bootstrap mà bạn đề cập, bạn nên thay thế cái này:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
/* ...example code.. */
}với ký hiệu mảng này:
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];Với thay đổi đó, mã cửa sổ phương thức giao diện người dùng Angular rút gọn của tôi đã hoạt động trở lại.
Câu trả lời rõ ràng cho lỗi nhà cung cấp là thiếu phụ thuộc khi khai báo một mô-đun như trong trường hợp thêm ui-bootstrap. Một điều mà nhiều người trong chúng ta không tính đến là những thay đổi đột ngột khi nâng cấp lên bản phát hành mới. Có, những điều sau sẽ hoạt động và không gây ra lỗi cho nhà cung cấp:
var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);Ngoại trừ khi chúng tôi đang sử dụng phiên bản ui-boostrap mới. Nhà cung cấp phương thức hiện được định nghĩa là:
.provider('$uibModal', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or 'static'
keyboard: true
},Lời khuyên ở đây là khi chúng tôi đã chắc chắn rằng các phần phụ thuộc được bao gồm và chúng tôi vẫn gặp lỗi này, chúng tôi nên kiểm tra phiên bản thư viện JS mà chúng tôi đang sử dụng. Chúng tôi cũng có thể thực hiện tìm kiếm nhanh và xem liệu nhà cung cấp đó có tồn tại trong tệp hay không.
Trong trường hợp này, nhà cung cấp phương thức bây giờ sẽ như sau:
app.factory("$svcMessage", ['$uibModal', svcMessage]);Thêm một lưu ý nữa. Đảm bảo rằng phiên bản ui-bootstrap của bạn hỗ trợ phiên bản anglejs hiện tại của bạn. Nếu không, bạn có thể gặp các lỗi khác như templateProvider.
Để biết thông tin, hãy kiểm tra liên kết này:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
hy vọng nó giúp.
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];