AngularStrap：模态服务

当我点击我的按钮时，没有发生任何事情，我没有在我的控制台中的错误任何想法？AngularStrap：模态服务

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

});

来源

2016-07-27 fufuny

请通过包含您遇到的特定错误代码更新你的问题。 –

@EvanBechtol我没有任何错误 – fufuny

为什么你使用'angular.extend'而不是将'showMyModal'方法添加到'$ scope'？ – Lex

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

来源

2016-07-28 02:26:32 developer033

您可以提供服务吗？ – fufuny

只需取消该行的'templateUrl'并抹掉'模板'..我没有放在这里，因为我不能在代码片段中包含2个文件。 – developer033

AngularStrap：模态服务

回答

相关问题