Search code examples
angularjsangularjs-scopeangular-ui-bootstrapsingle-page-applicationmean-stack

$uibModal templateUrl does not change modal content


all! I'm making an angular application and want to implement a simple modal window popup, that will allow users to "construct" a URL.

My page looks like this: The push of the URL button triggers the modal.

Here's the HTML of the URL button (third in row) that is to trigger my button.

<button class="btn btn-secondary" ng-click="vm.showUrlModal()" id="button-url-to-modal" type="button" title="Hyperlink &lt;a&gt; Ctrl+L"><img src="/images/url.png" height="18px"/></button>

The controller that handles the page looks like this:

(function() {
    function postchallengeController($uibModal, newChallengeData) {
        var vm = this;
        vm.message = "Post a challenge!";
        vm.showUrlModal = function() {
          $uibModal.open({
            templateUrl: '/url_modal/url_modal.view.html',
            controller: 'url_modal',
            controllerAs: 'vm',
          })
     }
     postchallengeController.$inject = ['$uibModal', 'newChallengeData'];

     /* global angular */
     angular
       .module('stackunderflow')
       .controller('postchallengeController', postchallengeController);
})();

And the referenced url_modal controller:

(function() {
  function url_modal($uibModalInstance) {
    var vm = this;


    vm.modal = {
      cancel: function() {
        $uibModalInstance.close();
      }
    };
  }
  url_modal.$inject = ['$uibModalInstance'];

  /* global angular */
  angular
    .module('stackunderflow')
    .controller('url_modal', url_modal);
})();

In the referenced document (/url_modal/url_modal.view.html) is a simple Hello World, that should be displayed when I open the modal - however, when I do so, the page opens a modal with the current content overlayed on top of it.

See here : enter image description here

What could I be doing wrong?

Thank you!

EDIT: I do have both controllers referenced in my index.html and my module does contain ['ui.bootstrap']


Solution

  • The error might be hidden in the reference of the html file.

    Make sure that the parent directory of the /url_modal/ directory is set as the root folder you set with express.static function call.