当templateUrl更改时,AngularJS模态不会显示

Question

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

控制器:

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:

<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更改为路径:来使用它\tmpl\myModalContent.html,它不会显示.背景仍然出现,检查页面显示它正确加载,但只是不会显示.

我已经尝试根据这些建议改变模态的CSS 而没有区别.

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

这是一个显示我的意思的plnkr.如果你复制template.html中的内容并将其放在index.html文件中的按钮正上方,它就可以...

Answer 1

删除template.html的模板声明,只需将原始HTML放在那里:

<!--script type="text/ng-template" id="template.html"-->
            <div class="modal-body">
                 Hello
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="cancel()">OK</button>
            </div>
<!--/script-->

你的plnkr工作正常,第二次点击按钮.它会按预期显示模态.它出现第二次点击的原因是因为Angular第一次加载'未编译的'模板,然后它将模板编译为原始HTML,为随后的点击做好准备.

编辑:另外,当您将模板代码放在index.html中时,Angular会在初始通过DOM时编译模板; 这就是为什么模态似乎有效.

Answer 2

好吧,我显然是个假人.我所要做的就是在主视图中包含我的新文件.

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

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

只是继续游泳,你最终会到那里:)