Angular-表带模态显示为空

Angular-strap modal shows empty

我正在尝试实现 angular-strap modal,我有一个 modal 的外部模板,但它显示为空白。怎么了?

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
    <script data-require="angularstrap@*" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
    <script data-require="angularstrap@*" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <button class="btn btn-default" content-template="customer.tpl.html" bs-modal="modal">New Customer</button>
  </body>

</html>

Here's link to Plunker

您需要解决几件事:

第一个是把content-template换成data-template,第二个是如果有ng-bind="title",就需要在作用域上有一个title变量,因为ng-bind 将其所在的 HTML 元素的内容替换为其绑定的内容:

<body>
    <button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer</button>
  </body>

要在模式中查看文本,请从正文中删除 ng-bind="content",或者为 content 变量分配一些值。

Working Plunker.

来源:http://mgcrea.github.io/angular-strap/##modals-examples