$ uibModal templateUrl不会更改模式内容

时间:2019-01-12 18:39:47

标签: angularjs angularjs-scope angular-ui-bootstrap single-page-application mean-stack

全部! 我正在制作一个有角度的应用程序,并希望实现一个简单的模态窗口弹出窗口,该弹出窗口将允许用户“构造” URL。

我的页面如下所示: The push of the URL button triggers the modal.

以下是触发我的按钮的URL按钮的HTML(第三行)。

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

处理页面的控制器如下所示:

(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);
})();

和引用的url_modal控制器:

(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);
})();

在引用的文档(/url_modal/url_modal.view.html)中是一个简单的Hello World,当我打开模式时应显示该窗口-但是,当我这样做时,页面将打开一个模式,并覆盖当前内容在它上面。

请参阅此处: enter image description here

我可能做错了什么?

谢谢!

编辑:我确实在index.html中引用了两个控制器,并且我的模块确实包含['ui.bootstrap']

1 个答案:

答案 0 :(得分:1)

该错误可能隐藏在html文件的引用中。

确保将/url_modal/目录的父目录设置为您通过express.static函数调用设置的根文件夹。