角型モーダルサービス

Question

角型アプリケーションでモーダルを実行しようとしています。私はBootstrapとAngular Materialモーダルを使ってみましたが、動作させることができませんでした。私はAngular Modal Serviceを試してみることにしましたが、同じエラーが出ます。

http://jsfiddle.net/dwmkerr/8MVLJ/?utm_source=website&utm_medium=embed&utm_campaign=8MVLJ 

を：私が使用

https://github.com/dwmkerr/angular-modal-service 

をJSフィドル例：使用してサービスイム

angular.js:12416 TypeError: Cannot read property 'showModal' of undefined 
at Scope.$scope.show (AboutController.js:4) 
at fn (eval at <anonymous> (angular.js:13231), <anonymous>:4:203) 
at callback (angular.js:23371) 
at Scope.$eval (angular.js:15878) 
at Scope.$apply (angular.js:15978) 
at HTMLAnchorElement.<anonymous> (angular.js:23376) 
at HTMLAnchorElement.n.event.dispatch (jquery-2.2.3.min.js:3) 
at HTMLAnchorElement.r.handle (jquery-2.2.3.min.js:3) 

：私は、私は次のエラーを取得するModalService.showModal関数を呼び出すたびに

含まれるもの：

<!-- Include jQuery --> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<!-- Include Bootstrap --> 
<script src="../node_modules/bootstrap/js/bootstrap.js"></script> 
<!-- Include Angular --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script> 
<!-- Include ModalService--> 
<script src="../node_modules/angular-modal-service/dst/angular-modal-service.min.js"></script> 

About.html：

<div class="container"> 
<div class="col-sm-6 col-sm-offset-3 form-box"> 

<h3>Comentarios</h3> 

<a class="btn btn-default" href ng-click="show()">Show a Modal</a> 
<!-- The actual modal template, just a bit o bootstrap --> 
<script type="text/ng-template" id="modal.html"> 
    <div class="modal fade"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Yes or No?</h4> 
      </div> 
      <div class="modal-body"> 
      <p>It's your call...</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button> 
      <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button> 
      </div> 
     </div> 
     </div> 
    </div> 
</script> 
</div> 
</div> 

App.module.js：

var Tiendiia = angular.module('Tiendiia', ['ui.router', 'ngMaterial', 'ui.bootstrap', 'ngCookies', 'angularModalService',]); 

Tiendiia.config(function($mdThemingProvider) { 
$mdThemingProvider.theme('default') 
.primaryPalette('yellow') 
.accentPalette('orange') 
.warnPalette('amber') 
.backgroundPalette('grey'); 
}); 

AboutController.js

Tiendiia.controller('AboutController', ['$scope', function($scope, ModalService) { 

$scope.show = function() { 
    ModalService.showModal({ 
     templateUrl: 'modal.html', 
     controller: "ModalController" 
    }).then(function(modal) { 
     modal.element.modal(); 
     modal.close.then(function(result) { 
      $scope.message = "You said " + result; 
     }); 
    }); 
}; 


}]); 

ModalController.js

Tiendiia.controller('ModalController', function($scope, close) { 

$scope.close = function(result) { 
close(result, 500); // close, but give 500ms for bootstrap to animate 
}; 

}); 

私は私ができるが、それは働いていない理由を私は見つけることができませんどこにでも見てきました。

ありがとうございます！

Answer 1

角度のある素材では、必要なものをダイアログと呼びます。角度のある素材では、John Papaスタイルを使用することもありますが、初心者の方にとっては理解しにくいことがあります。あなたがこのガイドを理解するなら、あなたは本当に角度を理解しています。

Link To styleguide

ui.bootstrapのモーダルを使用してみてください、あなたはすでに、UI、ブートストラップで持っている機能で不要なライブラリを追加しないでください。とにかく私はあなたのエラーはここにあるかもしれないと思う：

それはコントローラーに関する

['$scope', function($scope, ModalService)

にあなたがそれを私にビートModalService

['$scope', 'ModalService', function($scope, ModalService)