Angular UI Bootstrap Modal：[$ injector：unpr]未知提供者：$ uibModalInstanceProvider

這有點奇怪。當我在網上搜索這個問題時，我看到很多谷歌搜索結果和SO解決方案......但似乎沒有任何工作！

簡而言之，我試圖實現AngularUI Bootstrap模態。我不斷收到以下錯誤：

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

這裏是我的HTML：

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right"> 
     <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a> 
    </span> 
    </div> 
</nav>

這裏是我的控制器：

var app = angular.module('nav', ['ui.bootstrap']); 

app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) { 
    $scope.open = function() { 
    var uibModalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: 'addEntry/addEntry.html', 
     controller: 'addEntryCtrl', 
    }); 
    }; 
}]);

最後，這裏是我的模態代碼：

var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']); 

app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) { 
    $scope.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 

    $uibModalInstance.close(); 
}]);

我試過的解決方案：

更新兩個角度引導（版本：0.14.3）和角（V1.4.8）
改變uibModalInstance到modalInstance
改變$ uibModalInstance到modalInstance
把我addEntryCtrl我ModalInstance內

有什麼想法？這已經讓我長達近2天了。

*編輯*

我應該注意兩點：

1）當我刪除$ uibModalInstance從addEntry的依賴，我的HTML表單提交按鈕只是正常工作和形式看起來完美。即使重定向正確發生（提交後）。問題依然存在：模態仍然停留在屏幕上，並且拋出$ uibModalInstance未定義的錯誤。這是有道理的，因爲我把它作爲一個依賴關係去除了，但我顯然仍然需要這個模式在提交時關閉。

2）此外，我有幾乎相同的代碼在我的應用程序的另一部分工作。唯一的區別是它通過工廠工作。否則，代碼是相同的。因此，我確信我的依賴關係都在那裏，版本也是正確的。所以。嚇壞。奇怪。

謝謝！

來源

2015-11-26 Benjamin Hoffman

這些代碼塊是否屬於IIFE？否則，你會覆蓋'app'變量（可能會很麻煩）。此外，你的第二個代碼塊包含一個未關閉的函數和數組。這可能是一個錯字，或者你只是省略了後面的部分，但你應該嘗試使問題中的代碼完整 – Phil

另外，我在（http://stackoverflow.com/q/33600137/283366）之前看到過這個相同的錯誤，但該問題沒有得到任何有用的答案。僅供參考，'$ uibModalInstance'在我的應用程序中正常工作 – Phil

您是否正在使用ui-bootstrap 0.14.2？ '$ uibModalInstance'被加入0.14.3〜https://github.com/angular-ui/bootstrap/issues/4778 – Phil

回答找到了！在與我的朋友打黑後，我們發現了答案。我想在這裏發佈它，以防其他人閱讀此內容。

事實證明，我們的模式窗口中有一個ng控制器，它位於div標籤中，該標籤包裹了模態中的整個html表單。以前，當我們的表單不在一個模式（它有一個單獨的URL）時，這種方式工作正常，但由於某種原因，它在模式中時會中斷。 ng控制器參考了addEntryCtrl。刪除它後，立即工作的形式！

來源

2015-11-29 07:48:18

非常感謝，我一直在尋找這個問題的正確答案，這應該寫在ui.bootstrap文檔中的某處。 –

感謝您花時間發佈更新！ – Moulde

感謝您的回答 – adelmo00

您正在嘗試引用作爲單獨模塊一部分的控制器。爲了這個工作，你需要注入你的輔助模塊（addEntry）到你的主模塊（導航）：

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);

來源

2015-11-26 04:13:16

很好的建議，但這絕對不是OP的錯誤來源 – Phil

偉大的意見。。沒有解決我的問題，雖然:( –

@BenjaminHoffman你忘了包括腳本（角UI的Bootstrap）文件？ – NPToita

問題在於你在2個位置指定了一個（或兩個）控制器 - 當打開一個模式並在一個模板內時 - 這不是必需的。 從模板中刪除ng控制器和事情將按預期工作。信任我，它會工作。

來源

2016-03-05 06:28:20 napoleonjk

這是最好的答案。 – Jeremey

這正是我面臨的問題。因爲我只是想使用指令，所以我沒有自己的控制器。我把指令的控制器放到了標籤中，導致了問題。刪除ng-controller屬性可以很好地解決它。謝謝！ – hailong

這個答案是完全錯誤的 - 檢查這個小提琴：https://jsfiddle.net/s8bLdg2d/或這個plnkr https://plnkr.co/edit/FElOoLllZmT7kaGVtz5V?p=preview – lin

事實證明，如果您在html模板中指定了控制器（使用ng-controller="..."），它將無法解析$uibModalInstance。指定從調用$uibModal.open({controller="...", ...})的控制器將允許它正確解析。

既然你只需要dismiss()和close()方法，你可以從$scope（命名爲$dismiss和$close），而不是讓他們，因爲這將在實例化控制器的兩種方式正確解析。

var app = angular.module('addEntry', ['ui.bootstrap']); 
app.controller('addEntryCtrl', ['$scope', function($scope) { 
    $scope.cancel = function() { 
     $scope.$dismiss('cancel'); 
    }; 

    $scope.$close(); 
}]);

來源

2016-03-16 13:02:45

當您使用$ uibModal.open（）（見下），並指定明確的控制器名，你不應該把指令NG控制器在模板中。這會導致錯誤。沒有ng-controller在查看！

var uibModalInstance = $uibModal.open({ 
    animation: true, 
    templateUrl: 'addEntry/addEntry.html', 
    controller: 'addEntryCtrl', 
});

來源

2016-12-06 08:55:39 icedfluid

Angular UI Bootstrap Modal：[$ injector：unpr]未知提供者：$ uibModalInstanceProvider

回答

相關問題