angularJS and Bootstrap: Error: [$injector:unpr]

Question

我是 angularJS 的新手，也是网络开发领域的新手，所以这是我的问题：我尝试创建一个书店网页，用户使用模式输入数据，问题是什么时候，试图为模式创建一个控制器，对于取消按钮，它给了我你在标题中看到的错误，即：

"angular.js:14961 Error: [$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');
    };
});

Answer 1

错误很少，

(i) 您需要将脚本嵌入到 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">

DEMO

angularJS and Bootstrap: Error: [$injector:unpr]

angularJS and Bootstrap: Error: [$injector:unpr]

angularjs

bootstrap-4

bootstrap-modal

angularjs-injector