Angular modal dialog set inside list items

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • tdrsam
    New Member
    • May 2015
    • 97

    Angular modal dialog set inside list items

    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:

    Code:
    button.login-button(type='button' ng-app='ng-modal') Login
      ul
        li(open-dialog='modal-to-open') Login
          // JUST WORKING ON SIGN UP FOR NOW
        li Sign Up
          modal-dialog(show='dialogShown' dialog-title='My Dialog' height='100px' width='100px')
            p Working
        div.loginForm
          form(name='loginForm' method='post' action='#' enctype='text/plain')
            label(for='user') Username or Email
            input(type='text' name='username' id='username' size="39" placeholder='Username or Email' required)
            label(for='password') Password
            input(type='password' name='password' id='password' size='39' placeholder='Password' required)
    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:

    Code:
    app = angular.module("myApp", ["ngModal"])
    This is the whole js file:

    Code:
    var app = angular.module('app', ['ngRoute']);
    
    (function() {
      var app;
    
     app = angular.module("myApp", ["ngModal"])
    
     app.provider("ngModalDefaults", function() {
    return {
      options: {
        closeButtonHtml: "<span class='ng-modal-close-x'>X</span>"
      },
      $get: function() {
        return this.options;
      },
      set: function(keyOrHash, value) {
        var k, v, _results;
        if (typeof keyOrHash === 'object') {
          _results = [];
          for (k in keyOrHash) {
            v = keyOrHash[k];
            _results.push(this.options[k] = v);
          }
          return _results;
        } else {
          return this.options[keyOrHash] = value;
        }
        }
      };
    });
    
       app.directive('modalDialog', [
    'ngModalDefaults', '$sce', function(ngModalDefaults, $sce) {
      return {
        restrict: 'E',
        scope: {
          show: '=',
          dialogTitle: '@',
          onClose: '&?'
        },
        replace: true,
        transclude: true,
        link: function(scope, element, attrs) {
          var setupCloseButton, setupStyle;
          setupCloseButton = function() {
            return scope.closeButtonHtml = $sce.trustAsHtml(ngModalDefaults.closeButtonHtml);
          };
          setupStyle = function() {
            scope.dialogStyle = {};
            if (attrs.width) {
              scope.dialogStyle['width'] = attrs.width;
            }
            if (attrs.height) {
              return scope.dialogStyle['height'] = attrs.height;
            }
          };
          scope.hideModal = function() {
            return scope.show = false;
          };
          scope.$watch('show', function(newVal, oldVal) {
            if (newVal && !oldVal) {
              document.getElementsByTagName("body")[0].style.overflow = "hidden";
            } else {
              document.getElementsByTagName("body")[0].style.overflow = "";
            }
            if ((!newVal && oldVal) && (scope.onClose != null)) {
              return scope.onClose();
            }
          });
          setupCloseButton();
          return setupStyle();
        },
        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>"
      };
     }
    ]);
    
    }).call(this);
    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?
    Last edited by tdrsam; Oct 13 '15, 03:21 AM. Reason: Angular Route Info
  • tdrsam
    New Member
    • May 2015
    • 97

    #2
    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.

    Comment

    Working...