2015-12-31 3 views
0

я хочу реализовать модальность в angularjs, нажав на кнопку, так что я добавить кнопку и написал код для модального а также HTML-код для модального но оленьей кожи, показывающего любого модальногокнопка модальные в angularjs

кода 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> 

это мой угловой код, где нг-одушевленные, щ-самозагрузка и добавили эти файлы скрипты в 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'); 
    }; 
    }); 
+1

Что ваш вопрос? –

+0

@ Yvette, когда я нажимаю на кнопку, она должна показывать модель, но код не работает, есть ли какая-либо ошибка в коде –

+0

. Я рассмотрел ваш вопрос, и вам нужно решить вашу проблему в своем вопросе, чтобы мы могли вам помочь. Поэтому объясните, что именно вы ожидаете, и что происходит *. ОК? –

ответ

0

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

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

-1

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

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

кнопку добавления

<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> 
Смежные вопросы