AngularJSはAngular Bootstrap Modalで問題を注入します
-
21-12-2019 - |
質問
角ブートストラップからモーダルを統合し、コードサンプルをここで私のアプリに。エラーが発生しました:Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
$ MODALINSTANCEの仕事をするために何をする必要がありますか?コードサンプルから、それらが関数の範囲内にあるようにそれを書いたことを見ましたが、コントローラを連鎖するときに物事の書き方はわからない。
angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
function($http, $rootScope, $modal) {
return {
loginModal: function(callback) {
var modalInstance = $modal.open({
templateUrl: '/partials/main/signin',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {});
}
};
}
]);
. 解決
OK - 問題は実際に私のテンプレートと一緒でした。サンプルから部分を変更した:
<div ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
.
実際にはNGコントローラのリファレンスを削除する必要がありました。
<div>
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
.
私はまだ怒っているようにしているように感じますが、これはトリックをしているようでした!
他のヒント
モーダル例angular ui 、必要ありませんNG-Controller要素を指定してください。モーダルを定義するときは、コントローラ属性を指定できます。
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
},
dataModel: function () {
return $scope.data;
}
}
});
. 所属していません StackOverflow