Question

我的angularjs bootstrap模态没有打开。

＆＃13;

var app=angular.module('test', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function($scope, $log,$modal) {
   
    $scope.user = {
        user: 'name',
        password: null,
        notes: null
    };

    $scope.open = function () {

        $modal.open({
            templateUrl: 'myModalContent.html', // loads the template
            backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
            windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
            controller: function ($scope, $modalInstance, $log, user) {
                $scope.user = user;
                $scope.submit = function () {
                    $log.log('Submiting user info.'); // kinda console logs this statement
                    $log.log(user); 
                    $modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel'); 
                };
            },
            resolve: {
                user: function () {
                    return $scope.user;
                }
            }
        });//end of modal.open
    }; // end of scope.open function 
	
	
});

＆＃13;

<html ng-app="test">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <!--<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>-->
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
       
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <label>User name</label>
            <input type="text" ng-model="user.user" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
            <label>Add some notes</label>
            <textarea rows="4" cols="50" ng-model="user.notes"></textarea>
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

＆＃13;

如果我使用bootstrap版本0.6.0模式工作正常。但是如果我使用版本2.5.0它会给我错误＆＃34;未知提供者：$ modalProvider＆lt; - $ modal＆＃34;。但我必须使用2.5.0版本。如何解决问题？请帮忙。谢谢你。

Answer 1

在js部分： plunker here. 将这两个文件放在单独的文件夹中，并确保正确加载js。

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.user = {
        user: 'name',
        password: null,
        notes: null
    };

    $scope.open = function () {

        $modal.open({
            templateUrl: 'myModalContent.html', // loads the template
            backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
            windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
            controller: function ($scope, $modalInstance, $log, user) {
                $scope.user = user;
                $scope.submit = function () {
                    $log.log('Submiting user info.'); // kinda console logs this statement
                    $log.log(user); 
                    $modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel'); 
                };
            },
            resolve: {
                user: function () {
                    return $scope.user;
                }
            }
        });//end of modal.open
    }; // end of scope.open function
};

在HTML中：

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <label>User name</label>
            <input type="text" ng-model="user.user" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
            <label>Add some notes</label>
            <textarea rows="4" cols="50" ng-model="user.notes">

</textarea>
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

为什么Angularjs bootstrap模态没有打开？

1 个答案: