最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - AngularJS angular-modal-service giving me an error - Stack Overflow

programmeradmin1浏览0评论

I'm trying (unsuccessfully) to use AngularModalService. Doing a copy/paste job from the admittedly simple tutorial gives me an error.

This is the tutorial, for reference: /

Javascript:

var app = angular.module('app', ['angularModalService']);

app.controller( 'Controller', function($scope,ModalService) {

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal(); // this is the problem
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };
});

app.controller('ModalController', function( $scope, close ) {
    $scope.close = function(result) {
        close(result, 500);
    };
});

</script>

HTML (uglier in the tutorial, but should be simpler)

<div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller">
    <h3>Angular Modal Service</h3>
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
    <p>{{message}}</p>

    <!-- The html template -->
    <script type="text/ng-template" id="modal.html">
        <div class="modal fade">
            <button type="button" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
        </div>
        <div class="modal-body">
            <p>It is your call...</p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
        </div>
    </script>

</div>

The error I get is "undefined is not a function" on the line denoted above, which is:

modal.element.modal();

Google search has lead me to nothing concrete. Hopefully I'm just overlooking something silly.

I'm trying (unsuccessfully) to use AngularModalService. Doing a copy/paste job from the admittedly simple tutorial gives me an error.

This is the tutorial, for reference: http://www.dwmkerr./the-only-angularjs-modal-service-youll-ever-need/

Javascript:

var app = angular.module('app', ['angularModalService']);

app.controller( 'Controller', function($scope,ModalService) {

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal(); // this is the problem
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };
});

app.controller('ModalController', function( $scope, close ) {
    $scope.close = function(result) {
        close(result, 500);
    };
});

</script>

HTML (uglier in the tutorial, but should be simpler)

<div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller">
    <h3>Angular Modal Service</h3>
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
    <p>{{message}}</p>

    <!-- The html template -->
    <script type="text/ng-template" id="modal.html">
        <div class="modal fade">
            <button type="button" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
        </div>
        <div class="modal-body">
            <p>It is your call...</p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
        </div>
    </script>

</div>

The error I get is "undefined is not a function" on the line denoted above, which is:

modal.element.modal();

Google search has lead me to nothing concrete. Hopefully I'm just overlooking something silly.

Share Improve this question asked Nov 23, 2014 at 17:08 kiss-o-matickiss-o-matic 1,18116 silver badges35 bronze badges 1
  • The tutorial is using Angular 1.2.9. What version are you using? – Reactgular Commented Nov 23, 2014 at 17:12
Add a ment  | 

2 Answers 2

Reset to default 6

angularModalService requires bootstrap js. Call the following file in your index.html file and try.

<script src="http://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

The error happens because you are calling the Bootstrap method to show the modal.

Contrary to Asik's answer above, AngularModalService does not require Bootstrap, but if you are using Bootstrap modals then you do need to include the bootstrap js file.

The issue is referenced here: https://github./dwmkerr/angular-modal-service/issues/14

Custom modals, not requiring Bootstrap, are shown in the examples page

发布评论

评论列表(0)

  1. 暂无评论