https://github.com/c0bra/ui-bootstrap-growl

Growl-like alerts in AngularJS with bootstrap-growl
https://github.com/c0bra/ui-bootstrap-growl

Last synced: over 1 year ago
JSON representation

Growl-like alerts in AngularJS with bootstrap-growl

• Host: GitHub
• URL: https://github.com/c0bra/ui-bootstrap-growl
• Owner: c0bra
• License: mit
• Created: 2013-05-07T20:26:08.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2013-05-07T20:27:34.000Z (over 13 years ago)
• Last Synced: 2025-02-14T03:14:42.525Z (over 1 year ago)
• Language: JavaScript
• Size: 101 KB
• Stars: 1
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ui-bootstrap-growl directive [![Build Status](https://travis-ci.org/c0bra/ui-bootstrap-growl.png)](https://travis-ci.org/c0bra/ui-bootstrap-growl)

This directive allows you to add a growl-like alerts to your AngularJS app using [bootstrap-growl](https://github.com/ifightcrime/bootstrap-growl)

# Requirements

- AngularJS

- JQuery

- JQueryUI

- [bootstrap-growl](https://github.com/ifightcrime/bootstrap-growl)

# Testing

We use [karma](http://karma-runner.github.io/0.8/index.html) and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:

  npm install -g grunt-cli

  npm install

  bower install

  grunt

The karma task will try to open Chrome as a browser in which to run the tests.  Make sure this is available or change the configuration in `test\test.config.js` 

# Usage

We use [bower](http://twitter.github.com/bower/) for dependency management.  Add

    dependencies: {

        "ui-bootstrap-growl": "latest"

    }

To your `components.json` file. Then run

    bower install

This will copy the ui-date files into your `components` folder, along with its dependencies. Load the script files in your application:

    

    

    

    

Add the date module as a dependency to your application module:

    var myAppModule = angular.module('MyApp', ['ui.bootstrap.growl'])

Apply the directive to a div:

    

## Options

All the jQueryUI DatePicker options can be passed through the directive.

	myAppModule.controller('MyController', function($scope) {

		$scope.dateOptions = {

			changeYear: true,

			changeMonth: true,

			yearRange: '1900:-0'

		};

	});

    

## Static Inline Picker

If you want a static picker then simply apply the directive to a div rather than an input element.

    


## Working with ng-model

The ui-date directive plays nicely with ng-model and validation directives such as ng-required.

If you add the ng-model directive to same the element as ui-date then the picked date is automatically synchronized with the model value.

_The ui-date directive stores and expects the model value to be a standard javascript Date object._

## ui-date-format directive

The ui-date directive only works with Date objects.

If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive.

This directive specifies the format of the date string that will be expected in the ng-model.

The format string syntax is that defined by the JQueryUI Date picker. For example

    

Now you can set myDate in the controller.

    $scope.myDate = "Thursday, 11 October, 2012";

## ng-required directive

If you apply the required directive to element then the form element is invalid until a date is picked.

Note: Remember that the ng-required directive must be explictly set, i.e. to "true".  This is especially true on divs: