0
我還是一個新手，但是我正在關注一個顯示它是如何完成的JSBIN。問題是我有相同的代碼，但是當我單擊按鈕打開對話框時，我會在下面的截圖中看到您看到的內容。 任何人都可以指出我出錯的地方嗎？在角度中打開模態對話框
JSBIN我想從學習：http://jsbin.com/aDuJIku/2/edit?html,css,js,output
當我點擊按鈕 「打開模態對話框」，我得到以下
HTML
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<title>Directives Practice</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<div class="row">
<div class="col-md-offset-3 col-md-6">
{{"Recipe Book"}}
</div>
</div> <!--end row-->
<hr class="hrstyle">
</div> <!--end header-->
<div class="links">
<div class="row">
<div class="col-md-offset-3 col-md-2">
<a ng-href="chicken-recipes.html">{{"Chicken"}}</a>
</div>
<div class="col-md-2">
<a ng-href="beef-recipes.html">{{"Beef"}}</a>
</div>
<div class="col-md-2">
<a ng-href="fish-recipes.html">{{"Fish"}}</a>
</div>
</div> <!--end row-->
</div> <!--end links-->
</div> <!--end container-->
<div class="container">
<div class="row">
<div class="recipeLoader">
<div class="col-md-3">
<div ng-view></div>
<div ng-controller='MyCtrl'>
<button ng-click='toggleModal()'>Open Modal Dialog</button>
<modal-dialog show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here<p>
</modal-dialog>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
應用.js
var app = angular.module('RecipeSite', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/chicken-recipes.html', {
templateUrl: 'chicken-recipes.html'
})
.when('/beef-recipes.html', {
templateUrl:'beef-recipes.html'
})
.when('/fish-recipes.html', {
templateUrl: 'fish-recipes.html'
})
$locationProvider.html5Mode({
enabled:true,
requireBase:false
});
}]); <!--end config-->
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
}]);
CSS
/*Dialog CSS*/
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
我建議你添加鏈接到您的代碼，而不是你用什麼作爲「靈感」。 –
檢查製作的html。是css錯誤還是角度？你有沒有隱藏的內容？ – Kindzoku