Question

我想在angularjs中实现一个模态，通过按下按钮，我添加一个按钮，为模态编写代码，也为模态编写html代码，但它不显示任何模态

myhtml代码发布在下面：

    <body>
    <div ng-controller="ModalDemoCtrl">
     <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title"> Im a modal!</h3>
    </div>

    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
   </script>

     <button type="button" class="btn btn-default" ng-click="open()">Open me!      </button>
      </div>

       </body>

这是我的角度代码，其中ng-animate，ui-bootstrap并在html头中添加了这些脚本文件。

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
   angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal) {
   $scope.animationsEnabled = true;
    $scope.open = function () {

    var modalInstance = $uibModal.open({
   animation: $scope.animationsEnabled,
   templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    });
    };
   });


  angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {

 $scope.ok = function () {
  $uibModalInstance.close();
  };

  $scope.cancel = function () {
   $uibModalInstance.dismiss('cancel');
   };
  });

Answer 1

html代码是你的整个HTML代码？如果是，您忘记在正文或父级div上包含ng-app =“ui.bootstrap.demo”。

（并尝试缩进代码，它会更清晰，更容易;）:)）

Answer 2

首先，您需要升级您的bootstrap插件文件。之后

你需要编写像这样的代码

添加按钮

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">              
                <h4 class="modal-title">ABC</h4>
            </div>
            <div class="modal-body">           
               ABC

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pull-left" data-ng-click="ABC()" data-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary pull-left" data-ng-click="SAVE()" data-dismiss="modal">Save</button>

            </div>
        </div>

    </div>
</div>

和模态的代码

/users/user/Library/Android/sdk

angularjs

2 个答案: