角度引导 ui 模式不显示答案

【问题标题】：angular bootstrap ui modal does not display角度引导 ui 模式不显示
【发布时间】：2016-11-13 13:29:41
【问题描述】：

我使用 https://angular-ui.github.io/bootstrap/#/modal ，但我的模式没有出现，只有一小行。这是图片：

这是我的 js：

app.controller('PersonListController', ['$scope','ContactService','$uibModal', function($scope,ContactService,$uibModal){



  $scope.showCreateModal =function () {

      $scope.createModal = $uibModal.open({
          templateUrl: '../contact-app/templates/modal.create.tpl.html',
          bindToController: true,
          size: 'lg'
          });
  };



}]);

html: '../contact-app/templates/modal.create.tpl.html' - 当我检查页面时有效但不可见

<div class="modal fade" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Modal Title</h4>
			</div>
			<div class="modal-body">
				<ng-include src="'templates/form.html'"></ng-include>
			</div>
		</div>
	</div>
</div>

当我使用常规引导模式时它可以工作，但是当我使用角度方式时它不起作用，请帮忙！

【问题讨论】：

控制台有错误吗？
不，控制台没有错误

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您似乎正在尝试为您的模板使用相对网址？您应该改用以下方法：

在您的 html 中：

<script type="text/ng-template" id="modal.create.tpl.html">
  <div>
    Modal content
  </div>
</script>

然后，Angular 会将模板加载到模板缓存中，您可以按如下方式引用它：

templateUrl: 'modal.create.tpl.html'

【讨论】：

【解决方案2】：

我已经设法让它与这些代码一起工作：

  $scope.createModal = $uibModal.open({
      templateUrl: '../contact-app/templates/modal.create.tpl.html',
      bindToController: true,
      scope: $scope

      });

'../contact-app/templates/modal.create.tpl.html'：

 <div class="modal-header" ng-controller="PersonListController">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">

            <ng-include src="'templates/form.html'"></ng-include>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="ok()">Close</button>
            <button type="button" class="btn btn-primary" ng-click="close()">Save changes</button>
        </div>

仍然不确定是什么导致了问题

【讨论】：

【解决方案3】：

你是否使用<base>标签并指向子目录下的路径？

如果是这样，您的相对路径可能是错误的。

就我而言，我使用的是 <base> 标签，看起来像这样

<base href="http://abc.test.com/test/" />

与http://abc.text.com/test/pages/index.html（我所在的位置）

模板文件所在位置

'c:/web/test/contact-app/templates/modal.create.tpl.html'

在这种情况下，'templateUrl'的路径必须是

  templateUrl: 'contact-app/templates/modal.create.tpl.html',

因为相对路径会以

开头

http://abc.test.com/test/

而不是

http://abc.text.com/test/pages/

【讨论】：