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来使用它时，它不会显示。背景仍然显示，检查页面显示它已正确加载，但只是不会显示。

我已经尝试根据这些suggestions更改模式的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会加载未编译的＆＃39;第一次使用模板，然后将模板编译为原始HTML，以备后续点击。

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

Answer 2

嗯，我显然是个假人。我所要做的就是在主视图中包含我的新文件。

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

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

继续游泳，你最终会到达那里：）

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

2 个答案: