angularJS和Bootstrap：錯誤：[$ injector：unpr]

Question

我對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');
    };
});

Answer 1

幾乎沒有錯誤

（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">

DEMO

angularJS和Bootstrap：錯誤：[$ injector：unpr]

問題描述

1 個解決方案

解決方案1
0 已采納 2018-06-10 00:01:58

angularJS和Bootstrap：錯誤：[$ injector：unpr]

問題描述

1 個解決方案

解決方案1 0 已采納 2018-06-10 00:01:58

解決方案1
0 已采納 2018-06-10 00:01:58