在Angular中打开模态对话框

时间：2016-08-11 16:53:52

标签： javascript angularjs

我还是新手，但我跟随一个JSBIN来展示它是如何完成的。问题是我有相同的代码，但当我点击按钮打开对话框时，我得到你在下面的截图中看到的内容。 谁能说出我出错的地方？

JSBIN我试图学习：http://jsbin.com/aDuJIku/2/edit?html,css,js,output

当我点击按钮＆＃34;打开模态对话框＆＃34;我得到以下

enter image description here

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>

app.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';
}

1 个答案:

答案 0 :(得分：0)

使用$mdDialog在AngularJS中打开一个对话框。

请参阅以下示例：

//------------------------------------------------------------------------------------
# users-list.tmpl.html
# Refer to the click event ... ng-click="vm.openContact(contact, $event)"

<table md-data-table class="md-data-table" md-progress="vm.deferred">
    <thead md-order="vm.query.contact" md-trigger="vm.getUsers">
        <tr>
            <th name="Email" order-by="email" decend-first></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in vm.users>
            <td width="20%">
                <a style="cursor:pointer" ng-click="vm.openContact(contact, $event)">
                    {{contact.email}}
                </a>
            </td>
        </tr>
    </tbody>
</table>

//------------------------------------------------------------------------------------
# users-list.controller.js
# This is where your click event to open the dialog is 
# i.e. function openContact(contact, $event) {...}
# templateUrl: 'app/foo/admin/users/users-dialog.tmpl.html' below shows the 
# link to the dialog you want to open

(function() {
    'use strict';

    angular
        .module('app.foo.admin')
        .controller('UsersListController', UsersListController);

    /* @ngInject */

    function UsersListController(
        $scope,
        $state,
        $mdDialog) {
        var vm = this;
        vm.loading = false;
        vm.userSvc = userSvc;
        vm.openContact = openContact;

        activate();

        function activate() {
            // init users
            vm.userSvc.get().then(
                function(users) {
                    initSearchString(users);

                    vm.users = users;
                },
                function(error) {
                    $log.error(error);
                }
            );
        }

        function openContact(contact, $event) {
            $mdDialog.show({
                controller: 'UserManagementDialogController',
                controllerAs: 'vm',
                templateUrl: 'app/foo/admin/users/users-dialog.tmpl.html',
                locals: {
                    contact: contact
                },
                targetEvent: $event,
                clickOutsideToClose: true
            });
        }

    }
})();

//----------------------------------------------------------------------------------
# users-dialog.tmpl.html
# Use <md-dialog></md-dialog> to open and close your dialog
# This is the dialog that will open when you click on the link in the table above i.e
# <a style="cursor:pointer" ng-click="vm.openContact(contact, $event)">{{contact.email}}</a>

<md-dialog class="contact-dialog mobile-fullwidth-dialog" flex="60" flex-xs="100">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2 flex >
                <span translate>USER_MANAGEMENT.USER_INFORMATION</span>
            </h2>
            <md-button class="md-icon-button" ng-click="vm.cancelClick()" aria-label="cancel">
                <md-icon md-font-icon="zmdi zmdi-close"></md-icon>
            </md-button>
        </div>
    </md-toolbar>

    <md-dialog-content class="md-dialog-content">

        <div layout="row" layout-xs="column">
          <div flex="50" flex-xs="100" layout="row" class="margin-bottom-30">
              <div flex="5">
                  <md-icon md-font-icon="zmdi zmdi-email" style="color:#47B2E8"></md-icon>
              </div>
              <div flex="25">
                  <label for="email" translate>USER_MANAGEMENT.EMAIL.LABEL</label> :
              </div>
              <div flex>
                  <span>{{vm.contact.email}}</span>
              </div>
          </div>
        </div>

    </md-dialog-content>

    <md-dialog-actions class="user-management-card-footer" layout="row">
        <span flex></span>
        <md-button
            class="md-raised md-primary margin-left-0"
            ng-click="vm.okClick()"
            aria-label="{{USER_MANAGEMENT.BUTTON_OK | translate}}"
            translate="USER_MANAGEMENT.BUTTON_OK">
        </md-button>
    </md-dialog-actions>
</md-dialog>

//----------------------------------------------------------------------------------
# users-dialog.controller.js
# Note how we inject 'contact' below so that your data will be injected from the
# users-list.controller.js .... locals: { contact: contact } to this 
# users-dialog.controller.js .... vm.contact = contact;

(function() {
    'use strict';

    angular
        .module('app.lms.admin')
        .controller('UserManagementDialogController', UserManagementDialogController);

    /* @ngInject */
    function UserManagementDialogController(
        $window,
        $mdDialog,
        $log,
        contact) {
        var vm = this;
        vm.cancelClick = cancelClick;
        vm.okClick = okClick;
        vm.contact = contact;
        vm.printClick = printClick;

        function okClick() {
            $mdDialog.hide();
        }

        function cancelClick() {
            $mdDialog.cancel();
        }

        function printClick() {
            $window.print();
        }
    }
})();

//----------------------------------------------------------------------------------
相关问题
最新问题