[英]angularJS and Bootstrap: Error: [$injector:unpr]
我对angularJS还是Web开发领域的新手,所以这是我的问题:我试图创建一个书店网页,用户在其中使用模态输入数据,问题是何时尝试为模态创建控制器,对于“取消”按钮,它会给我您在标题中看到的错误,即:
“ angular.js:14961错误:[$ injector:unpr]”。
我进行了很多搜索,但是找不到任何解决方案。 我可以打开模态。
注意:我不是英语母语人士,我在西班牙语页面中尝试过,没有运气。 我希望你能帮助我。
编码:
我的index.html
<!DOCTYPE>
<html >
<head>
<meta charset="UTF-8">
<title>Book Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="app" ng-controller="myController as ctrl">
<h1>Welcome to book store</h1>
<table >
<tr>
<th>Titulo</th>
<th>Autor</th>
<th>Editorial</th>
<th>Edicion</th>
</tr>
<tr ng-repeat="x in listaLibros">
<td>{{x.name}}</td>
<td>{{x.autor}}</td>
<td>{{x.editorial}}</td>
<td>{{x.edition}}</td>
</tr>
</table>
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src= "app.js" ></script>
</html>
agregarLibro.html
<html>
<body></body>
<div class="modal-content">
<div class="modal-header" ng-app="app">
<h4 class="modal-title">Agregar libro</h4>
<div class="modal-body">
<h6>Titulo</h6>
<input type="text" ng-model="listaLibros.name">
<h6>Autor</h6>
<input type="text" ng-model="listaLibros.autor">
<h6>Editorial</h6>
<input type="text" ng-model="listaLibros.editorial">
<h6>Edicion</h6>
<input type="text" ng-model="listaLibros.edition">
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="$ctrl.cancel()">X</button>
<button type="button" class="btn btn-success">Agregar libro</button>
</div>
</body>
</html>
和app.js
var app = angular.module("app", ['ui.bootstrap']);
app.controller("myController",function($scope, $http, $uibModal,){
var control = this;
$http.get("dataLibros.json")
.then(function(response){
$scope.listaLibros = response.data;
});
control.open = function(){
var modalInstance = $uibModal.open({
templateUrl: "agregarLibro.html",
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
})
}
});
app.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
几乎没有错误
(i)您需要将脚本嵌入到body
标签中,而不是oustside
body标签oustside
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
(ii)您应该使用`ng-click =“ ctrl.open()”
<button type="button" class="btn btn-default" ng-click="ctrl.open()">Open me!</button>
(iIi)从模态中删除ng-app,一个应用中只能有一个ng-app
<div class="modal-header" ng-app="app">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.