Question

的问题

我的app.js包括：

angular.module('myApp', ['myApp.test', 'ui.bootstrap','smart-table''angularModalService','ngRoute','myApp.productInsert',...

test.js：

    'use strict';

angular.module('myApp.test', ['angularModalService'])



 .controller('ComplexController', [
  '$scope', '$element', 'title', 'close', 
  function($scope, $element, title, close) {

  $scope.name = null;
  $scope.age = null;
  $scope.title = title;

  //  This close function doesn't need to use jQuery or bootstrap, because
  //  the button has the 'data-dismiss' attribute.
  $scope.close = function() {
      close({
      name: $scope.name,
      age: $scope.age
    }, 500); // close, but give 500ms for bootstrap to animate
  };

  //  This cancel function must use the bootstrap, 'modal' function because
  //  the doesn't have the 'data-dismiss' attribute.
  $scope.cancel = function() {

    //  Manually hide the modal.
    $element.modal('hide');

    //  Now call close, returning control to the caller.
    close({
      name: $scope.name,
      age: $scope.age
    }, 500); // close, but give 500ms for bootstrap to animate
  };

}]);

然后是test.html

<div class="modal fade">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{title}}</h4>
      </div>
      <div class="modal-body">
        <p>Here's a more complex modal, it contains a form, data is passed to the controller 
         and data is returned from the modal.</p>

        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="name" placeholder="Your Name" ng-model="name">
            </div>
          </div>
          <div class="form-group">
            <label for="age" class="col-sm-2 control-label">Age</label>
            <div class="col-sm-10">
              <input type="number" class="form-control" id="inputPassword3" placeholder="Age" ng-model="age">
            </div>
          </div>
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">OK</button>
        <button type="button" ng-click="cancel()" class="btn">Cancel</button>
      </div>
    </div>
  </div>
</div>

打开模态窗口的主页

'use strict';

angular.module('myApp.ricetta2', ['ngRoute', 'angularModalService','ui.bootstrap'])

        .config(['$routeProvider', function($routeProvider) {
                $routeProvider.when('/ricetta2', {
                    templateUrl: 'views/ricetta/ricetta2.html',
                    controller: 'CartForm'
                });
            }])

        .controller('CartForm', ['$scope','ModalService', function($scope, ModalService) {
                $scope.invoice = {
                    items: [{
                            qty: 10,
                            description: 'Pomodori',
                            cost: 'Kg'}, {
                            qty: 10,
                            description: 'Olio',
                            cost: 'litri'}, {
                            qty: 4,
                            description: 'Pasta',
                            cost: 'Kg'}]
                };

                $scope.addItem = function() {
                    $scope.invoice.items.push({
                        qty: 1,
                        description: '',
                        cost: ''
                    });
                },
                        $scope.removeItem = function(index) {
                            $scope.invoice.items.splice(index, 1);

                        },
                        $scope.total = function() {
                            var total = 0;
                            angular.forEach($scope.invoice.items, function(item) {
                                total += item.qty * item.cost;
                            });

                            return total;
                        };

                $scope.items = ['item1', 'item2', 'item3'];
                $scope.productList = [];



              $scope.showComplex = function() {

                    ModalService.showModal({
                        templateUrl: "views/test/test.html",
                        controller: "ComplexController",
                        inputs: {
                            title: "A More Complex Example"
                        }
                    }).then(function(modal) {
                        modal.element.modal();
                        modal.close.then(function(result) {
                            $scope.complexResult = "Name: " + result.name + ", age: " + result.age;
                        });
                    });

                };


            }]);

当我尝试打开模态窗口时，页面上始终出现错误：

TypeError：modal.element.modal不是函数在ricetta2.js：60 at processQueue（angular.js：13248） at angular.js：13264 在Scope。$ get.Scope。$ eval（angular.js：14466）在Scope。$ get.Scope。$ digest（angular.js：14282）在Scope。$ get.Scope。$ apply（angular.js：14571）完成后（angular.js：9698） at completeRequest（angular.js：9888）在XMLHttpRequest.requestLoaded（angular.js：9829）（匿名函数）@ angular.js：11655 $ get @ angular.js：8596processQueue @ angular.js：13256（匿名函数）@ angular.js：13264 $ get.Scope。 $ eval @ angular.js：14466 $ get.Scope。$ digest @ angular.js：14282 $ get.Scope。$ apply @ angular.js：14571done @ angular.js：9698completeRequest @ angular.js：9888requestLoaded @ angular.js ：9829

我在index.html上链接了所有资源：

<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
        <script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

我对angularjs很新，我不知道解决方案！

全部谢谢

Answer 1

我有同样的问题。交换脚本标签位置解决了我的问题。起初我有这个序列中的脚本标签

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

然后我把它改成了这个。

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

很多时候这些事情都会发生。由于在jQuery之前加载AngularJS而发生冲突。

Answer 2

文档不正确。我为这些例子提交了一份公关。

与此同时改为：

.then( function(modal)
 {
     modal.element.show();
 });

Answer 3

是的，你只需要按顺序排列外部js apis 第一 - ＆gt; jQuery.js第二 - ＆gt; Boostrap.js - ＆gt;像这样的Angular.js

<script src="../../resources/js/jquery.js"  th:src="@{/resources/js/jquery.js}"></script>   
<script src="../../resources/js/bootstrap.js"  th:src="@{/resources/js/bootstrap.js}"></script>
<script src="../../resources/js/angular.js"  th:src="@{/resources/js/angular.js}"></script>
<script src="../../resources/js/angular-modal-service.js" th:src="@{/resources/js/angular-modal-service.js}" ></script>

对不起这个标签＆＃34; th：src＆＃34;我正在使用thymeleaf：）

Answer 4

angularModalService 需要 bootstrap js 您已加载 bootstrap.js 和 jquery.js 您必须先加载 jquery.js ，然后再加载 bootstarp.js ，然后加载 angular.js 。所以你在index.html中链接的资源应该是..

<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dist/angular-modal-service.js"></script>

Answer 5

现在我面临类似的问题，并通过在html顶部添加以下脚本文件来修复它。 SRC =＆＃34; HTTPS：//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" src =＆＃34; http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js＆＃34;

角度模态服务错误 - TypeError：modal.element.modal不是函数

5 个答案: