Question

当我点击我的按钮时，没有任何事情发生，我的控制台没有任何错误任何想法？

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});
     }
   });

 });

Answer 1

首先，将您的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>

AngularStrap：模态服务

1 个答案: