AngularStrap -- Modal

AngularStrap – Bootstrap wrapper for AngularJS

• About the AngularStrap project
  AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application.

With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!

AngularStrap is tested against the latest patch release of the 1.2, 1.3 and 1.4 branches.

• AngularStrap Modal
  这里简单介绍在AngularJS使用Bootstrap UI中Modal对话框。

<!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
  <br>
  <small>(using an object)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template-url="modal/docs/modal.demo.tpl.html" bs-modal="modal">Custom Modal
  <br>
  <small>(using data-template)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" ng-click="showModal()">Modal
  <br>
  <small>(using service)</small>
</button>

这里定义了3个按钮，分别弹出一个modal对话框。效果如下。

这个modal dialog显示在屏幕中心。modal 使用了一个简单地对象：

{
  "title": "Title",
  "content": "Hello Modal<br />This is a multiline message!"
};

第二个modal使用了一个html的模板，内容由模板来确定。

第三个modal使用自定义的js函数处理显示。

• 如何使用Usage
  Append a bs-modal attribute to any element to activate the directive. 推荐使用html5的attruibute – data-bs-modal。

*The module also exposes a $modal service
Available for programmatic use (inside a directive/controller).*

angular.module('myApp')
.controller('DemoCtrl', function($scope, $modal) {
  // Show a basic modal from a controller
  var myModal = $modal({title: 'My Title', content: 'My Content', show: true});

  // Pre-fetch an external template populated with a custom scope
  var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.demo.tpl.html', show: false});
  // Show when some event occurs (use $promise property to ensure the template has been loaded)
  $scope.showModal = function() {
    myOtherModal.$promise.then(myOtherModal.show);
  };
})

• 选项 Options
  Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation=**.

For directives, you can naturally inherit the contextual $scope or leverage a custom one with an AngularJS expression to evaluate as an object directly on the bs-modal attribute

---