angularJS и Bootstrap: Ошибка: [$ инжектор: unpr] - PullRequest
Новая
       51

angularJS и Bootstrap: Ошибка: [$ инжектор: unpr]

0 голосов
/ 10 июня 2018

Я новичок в angularJS, также в веб-разработке, поэтому вот моя проблема: я пытался создать веб-страницу книжного магазина, где пользователь использует модальные для ввода данных, проблема в том, когда, пытаясь создать контроллер длямодально, для кнопки отмены, это дает мне ошибку, которую вы видите в заголовке, а именно:

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

1 Ответ

0 голосов
/ 10 июня 2018

Есть несколько ошибок,

(i) Вам необходимо встроить сценарии в тег body, а не oustside тег body 

  <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-приложение 

<div class="modal-header" ng-app="app">

DEMO

...