By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,852 Members | 888 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,852 IT Pros & Developers. It's quick & easy.

Angular modal dialog set inside list items

P: 97
I'm trying to set a list of two items that open separate modal dialogs in a node.js app. I'm using Jade.

Here's the Jade:

Expand|Select|Wrap|Line Numbers
  1. button.login-button(type='button' ng-app='ng-modal') Login
  2.   ul
  3.     li(open-dialog='modal-to-open') Login
  4.       // JUST WORKING ON SIGN UP FOR NOW
  5.     li Sign Up
  6.       modal-dialog(show='dialogShown' dialog-title='My Dialog' height='100px' width='100px')
  7.         p Working
  8.     div.loginForm
  9.       form(name='loginForm' method='post' action='#' enctype='text/plain')
  10.         label(for='user') Username or Email
  11.         input(type='text' name='username' id='username' size="39" placeholder='Username or Email' required)
  12.         label(for='password') Password
  13.         input(type='password' name='password' id='password' size='39' placeholder='Password' required)
  14.  
I'm using Adam Brecht's modal dialog plugin. I have the js file and the css files attached.

I changed the declaration of the module in the js file to this:

Expand|Select|Wrap|Line Numbers
  1. app = angular.module("myApp", ["ngModal"])
This is the whole js file:

Expand|Select|Wrap|Line Numbers
  1. var app = angular.module('app', ['ngRoute']);
  2.  
  3. (function() {
  4.   var app;
  5.  
  6.  app = angular.module("myApp", ["ngModal"])
  7.  
  8.  app.provider("ngModalDefaults", function() {
  9. return {
  10.   options: {
  11.     closeButtonHtml: "<span class='ng-modal-close-x'>X</span>"
  12.   },
  13.   $get: function() {
  14.     return this.options;
  15.   },
  16.   set: function(keyOrHash, value) {
  17.     var k, v, _results;
  18.     if (typeof keyOrHash === 'object') {
  19.       _results = [];
  20.       for (k in keyOrHash) {
  21.         v = keyOrHash[k];
  22.         _results.push(this.options[k] = v);
  23.       }
  24.       return _results;
  25.     } else {
  26.       return this.options[keyOrHash] = value;
  27.     }
  28.     }
  29.   };
  30. });
  31.  
  32.    app.directive('modalDialog', [
  33. 'ngModalDefaults', '$sce', function(ngModalDefaults, $sce) {
  34.   return {
  35.     restrict: 'E',
  36.     scope: {
  37.       show: '=',
  38.       dialogTitle: '@',
  39.       onClose: '&?'
  40.     },
  41.     replace: true,
  42.     transclude: true,
  43.     link: function(scope, element, attrs) {
  44.       var setupCloseButton, setupStyle;
  45.       setupCloseButton = function() {
  46.         return scope.closeButtonHtml = $sce.trustAsHtml(ngModalDefaults.closeButtonHtml);
  47.       };
  48.       setupStyle = function() {
  49.         scope.dialogStyle = {};
  50.         if (attrs.width) {
  51.           scope.dialogStyle['width'] = attrs.width;
  52.         }
  53.         if (attrs.height) {
  54.           return scope.dialogStyle['height'] = attrs.height;
  55.         }
  56.       };
  57.       scope.hideModal = function() {
  58.         return scope.show = false;
  59.       };
  60.       scope.$watch('show', function(newVal, oldVal) {
  61.         if (newVal && !oldVal) {
  62.           document.getElementsByTagName("body")[0].style.overflow = "hidden";
  63.         } else {
  64.           document.getElementsByTagName("body")[0].style.overflow = "";
  65.         }
  66.         if ((!newVal && oldVal) && (scope.onClose != null)) {
  67.           return scope.onClose();
  68.         }
  69.       });
  70.       setupCloseButton();
  71.       return setupStyle();
  72.     },
  73.     template: "<div class='ng-modal' ng-show='show'>\n  <div class='ng-modal-overlay' ng-click='hideModal()'></div>\n  <div class='ng-modal-dialog' ng-style='dialogStyle'>\n    <span class='ng-modal-title' ng-show='dialogTitle && dialogTitle.length' ng-bind='dialogTitle'></span>\n    <div class='ng-modal-close' ng-click='hideModal()'>\n      <div ng-bind-html='closeButtonHtml'></div>\n    </div>\n    <div class='ng-modal-dialog-content' ng-transclude></div>\n  </div>\n</div>"
  74.   };
  75.  }
  76. ]);
  77.  
  78. }).call(this);
  79.  
I have the list set as a dropdown in my CSS. I wanted the form to display in a modal dialog when the link in the list is clicked, but at the moment the form displays below the dropdown box.

I have a module error in Chrome Dev Tools. I have the ng-Route module declared at the top of the ng-modal.js file. Is that not where it goes? What am I missing?
Oct 11 '15 #1

✓ answered by tdrsam

Just in case someone is looking for an answer to this question or a similar one in the future, this is what I did.

I gave up on Angular.js and went with basic, plain old jQuery to add the functionality I want.

I'm thinking of adding React.js or Vue.js in the future to run the authorization functionality etc, but haven't decided yet.

Share this Question
Share on Google+
1 Reply


P: 97
Just in case someone is looking for an answer to this question or a similar one in the future, this is what I did.

I gave up on Angular.js and went with basic, plain old jQuery to add the functionality I want.

I'm thinking of adding React.js or Vue.js in the future to run the authorization functionality etc, but haven't decided yet.
Oct 19 '15 #2

Post your reply

Sign in to post your reply or Sign up for a free account.