当 templateUrl 更改时，AngularJS 模态不显示 [英] AngularJS Modal not showing up when templateUrl changes

问题描述

到目前为止，我所拥有的只是 Angular UI 示例:

So far, what I have is straight off the Angular UI example:

控制器:

var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });
  };
};


var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.close = function () {
    $modalInstance.dismiss('cancel');
  };
};

还有这个部分，它只是位于这个模态所在的整个页面的 .html 中.html:

And this section, which is just in sitting in the .html for the whole page this modal is on. Html:

<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
    <button class="btn btn-warning" ng-click="close()">X</button>
  </div>
  <div class="modal-body">
    Stuff
  </div>
</script>

这很好用.但是我正在尝试重构一些东西并组织我的代码，所以我想将模态 html 移动到它自己的文件中.当我这样做时，并尝试通过将 templateUrl 更改为路径来使用它: mplmyModalContent.html，它不会出现.背景仍然出现，检查页面显示它已正确加载，但不会显示.

This works just fine. But I'm trying to refactor some things out and organize my code, so I would like to move the modal html to its own file. When I do so, and try to use it as by changing the templateUrl to the path: mplmyModalContent.html, it doesn't show up. The backdrop still appears and inspecting the page shows that it loaded correctly, but just won't show up.

我已尝试根据这些 建议更改模态的 css没有区别.

I've tried changing the css for the modal per these suggestions with no difference.

我的问题是，如果脚本标签在主 html 中，为什么这可以正常工作，但如果它在自己的文件中，则根本不行?

My question is, why does this work fine if the script tag is in the main html, but not at all if it is in it's own file?

这是一个 plnkr，它说明了我的意思.如果您复制 template.html 中的内容并将其放在 index.html 文件中按钮的正上方，它可以工作...

Here is a plnkr that shows what I mean. If you copy what is in the template.html and place it right above the button in the index.html file, it works...

推荐答案

我显然是个傻子.我所要做的就是在主视图中包含我的新文件.

Well I am clearly a dummy. All I had to do was include my new file in the main view.

<div ng-include="'path-to-file.html'"></div>

然后从控制器调用它很简单，我只需要 id (modalContent.html) 作为 templateUrl.

Then calling it from the controller was easy, all I needed was the id (modalContent.html) as the templateUrl.

继续游泳，你最终会到达那里:)

Just keep swimming, and you'll eventually get there :)

这篇关于当 templateUrl 更改时，AngularJS 模态不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！