Question

我一直在看这个例子，并通过谷歌无济于事。我不明白popover-template是如何运作的。是Angular的模板系统吗？我找不到任何关于此的文档，所以我想我会转向社区。我怎样才能同样创建自己的模板？

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

 <head>
  <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
  <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="bootstrap-ui.js"></script>
  <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
 </head>

 <body ng-controller="Ctrl">
  <div style="padding-bottom: 400px"></div>
  <div class="container-fluid">
   <fieldset>
    <div class="control-group">
     <label class="control-label" for="tc">Sample:</label>
      <div class="controls">
       <div class="input-prepend">
        <input placeholder="Enter end date.." type="text" class="input-small" ng-model="entity.endDate" name="endDate" />
        <button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
        <i class="icon-calendar"></i>
      </button>
     </div>
    </div>
   </div>
  </fieldset>
 </div>
</body>
</html>

Answer 1

来自angular-ui bootstrap子项目的directive：

<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">

相应的Javascript在bootstrap-ui.js中：

.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
    return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);

项目在这里：https://github.com/angular-ui/bootstrap

模板如何在Angular.js中运行？

1 个答案: