AngularJS模态没有显示出来，当templateUrl改变 [英] AngularJS Modal not showing up when templateUrl changes

问题描述

到目前为止，我有什么是直客角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>

这工作得很好。但我想重构一些东西出来，并组织我的code，所以我想在HTML模式的移动到它自己的文件。当我这样做，并尝试通过改变templateUrl的路径使用它作为： \\ TMPL \\ myModalContent.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: \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.

我试着改变CSS每这些<一个模态href=\"http://stackoverflow.com/questions/20255347/angularjs-bootstrap-ui-modal-not-showing\">suggestions有没有什么区别。

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

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