модальная кнопка в angularjs

0

Я хочу реализовать модальный в 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 head.

    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');
   };
  });
  • 0
    @Yvette Yvette, когда я нажимаю на кнопку, она должна показать модель, но код не работает, есть ли ошибка в коде
  • 0
    @MsYvette MsYvette, я хочу реализовать модальное в angularjs, нажав кнопку, чтобы добавить кнопку и написать код для модального, а также HTML-код для модального, но он не показывает модальный
Показать ещё 1 комментарий
Теги:

2 ответа

0

Код html - это весь HTML-код? Если да, вы забыли включить ng-app = "ui.bootstrap.demo" в тело или родительский div.

(и попробуйте отступом ваш код, это будет более понятно и проще;) :))

Поделиться
-1

в первую очередь вам необходимо обновить файл плагина bootstrap. после этого

вам нужно написать такой код

добавить кнопку

 <button class="btn btn-primary" data-toggle="modal"
 data-target="#myModal" data-backdrop="static" data-keyboard="false">
 <i class="fa fa-filter"></i> open modal </button>

и код для модальных

<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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню