Как открыть всплывающее окно с помощью Angular - PullRequest
Новая
       1

Как открыть всплывающее окно с помощью Angular

0 голосов
/ 24 июня 2019

Я новичок в angularjs, всякий раз, когда я нажимаю кнопку «Войти / Зарегистрироваться», появляется всплывающее окно. Теперь я хочу, если я нажму «Загрузить резюме» (другой файл), то появится такое же всплывающее окно

Вот мой код, который работает нормально (расположение файла / var / www / html / views / common) 

<header id="top" ng-controller="headerCtrl" roller class="navbar js-navbar-affix">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <ul class="nav navbar-nav navbar-right text-right">
                    <li><button type="button" class="btn btn-info btn-lg hoj-blue-light login-reg-btn bold"
                                data-toggle="modal" ng-click="openModal()">
                          Login / Signup
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>

Теперь, если я пытаюсь использовать следующий код (расположение файла - / var / www / html / views / user / mainScreen), но он не работает, где я ошибаюсь? 

<header id="top" ng-controller="headerCtrl" roller class="navbar js-navbar-affix">
    <button type="button" class="btn btn-info btn-lg hoj-blue-light login-reg-btn bold"
            data-toggle="modal" ng-click="openModal()">
      Login / Signup
    </button>
</header>

1 Ответ

0 голосов
/ 24 июня 2019

script.js 

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('ModalCtrl', function($scope, $uibModal) {

  $scope.open = function() {
    var modalInstance =  $uibModal.open({
      templateUrl: "modalContent.html",
      controller: "ModalContentCtrl",
      size: '',
    });

    modalInstance.result.then(function(response){
        $scope.result = `${response} button hitted`;
    });

  };
})

app.controller('ModalContentCtrl', function($scope, $uibModalInstance) {

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

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

});

modalContent.html 

<div class="modal-header">
  <h3>Modal header</h3>
</div>
<div class="modal-body">
 <h4>Just something random here</h4>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

index.html 

  <body ng-app="plunker">
    <div ng-controller="ModalCtrl">
      <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Open Modal</button>

      <h2 style="color: red;">{{result}}</h2>
    </div>
  </body>

</html>

style.css 

.left-nav,.right-nav{
         float:left; 
      }
      .right-nav{
        margin-left:20px;
      }
      a{
        cursor:pointer; 
      }


.modal-header {
  text-align: center;
}

Пример здесь: https://embed.plnkr.co/plunk/PbnBdN

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...