Angular modal dialog set inside list items

[tdrsam]

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:

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:

app = angular.module("myApp", ["ngModal"])

This is the whole js file:

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?

[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.