ผู้ให้บริการที่ไม่รู้จัก: $ modalProvider <- $ modal error กับ AngularJS

Question 1

ฉันได้รับข้อผิดพลาดนี้อยู่เรื่อย ๆ ขณะพยายามติดตั้งหน้าต่าง bootstrap Modal สาเหตุของมันคืออะไร? ฉันคัดลอก / วางทุกอย่างจากhttp://angular-ui.github.io/bootstrap/#/modalที่นี่

Question 2

ข้อผิดพลาดประเภทนี้เกิดขึ้นเมื่อคุณเขียนในการอ้างอิงสำหรับคอนโทรลเลอร์บริการ ฯลฯ และคุณยังไม่ได้สร้างหรือรวมการอ้างอิงนั้น

ในกรณี$modalนี้ไม่ใช่บริการที่รู้จัก ดูเหมือนว่าคุณไม่ได้ผ่าน ui-bootstrap เป็นการพึ่งพาเมื่อ bootstrapping angular angular.module('myModule', ['ui.bootstrap']);นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณใช้ ui-bootstrap (0.6.0) เวอร์ชันล่าสุดเพื่อความปลอดภัย

ข้อผิดพลาดเกิดขึ้นในเวอร์ชัน 0.5.0 แต่การอัปเดตเป็น 0.6.0 ทำให้บริการ $ modal พร้อมใช้งาน ดังนั้นอัปเดตเป็นเวอร์ชัน 0.6.0 และต้องแน่ใจว่าต้องใช้ ui.boostrap เมื่อลงทะเบียนโมดูลของคุณ

ตอบกลับความคิดเห็นของคุณ:นี่คือวิธีที่คุณฉีดการพึ่งพาโมดูล

<!-- 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) {

});

อัปเดต:

บริการได้รับการเปลี่ยนชื่อเป็น$modal$uibModal

ตัวอย่างการใช้ $ 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
});

Question 3

5 ปีต่อมา (สิ่งนี้จะไม่มีปัญหาในขณะนั้น) :

namespacing มีการเปลี่ยนแปลง - คุณอาจสะดุดในข้อความนี้หลังจากที่อัพเกรดเป็นรุ่นที่ใหม่กว่าบูต-UI ; คุณต้องอ้างถึง$uibModal& $uibModalInstance.

Question 4

หมายเหตุเพิ่มเติมสำหรับปัญหาที่ฉันพบในวันนี้: ฉันมีข้อผิดพลาดที่คล้ายกัน"ผู้ให้บริการที่ไม่รู้จัก: $ aProvider" เมื่อฉันเปิดการย่อขนาด / อัปเกรดซอร์สโค้ดของฉัน

ดังที่ได้กล่าวไว้ในบทช่วยสอน Angular docs (ย่อหน้า: "หมายเหตุเกี่ยวกับการลดขนาด")คุณต้องใช้ไวยากรณ์ของอาร์เรย์เพื่อให้แน่ใจว่าการอ้างอิงถูกเก็บไว้อย่างถูกต้องสำหรับการแทรกการอ้างอิง:

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

สำหรับตัวอย่างAngular UI Bootstrap ที่คุณพูดถึงคุณควรแทนที่สิ่งนี้:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
   /* ...example code.. */
}

ด้วยสัญกรณ์อาร์เรย์นี้:

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];

ด้วยการเปลี่ยนแปลงนั้นโค้ดหน้าต่างโมดัล Angular UI แบบย่อของฉันจึงทำงานได้อีกครั้ง

Question 5

คำตอบที่ชัดเจนสำหรับข้อผิดพลาดของผู้ให้บริการคือการอ้างอิงที่ขาดหายไปเมื่อประกาศโมดูลเช่นเดียวกับในกรณีของการเพิ่ม ui-bootstrap สิ่งหนึ่งที่พวกเราหลายคนไม่ได้คำนึงถึงคือการเปลี่ยนแปลงที่สำคัญเมื่ออัปเกรดเป็นรุ่นใหม่ ใช่สิ่งต่อไปนี้ควรใช้งานได้และไม่เพิ่มข้อผิดพลาดของผู้ให้บริการ:

var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);

ยกเว้นเมื่อเราใช้ ui-boostrap เวอร์ชันใหม่ ขณะนี้ผู้ให้บริการโมดอลถูกกำหนดให้เป็น:

.provider('$uibModal', function() {
    var $modalProvider = {
      options: {
        animation: true,
        backdrop: true, //can also be false or 'static'
        keyboard: true
      },

คำแนะนำที่นี่คือเมื่อเราตรวจสอบให้แน่ใจว่ามีการรวมการอ้างอิงและเรายังคงได้รับข้อผิดพลาดนี้เราควรตรวจสอบว่าเราใช้ไลบรารี JS เวอร์ชันใด นอกจากนี้เรายังสามารถค้นหาอย่างรวดเร็วและดูว่ามีผู้ให้บริการดังกล่าวอยู่ในไฟล์หรือไม่

ในกรณีนี้ผู้ให้บริการโมดอลควรเป็นดังนี้:

app.factory("$svcMessage", ['$uibModal', svcMessage]);

อีกหนึ่งบันทึก ตรวจสอบให้แน่ใจว่าเวอร์ชัน ui-bootstrap ของคุณรองรับ angularjs เวอร์ชันปัจจุบันของคุณ หากไม่เป็นเช่นนั้นคุณอาจได้รับข้อผิดพลาดอื่น ๆ เช่น templateProvider

สำหรับข้อมูลตรวจสอบลิงค์นี้:

http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html

หวังว่ามันจะช่วยได้

Question 6

หลังจากตรวจสอบว่าฉันมีการพึ่งพาทั้งหมดฉันได้แก้ไขปัญหาโดยเปลี่ยนชื่อ$modalเป็น$uibmodalและ$modalInstanceเป็น$uibModalInstance

Question 7

var ModalInstanceCtrl = ['$scope', '$modalInstance',  function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];