AngularStrap: modal service

Wenn ich auf meinen Buttom klicke, passiert nichts und ich bekomme keinen Fehler in meiner Konsole Irgendeine Idee?AngularStrap: modal service

HTML

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

-Controller

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

});

Quelle

2016-07-27 fufuny

Bitte aktualisieren Sie Ihre Frage nach der spezifischen Fehlercodes enthält, die Sie stoßen. –

@EvanBechtol Ich habe keinen Fehler – fufuny

Warum verwenden Sie 'angular.extend' anstatt nur die' showMyModal' Methode zu '$ scope' hinzuzufügen? – Lex

Fügen Sie zunächst Ihre function-$scope.

Hier ist eine Version mit Arbeiten mit 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>

Quelle

2016-07-28 02:26:32 developer033

folgen können Sie bitte mit Service machen? – fufuny

Einfach die Zeile von 'templateUrl' auskommentieren und die' template' löschen. Ich habe sie hier nicht eingefügt, da ich keine 2 Dateien auf dem Snippet haben kann. – developer033

Antwort

Verwandte Themen