AngularStrap: модальный сервис

Question

AngularStrap: модальный сервис

0

Когда я нажимаю на мой buttom, ничего не происходит, и у меня нет ошибок в моей консоли. Любая идея?

HTML

<button type="button" class="btn btn-lg btn-danger" ng-click="showMyModal()">Modal
  <br>
   <small>(using service)</small>
</button>

контроллер

'use strict';

angular.module('todo')
 .controller('SignupCtrl', function ($scope,$modal) {

   angular.extend(this, {
     name: 'SignupCtrl',
     showMyModal:function(){
        var myModal = $modal({templateUrl:'views/cgu/cgu.html', show: false});
     }
   });

 });

fufuny 27 июль 2016, в 23:17

Источник

1

Пожалуйста, обновите ваш вопрос, указав конкретные коды ошибок, с которыми вы столкнулись.
Evan Bechtol 27 июль 2016, в 20:43
0

@EvanBechtol У меня нет ошибок
fufuny 27 июль 2016, в 20:55
1

Почему вы используете angular.extend вместо простого добавления метода showMyModal в $scope ?
Lex 27 июль 2016, в 20:58
0

@fufuny Вы буквально говорите в своем посте "... и я получаю любую ошибку". Вы имеете в виду, что вы не получили ошибку? Вы должны следовать совету от Лекса выше
Evan Bechtol 27 июль 2016, в 20:58

Показать ещё 2 комментария

Теги:

javascript

angularjs

angular-strap

1 ответ

Ещё вопросы

Пожалуйста, обновите ваш вопрос, указав конкретные коды ошибок, с которыми вы столкнулись.
Почему вы используете angular.extend вместо простого добавления метода showMyModal в $scope ?
@fufuny Вы буквально говорите в своем посте "... и я получаю любую ошибку". Вы имеете в виду, что вы не получили ошибку? Вы должны следовать совету от Лекса выше

developer033 · Answer 1 · 2016-07-28T00-34-00.000Z

Во-первых, добавьте свою function в $scope.

Здесь версия, работающая с использованием AngularStrap # modals:

(function() {
  'use strict';

  angular.module('app', [
      'ngAnimate',
      'ngSanitize',
      'mgcrea.ngStrap'
    ])
    .controller('MainCtrl', MainCtrl)
    .config(configFunction);

  MainCtrl.$inject = ['$scope', '$modal'];

  function MainCtrl($scope, $modal) {
    $scope.modal = {
      title: 'Title',
      content: 'Hello Modal<br />This is a multiline message!'
    };

    var myModal = $modal({
      controller: MainCtrl,
      // templateUrl: "your template.tpl.html"
      template: 
        '<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;">
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header" ng-if="modal.title">
                 <button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
                 <h4 class="modal-title" ng-bind-html="modal.title"></h4></div>
               <div class="modal-body">
                 <h2 ng-bind="modal.content"></h2>
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" ng-click="$hide()">Add</button>
               </div>
             </div>
           </div>
         </div>',
     show: false
   });

    $scope.showModal = function() {
      myModal.$promise.then(myModal.show);
    };
  }

  configFunction.$inject = ['$modalProvider'];

  function configFunction($modalProvider) {
    angular.extend($modalProvider.defaults, {
      html: true,
      animation: 'am-flip-x'
    });
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/libs.min.css">
  <link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/docs.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.min.js"></script>
</head>

<body ng-controller="MainCtrl">
    <button type="button" class="btn btn-primary" ng-click="showModal()">Modal</button>
</body>

</html>

Вы можете сделать с сервисом, пожалуйста?
Просто раскомментируйте эту строку templateUrl и сотрите template .. Я не разместил здесь, потому что у меня не может быть 2 файла во фрагменте.