A nice popover for Angular.
JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
dist
example
src
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

fo-popover

A nice popover

Demo

Install

$ bower install fo-popover --save

Require

Beside

$ bower install beside --save

Usage

<link rel="stylesheet" href="bower_components/fo-popover/dist/css/fo-popover.css" />

<script src="bower_components/beside/dist/beside.js"></script>
<script src="bower_components/fo-popover/dist/js/fo-popover.js"></script>

As a directive

angular.module('app', ['foPopover']);
<button
  class="btn btn-success"
  fo-popover
  popover-position="top center"
  popover-template="popover.html"
>删除</button>

<script id="popover.html" type="text/ng-template">
  <div class="popover-header">
    email
  </div>
  <div class="popover-body">
    <label class="control-label" for="email">email</label>
    <input class="form-control" id="email" ng-model="email" type="email">
  </div>
  <div class="popover-footer">
    <button class="btn btn-primary" ng-click="yes()">确认</button>
    <button class="btn btn-default" ng-click="closePopover()">取消</button>
  </div>
</script>

As a service

<div class="text-center">
  <button id="delete" class="btn btn-default" type="button" ng-click="open()">
    delete
  </button>
</div>

<script id="delete.html" type="text/ng-template">
  <div class="popover-header">
    Delete ?
  </div>
  <div class="popover-body">
    <button class="btn btn-primary" ng-click="yes()">确认</button>
    <button class="btn btn-default" ng-click="closePopover()">取消</button>
  </div>
</script>
angular.module('app', ['foPopover'])
.controller('HomeCtrl', function($scope, foPopover) {
  $scope.open = function() {
    foPopover.open({
      target: document.querySelector('#delete'),
      template: 'delete.hmtl',
      position: 'bottom center',
      scope: $scope
    });
  };

  $scope.yes = function () {
    // todo
    foPopover.close();
  };

});