当templateUrl更改时，AngularJS Modal不显示

问题描述

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

控制器:

var ModalDemoCtrl = function ($scope, $modal) {$scope.open = 函数 () {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器: ModalInstanceCtrl});};};var ModalInstanceCtrl = function ($scope, $modalInstance) {$scope.close = 函数 () {$modalInstance.dismiss('cancel');};};

而这一部分，就在这个模态所在的整个页面的 .html 中.html:

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

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

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

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

解决方案

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

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

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

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

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

Controller:

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

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>

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: \tmpl\myModalContent.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.

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

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?

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>

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 Modal不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！