CODEWITHSUNDEEP
angularjs
Strawberry
Strawberry

Reputation: 67888

How do templates work in Angular.js?

I've been looking at this example and looking through google to no avail. I don't understand how popover-template works. Is it Angular's templating system? I couldn't find any documentation on this, so I thought I'll turn to the community. How can I similarly create my own template?

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

 <head>
  <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
  <script data-require="[email protected]" data-semver="1.1.5" src="bootstrap-ui.js"></script>
  <link data-require="[email protected]" 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>

Upvotes: 0

Views: 1773

Answers (1)

Maarten
Maarten

Reputation: 4671

It is a directive from angular-ui's bootstrap sub-project:

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

the corresponding Javascript is inbootstrap-ui.js:

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

The project is here: https://github.com/angular-ui/bootstrap

Upvotes: 2

Related Questions