<!DOCTYPE html>
<html>
<head lang="en" >
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css"
rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="angular-ui.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
rel="stylesheet">
<link href="//ivaynberg.github.com/select2/select2-master/select2.css" rel="stylesheet">
<script src="angular-resource.js"></script>
<script src="app.js"></script>
<script src="//ivaynberg.github.com/select2/select2-master/select2.js"></script>
</head>
<body ng-app="backoffice">
<div class="container" id="customers" ng-controller="customersCtrl">
<input id="searchInput" ng-model="filterText" placeholder="Type om te filteren..."
type="text">
<h2>With select in template</h2>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Customer name</th>
<th>Status</th>
<th>Industries</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers | filter:filterText">
<td><a href="#/customers/{{customer.id}}">{{customer.customer_name}}</a></td>
<td>
<select ng-model="customer.status" ng-change="changeStatus(customer)" ng-options="key as value for (key,value) in statuses"
class="customer_status"></select>
</td>
<td>
<industriesSelect industries="industries" resource="customer"></industriesSelect>
<select multiple ui-select2="{width: 'copy'}" style="width: 100%;" ui-event="{ change : 'changeIndustries($event,$params, customer)' }" ng-model="customer.industries" data-placeholder=" ">
<option ng-repeat="industry in industries" value="{{industry.id}}">{{industry.industry_name}}</option>
</select>
</td>
</tr>
</tbody>
</table>
<h2>With select in directive</h2>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Customer name</th>
<th>Status</th>
<th>Industries</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers | filter:filterText">
<td><a href="#/customers/{{customer.id}}">{{customer.customer_name}}</a></td>
<td>
<select ng-model="customer.status" ng-change="changeStatus(customer)" ng-options="key as value for (key,value) in statuses"
class="customer_status"></select>
</td>
<td>
<industriesSelect industries="industries" resource="customer"></industriesSelect>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
"use strict";
var backoffice = angular.module('backoffice', ['ngResource', 'ui']);
backoffice.controller('customersCtrl',
['$scope', 'CustomersService', 'IndustriesService',
function ($scope, CustomersService, IndustriesService) {
$scope.customers = CustomersService.query();
$scope.industries = IndustriesService.query();
$scope.statuses = {0: 'Disabled', 1: 'Enabled'};
$scope.changeStatus = function(customer){
CustomersService.update({id: customer.id, status: customer.status});
};
}]);
backoffice.factory('CustomersService', function($resource) {
return $resource('customers.json', {}, {
update: {method:'PUT'}
});
})
.factory('IndustriesService', function($resource) {
return $resource('industries.json', {}, {
update: {method:'PUT'}
});
});
backoffice.directive('industriesSelect', function() {
return {
restrict: 'E',
scope: {industries: '=industriess', resource: '=resource'},
template: "Resource {{resource.name}}",
/* template:
'<select ui-select2="{width:\'resolve\'}" ng-model="resource.industries" ui-event="{ change : \'changeIndustries($event,$params,resource)\' }" multiple="multiple" style="width:100%;">'
+' <option ng-repeat="industry in industries" value="{{industry.id}}">{{industry.industry_name}}</option>'
+'</select>', */
replace: true,
transclude: true
};
})
/**
* AngularUI - The companion suite for AngularJS
* @version v0.4.0 - 2013-02-15
* @link http://angular-ui.github.com
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
angular.module('ui.config', []).value('ui.config', {});
angular.module('ui.filters', ['ui.config']);
angular.module('ui.directives', ['ui.config']);
angular.module('ui', ['ui.filters', 'ui.directives', 'ui.config']);
/**
* Animates the injection of new DOM elements by simply creating the DOM with a class and then immediately removing it
* Animations must be done using CSS3 transitions, but provide excellent flexibility
*
* @todo Add proper support for animating out
* @param [options] {mixed} Can be an object with multiple options, or a string with the animation class
* class {string} the CSS class(es) to use. For example, 'ui-hide' might be an excellent alternative class.
* @example <li ng-repeat="item in items" ui-animate=" 'ui-hide' ">{{item}}</li>
*/
angular.module('ui.directives').directive('uiAnimate', ['ui.config', '$timeout', function (uiConfig, $timeout) {
var options = {};
if (angular.isString(uiConfig.animate)) {
options['class'] = uiConfig.animate;
} else if (uiConfig.animate) {
options = uiConfig.animate;
}
return {
restrict: 'A', // supports using directive as element, attribute and class
link: function ($scope, element, attrs) {
var opts = {};
if (attrs.uiAnimate) {
opts = $scope.$eval(attrs.uiAnimate);
if (angular.isString(opts)) {
opts = {'class': opts};
}
}
opts = angular.extend({'class': 'ui-animate'}, options, opts);
element.addClass(opts['class']);
$timeout(function () {
element.removeClass(opts['class']);
}, 20, false);
}
};
}]);
/*
* AngularJs Fullcalendar Wrapper for the JQuery FullCalendar
* API @ http://arshaw.com/fullcalendar/
*
* Angular Calendar Directive that takes in the [eventSources] nested array object as the ng-model and watches (eventSources.length + eventSources[i].length) for changes.
* Can also take in multiple event urls as a source object(s) and feed the events per view.
* The calendar will watch any eventSource array and update itself when a delta is created
* An equalsTracker attrs has been added for use cases that would render the overall length tracker the same even though the events have changed to force updates.
*
*/
angular.module('ui.directives').directive('uiCalendar',['ui.config', '$parse', function (uiConfig,$parse) {
uiConfig.uiCalendar = uiConfig.uiCalendar || {};
//returns calendar
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elm, attrs, $timeout) {
var sources = scope.$eval(attrs.ngModel);
var tracker = 0;
/* returns the length of all source arrays plus the length of eventSource itself */
var getSources = function () {
var equalsTracker = scope.$eval(attrs.equalsTracker);
tracker = 0;
angular.forEach(sources,function(value,key){
if(angular.isArray(value)){
tracker += value.length;
}
});
if(angular.isNumber(equalsTracker)){
return tracker + sources.length + equalsTracker;
}else{
return tracker + sources.length;
}
};
/* update the calendar with the correct options */
function update() {
//calendar object exposed on scope
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
if(view){
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
/* If the calendar has options added then render them */
var expression,
options = {
defaultView : view,
eventSources: sources
};
if (attrs.uiCalendar) {
expression = scope.$eval(attrs.uiCalendar);
} else {
expression = {};
}
angular.extend(options, uiConfig.uiCalendar, expression);
scope.calendar.fullCalendar(options);
}
update();
/* watches all eventSources */
scope.$watch(getSources, function( newVal, oldVal )
{
update();
});
}
};
}]);
/*global angular, CodeMirror, Error*/
/**
* Binds a CodeMirror widget to a <textarea> element.
*/
angular.module('ui.directives').directive('uiCodemirror', ['ui.config', '$timeout', function (uiConfig, $timeout) {
'use strict';
var events = ["cursorActivity", "viewportChange", "gutterClick", "focus", "blur", "scroll", "update"];
return {
restrict:'A',
require:'ngModel',
link:function (scope, elm, attrs, ngModel) {
var options, opts, onChange, deferCodeMirror, codeMirror;
if (elm[0].type !== 'textarea') {
throw new Error('uiCodemirror3 can only be applied to a textarea element');
}
options = uiConfig.codemirror || {};
opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror));
onChange = function (aEvent) {
return function (instance, changeObj) {
var newValue = instance.getValue();
if (newValue !== ngModel.$viewValue) {
ngModel.$setViewValue(newValue);
scope.$apply();
}
if (typeof aEvent === "function")
aEvent(instance, changeObj);
};
};
deferCodeMirror = function () {
codeMirror = CodeMirror.fromTextArea(elm[0], opts);
codeMirror.on("change", onChange(opts.onChange));
for (var i = 0, n = events.length, aEvent; i < n; ++i) {
aEvent = opts["on" + events[i].charAt(0).toUpperCase() + events[i].slice(1)];
if (aEvent === void 0) continue;
if (typeof aEvent !== "function") continue;
codeMirror.on(events[i], aEvent);
}
// CodeMirror expects a string, so make sure it gets one.
// This does not change the model.
ngModel.$formatters.push(function (value) {
if (angular.isUndefined(value) || value === null) {
return '';
}
else if (angular.isObject(value) || angular.isArray(value)) {
throw new Error('ui-codemirror cannot use an object or an array as a model');
}
return value;
});
// Override the ngModelController $render method, which is what gets called when the model is updated.
// This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
ngModel.$render = function () {
codeMirror.setValue(ngModel.$viewValue);
};
// Watch ui-refresh and refresh the directive
if (attrs.uiRefresh) {
scope.$watch(attrs.uiRefresh, function(newVal, oldVal){
// Skip the initial watch firing
if (newVal !== oldVal)
$timeout(codeMirror.refresh);
});
}
};
$timeout(deferCodeMirror);
}
};
}]);
/*
Gives the ability to style currency based on its sign.
*/
angular.module('ui.directives').directive('uiCurrency', ['ui.config', 'currencyFilter' , function (uiConfig, currencyFilter) {
var options = {
pos: 'ui-currency-pos',
neg: 'ui-currency-neg',
zero: 'ui-currency-zero'
};
if (uiConfig.currency) {
angular.extend(options, uiConfig.currency);
}
return {
restrict: 'EAC',
require: 'ngModel',
link: function (scope, element, attrs, controller) {
var opts, // instance-specific options
renderview,
value;
opts = angular.extend({}, options, scope.$eval(attrs.uiCurrency));
renderview = function (viewvalue) {
var num;
num = viewvalue * 1;
element.toggleClass(opts.pos, (num > 0) );
element.toggleClass(opts.neg, (num < 0) );
element.toggleClass(opts.zero, (num === 0) );
if (viewvalue === '') {
element.text('');
} else {
element.text(currencyFilter(num, opts.symbol));
}
return true;
};
controller.$render = function () {
value = controller.$viewValue;
element.val(value);
renderview(value);
};
}
};
}]);
/*global angular */
/*
jQuery UI Datepicker plugin wrapper
@note If ≤ IE8 make sure you have a polyfill for Date.toISOString()
@param [ui-date] {object} Options to pass to $.fn.datepicker() merged onto ui.config
*/
angular.module('ui.directives')
.directive('uiDate', ['ui.config', function (uiConfig) {
'use strict';
var options;
options = {};
if (angular.isObject(uiConfig.date)) {
angular.extend(options, uiConfig.date);
}
return {
require:'?ngModel',
link:function (scope, element, attrs, controller) {
var getOptions = function () {
return angular.extend({}, uiConfig.date, scope.$eval(attrs.uiDate));
};
var initDateWidget = function () {
var opts = getOptions();
// If we have a controller (i.e. ngModelController) then wire it up
if (controller) {
var updateModel = function () {
scope.$apply(function () {
var date = element.datepicker("getDate");
element.datepicker("setDate", element.val());
controller.$setViewValue(date);
element.blur();
});
};
if (opts.onSelect) {
// Caller has specified onSelect, so call this as well as updating the model
var userHandler = opts.onSelect;
opts.onSelect = function (value, picker) {
updateModel();
scope.$apply(function() {
userHandler(value, picker);
});
};
} else {
// No onSelect already specified so just update the model
opts.onSelect = updateModel;
}
// In case the user changes the text directly in the input box
element.bind('change', updateModel);
// Update the date picker when the model changes
controller.$render = function () {
var date = controller.$viewValue;
if ( angular.isDefined(date) && date !== null && !angular.isDate(date) ) {
throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
}
element.datepicker("setDate", date);
};
}
// If we don't destroy the old one it doesn't update properly when the config changes
element.datepicker('destroy');
// Create the new datepicker widget
element.datepicker(opts);
if ( controller ) {
// Force a render to override whatever is in the input text box
controller.$render();
}
};
// Watch for changes to the directives options
scope.$watch(getOptions, initDateWidget, true);
}
};
}
])
.directive('uiDateFormat', ['ui.config', function(uiConfig) {
var directive = {
require:'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var dateFormat = attrs.uiDateFormat || uiConfig.dateFormat;
if ( dateFormat ) {
// Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
modelCtrl.$formatters.push(function(value) {
if (angular.isString(value) ) {
return $.datepicker.parseDate(dateFormat, value);
}
});
modelCtrl.$parsers.push(function(value){
if (value) {
return $.datepicker.formatDate(dateFormat, value);
}
});
} else {
// Default to ISO formatting
modelCtrl.$formatters.push(function(value) {
if (angular.isString(value) ) {
return new Date(value);
}
});
modelCtrl.$parsers.push(function(value){
if (value) {
return value.toISOString();
}
});
}
}
};
return directive;
}]);
/**
* General-purpose Event binding. Bind any event not natively supported by Angular
* Pass an object with keynames for events to ui-event
* Allows $event object and $params object to be passed
*
* @example <input ui-event="{ focus : 'counter++', blur : 'someCallback()' }">
* @example <input ui-event="{ myCustomEvent : 'myEventHandler($event, $params)'}">
*
* @param ui-event {string|object literal} The event to bind to as a string or a hash of events with their callbacks
*/
angular.module('ui.directives').directive('uiEvent', ['$parse',
function ($parse) {
return function (scope, elm, attrs) {
var events = scope.$eval(attrs.uiEvent);
angular.forEach(events, function (uiEvent, eventName) {
var fn = $parse(uiEvent);
elm.bind(eventName, function (evt) {
var params = Array.prototype.slice.call(arguments);
//Take out first paramater (event object);
params = params.splice(1);
scope.$apply(function () {
fn(scope, {$event: evt, $params: params});
});
});
});
};
}]);
/*
* Defines the ui-if tag. This removes/adds an element from the dom depending on a condition
* Originally created by @tigbro, for the @jquery-mobile-angular-adapter
* https://github.com/tigbro/jquery-mobile-angular-adapter
*/
angular.module('ui.directives').directive('uiIf', [function () {
return {
transclude: 'element',
priority: 1000,
terminal: true,
restrict: 'A',
compile: function (element, attr, transclude) {
return function (scope, element, attr) {
var childElement;
var childScope;
scope.$watch(attr['uiIf'], function (newValue) {
if (childElement) {
childElement.remove();
childElement = undefined;
}
if (childScope) {
childScope.$destroy();
childScope = undefined;
}
if (newValue) {
childScope = scope.$new();
transclude(childScope, function (clone) {
childElement = clone;
element.after(clone);
});
}
});
};
}
};
}]);
/**
* General-purpose jQuery wrapper. Simply pass the plugin name as the expression.
*
* It is possible to specify a default set of parameters for each jQuery plugin.
* Under the jq key, namespace each plugin by that which will be passed to ui-jq.
* Unfortunately, at this time you can only pre-define the first parameter.
* @example { jq : { datepicker : { showOn:'click' } } }
*
* @param ui-jq {string} The $elm.[pluginName]() to call.
* @param [ui-options] {mixed} Expression to be evaluated and passed as options to the function
* Multiple parameters can be separated by commas
* @param [ui-refresh] {expression} Watch expression and refire plugin on changes
*
* @example <input ui-jq="datepicker" ui-options="{showOn:'click'},secondParameter,thirdParameter" ui-refresh="iChange">
*/
angular.module('ui.directives').directive('uiJq', ['ui.config', '$timeout', function uiJqInjectingFunction(uiConfig, $timeout) {
return {
restrict: 'A',
compile: function uiJqCompilingFunction(tElm, tAttrs) {
if (!angular.isFunction(tElm[tAttrs.uiJq])) {
throw new Error('ui-jq: The "' + tAttrs.uiJq + '" function does not exist');
}
var options = uiConfig.jq && uiConfig.jq[tAttrs.uiJq];
return function uiJqLinkingFunction(scope, elm, attrs) {
var linkOptions = [];
// If ui-options are passed, merge (or override) them onto global defaults and pass to the jQuery method
if (attrs.uiOptions) {
linkOptions = scope.$eval('[' + attrs.uiOptions + ']');
if (angular.isObject(options) && angular.isObject(linkOptions[0])) {
linkOptions[0] = angular.extend({}, options, linkOptions[0]);
}
} else if (options) {
linkOptions = [options];
}
// If change compatibility is enabled, the form input's "change" event will trigger an "input" event
if (attrs.ngModel && elm.is('select,input,textarea')) {
elm.on('change', function() {
elm.trigger('input');
});
}
// Call jQuery method and pass relevant options
function callPlugin() {
$timeout(function() {
elm[attrs.uiJq].apply(elm, linkOptions);
}, 0, false);
}
// If ui-refresh is used, re-fire the the method upon every change
if (attrs.uiRefresh) {
scope.$watch(attrs.uiRefresh, function(newVal) {
callPlugin();
});
}
callPlugin();
};
}
};
}]);
angular.module('ui.directives').factory('keypressHelper', ['$parse', function keypress($parse){
var keysByCode = {
8: 'backspace',
9: 'tab',
13: 'enter',
27: 'esc',
32: 'space',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
45: 'insert',
46: 'delete'
};
var capitaliseFirstLetter = function (string) {
return string.charAt(0).toUpperCase() + string.slice(1);
};
return function(mode, scope, elm, attrs) {
var params, combinations = [];
params = scope.$eval(attrs['ui'+capitaliseFirstLetter(mode)]);
// Prepare combinations for simple checking
angular.forEach(params, function (v, k) {
var combination, expression;
expression = $parse(v);
angular.forEach(k.split(' '), function(variation) {
combination = {
expression: expression,
keys: {}
};
angular.forEach(variation.split('-'), function (value) {
combination.keys[value] = true;
});
combinations.push(combination);
});
});
// Check only matching of pressed keys one of the conditions
elm.bind(mode, function (event) {
// No need to do that inside the cycle
var altPressed = event.metaKey || event.altKey;
var ctrlPressed = event.ctrlKey;
var shiftPressed = event.shiftKey;
var keyCode = event.keyCode;
// normalize keycodes
if (mode === 'keypress' && !shiftPressed && keyCode >= 97 && keyCode <= 122) {
keyCode = keyCode - 32;
}
// Iterate over prepared combinations
angular.forEach(combinations, function (combination) {
var mainKeyPressed = (combination.keys[keysByCode[event.keyCode]] || combination.keys[event.keyCode.toString()]) || false;
var altRequired = combination.keys.alt || false;
var ctrlRequired = combination.keys.ctrl || false;
var shiftRequired = combination.keys.shift || false;
if (
mainKeyPressed &&
( altRequired == altPressed ) &&
( ctrlRequired == ctrlPressed ) &&
( shiftRequired == shiftPressed )
) {
// Run the function
scope.$apply(function () {
combination.expression(scope, { '$event': event });
});
}
});
});
};
}]);
/**
* Bind one or more handlers to particular keys or their combination
* @param hash {mixed} keyBindings Can be an object or string where keybinding expression of keys or keys combinations and AngularJS Exspressions are set. Object syntax: "{ keys1: expression1 [, keys2: expression2 [ , ... ]]}". String syntax: ""expression1 on keys1 [ and expression2 on keys2 [ and ... ]]"". Expression is an AngularJS Expression, and key(s) are dash-separated combinations of keys and modifiers (one or many, if any. Order does not matter). Supported modifiers are 'ctrl', 'shift', 'alt' and key can be used either via its keyCode (13 for Return) or name. Named keys are 'backspace', 'tab', 'enter', 'esc', 'space', 'pageup', 'pagedown', 'end', 'home', 'left', 'up', 'right', 'down', 'insert', 'delete'.
* @example <input ui-keypress="{enter:'x = 1', 'ctrl-shift-space':'foo()', 'shift-13':'bar()'}" /> <input ui-keypress="foo = 2 on ctrl-13 and bar('hello') on shift-esc" />
**/
angular.module('ui.directives').directive('uiKeydown', ['keypressHelper', function(keypressHelper){
return {
link: function (scope, elm, attrs) {
keypressHelper('keydown', scope, elm, attrs);
}
};
}]);
angular.module('ui.directives').directive('uiKeypress', ['keypressHelper', function(keypressHelper){
return {
link: function (scope, elm, attrs) {
keypressHelper('keypress', scope, elm, attrs);
}
};
}]);
angular.module('ui.directives').directive('uiKeyup', ['keypressHelper', function(keypressHelper){
return {
link: function (scope, elm, attrs) {
keypressHelper('keyup', scope, elm, attrs);
}
};
}]);
(function () {
var app = angular.module('ui.directives');
//Setup map events from a google map object to trigger on a given element too,
//then we just use ui-event to catch events from an element
function bindMapEvents(scope, eventsStr, googleObject, element) {
angular.forEach(eventsStr.split(' '), function (eventName) {
//Prefix all googlemap events with 'map-', so eg 'click'
//for the googlemap doesn't interfere with a normal 'click' event
var $event = { type: 'map-' + eventName };
google.maps.event.addListener(googleObject, eventName, function (evt) {
element.triggerHandler(angular.extend({}, $event, evt));
//We create an $apply if it isn't happening. we need better support for this
//We don't want to use timeout because tons of these events fire at once,
//and we only need one $apply
if (!scope.$$phase) scope.$apply();
});
});
}
app.directive('uiMap',
['ui.config', '$parse', function (uiConfig, $parse) {
var mapEvents = 'bounds_changed center_changed click dblclick drag dragend ' +
'dragstart heading_changed idle maptypeid_changed mousemove mouseout ' +
'mouseover projection_changed resize rightclick tilesloaded tilt_changed ' +
'zoom_changed';
var options = uiConfig.map || {};
return {
restrict: 'A',
//doesn't work as E for unknown reason
link: function (scope, elm, attrs) {
var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions));
var map = new google.maps.Map(elm[0], opts);
var model = $parse(attrs.uiMap);
//Set scope variable for the map
model.assign(scope, map);
bindMapEvents(scope, mapEvents, map, elm);
}
};
}]);
app.directive('uiMapInfoWindow',
['ui.config', '$parse', '$compile', function (uiConfig, $parse, $compile) {
var infoWindowEvents = 'closeclick content_change domready ' +
'position_changed zindex_changed';
var options = uiConfig.mapInfoWindow || {};
return {
link: function (scope, elm, attrs) {
var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions));
opts.content = elm[0];
var model = $parse(attrs.uiMapInfoWindow);
var infoWindow = model(scope);
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow(opts);
model.assign(scope, infoWindow);
}
bindMapEvents(scope, infoWindowEvents, infoWindow, elm);
/* The info window's contents dont' need to be on the dom anymore,
google maps has them stored. So we just replace the infowindow element
with an empty div. (we don't just straight remove it from the dom because
straight removing things from the dom can mess up angular) */
elm.replaceWith('<div></div>');
//Decorate infoWindow.open to $compile contents before opening
var _open = infoWindow.open;
infoWindow.open = function open(a1, a2, a3, a4, a5, a6) {
$compile(elm.contents())(scope);
_open.call(infoWindow, a1, a2, a3, a4, a5, a6);
};
}
};
}]);
/*
* Map overlay directives all work the same. Take map marker for example
* <ui-map-marker="myMarker"> will $watch 'myMarker' and each time it changes,
* it will hook up myMarker's events to the directive dom element. Then
* ui-event will be able to catch all of myMarker's events. Super simple.
*/
function mapOverlayDirective(directiveName, events) {
app.directive(directiveName, [function () {
return {
restrict: 'A',
link: function (scope, elm, attrs) {
scope.$watch(attrs[directiveName], function (newObject) {
bindMapEvents(scope, events, newObject, elm);
});
}
};
}]);
}
mapOverlayDirective('uiMapMarker',
'animation_changed click clickable_changed cursor_changed ' +
'dblclick drag dragend draggable_changed dragstart flat_changed icon_changed ' +
'mousedown mouseout mouseover mouseup position_changed rightclick ' +
'shadow_changed shape_changed title_changed visible_changed zindex_changed');
mapOverlayDirective('uiMapPolyline',
'click dblclick mousedown mousemove mouseout mouseover mouseup rightclick');
mapOverlayDirective('uiMapPolygon',
'click dblclick mousedown mousemove mouseout mouseover mouseup rightclick');
mapOverlayDirective('uiMapRectangle',
'bounds_changed click dblclick mousedown mousemove mouseout mouseover ' +
'mouseup rightclick');
mapOverlayDirective('uiMapCircle',
'center_changed click dblclick mousedown mousemove ' +
'mouseout mouseover mouseup radius_changed rightclick');
mapOverlayDirective('uiMapGroundOverlay',
'click dblclick');
})();
/*
Attaches jquery-ui input mask onto input element
*/
angular.module('ui.directives').directive('uiMask', [
function () {
return {
require:'ngModel',
link:function ($scope, element, attrs, controller) {
/* We override the render method to run the jQuery mask plugin
*/
controller.$render = function () {
var value = controller.$viewValue || '';
element.val(value);
element.mask($scope.$eval(attrs.uiMask));
};
/* Add a parser that extracts the masked value into the model but only if the mask is valid
*/
controller.$parsers.push(function (value) {
//the second check (or) is only needed due to the fact that element.isMaskValid() will keep returning undefined
//until there was at least one key event
var isValid = element.isMaskValid() || angular.isUndefined(element.isMaskValid()) && element.val().length>0;
controller.$setValidity('mask', isValid);
return isValid ? value : undefined;
});
/* When keyup, update the view value
*/
element.bind('keyup', function () {
$scope.$apply(function () {
controller.$setViewValue(element.mask());
});
});
}
};
}
]);
/**
* Add a clear button to form inputs to reset their value
*/
angular.module('ui.directives').directive('uiReset', ['ui.config', function (uiConfig) {
var resetValue = null;
if (uiConfig.reset !== undefined)
resetValue = uiConfig.reset;
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var aElement;
aElement = angular.element('<a class="ui-reset" />');
elm.wrap('<span class="ui-resetwrap" />').after(aElement);
aElement.bind('click', function (e) {
e.preventDefault();
scope.$apply(function () {
if (attrs.uiReset)
ctrl.$setViewValue(scope.$eval(attrs.uiReset));
else
ctrl.$setViewValue(resetValue);
ctrl.$render();
});
});
}
};
}]);
/**
* Set a $uiRoute boolean to see if the current route matches
*/
angular.module('ui.directives').directive('uiRoute', ['$location', '$parse', function ($location, $parse) {
return {
restrict: 'AC',
compile: function(tElement, tAttrs) {
var useProperty;
if (tAttrs.uiRoute) {
useProperty = 'uiRoute';
} else if (tAttrs.ngHref) {
useProperty = 'ngHref';
} else if (tAttrs.href) {
useProperty = 'href';
} else {
throw new Error('uiRoute missing a route or href property on ' + tElement[0]);
}
return function ($scope, elm, attrs) {
var modelSetter = $parse(attrs.ngModel || attrs.routeModel || '$uiRoute').assign;
var watcher = angular.noop;
// Used by href and ngHref
function staticWatcher(newVal) {
if ((hash = newVal.indexOf('#')) > -1)
newVal = newVal.substr(hash + 1);
watcher = function watchHref() {
modelSetter($scope, ($location.path().indexOf(newVal) > -1));
};
watcher();
}
// Used by uiRoute
function regexWatcher(newVal) {
if ((hash = newVal.indexOf('#')) > -1)
newVal = newVal.substr(hash + 1);
watcher = function watchRegex() {
var regexp = new RegExp('^' + newVal + '$', ['i']);
modelSetter($scope, regexp.test($location.path()));
};
watcher();
}
switch (useProperty) {
case 'uiRoute':
// if uiRoute={{}} this will be undefined, otherwise it will have a value and $observe() never gets triggered
if (attrs.uiRoute)
regexWatcher(attrs.uiRoute);
else
attrs.$observe('uiRoute', regexWatcher);
break;
case 'ngHref':
// Setup watcher() every time ngHref changes
if (attrs.ngHref)
staticWatcher(attrs.ngHref);
else
attrs.$observe('ngHref', staticWatcher);
break;
case 'href':
// Setup watcher()
staticWatcher(attrs.href);
}
$scope.$on('$routeChangeSuccess', function(){
watcher();
});
}
}
};
}]);
/*global angular, $, document*/
/**
* Adds a 'ui-scrollfix' class to the element when the page scrolls past it's position.
* @param [offset] {int} optional Y-offset to override the detected offset.
* Takes 300 (absolute) or -300 or +300 (relative to detected)
*/
angular.module('ui.directives').directive('uiScrollfix', ['$window', function ($window) {
'use strict';
return {
link: function (scope, elm, attrs) {
var top = elm.offset().top;
if (!attrs.uiScrollfix) {
attrs.uiScrollfix = top;
} else {
// chartAt is generally faster than indexOf: http://jsperf.com/indexof-vs-chartat
if (attrs.uiScrollfix.charAt(0) === '-') {
attrs.uiScrollfix = top - attrs.uiScrollfix.substr(1);
} else if (attrs.uiScrollfix.charAt(0) === '+') {
attrs.uiScrollfix = top + parseFloat(attrs.uiScrollfix.substr(1));
}
}
angular.element($window).on('scroll.ui-scrollfix', function () {
// if pageYOffset is defined use it, otherwise use other crap for IE
var offset;
if (angular.isDefined($window.pageYOffset)) {
offset = $window.pageYOffset;
} else {
var iebody = (document.compatMode && document.compatMode !== "BackCompat") ? document.documentElement : document.body;
offset = iebody.scrollTop;
}
if (!elm.hasClass('ui-scrollfix') && offset > attrs.uiScrollfix) {
elm.addClass('ui-scrollfix');
} else if (elm.hasClass('ui-scrollfix') && offset < attrs.uiScrollfix) {
elm.removeClass('ui-scrollfix');
}
});
}
};
}]);
/**
* Enhanced Select2 Dropmenus
*
* @AJAX Mode - When in this mode, your value will be an object (or array of objects) of the data used by Select2
* This change is so that you do not have to do an additional query yourself on top of Select2's own query
* @params [options] {object} The configuration options passed to $.fn.select2(). Refer to the documentation
*/
angular.module('ui.directives').directive('uiSelect2', ['ui.config', '$timeout', function (uiConfig, $timeout) {
var options = {};
if (uiConfig.select2) {
angular.extend(options, uiConfig.select2);
}
return {
require: '?ngModel',
compile: function (tElm, tAttrs) {
var watch,
repeatOption,
repeatAttr,
isSelect = tElm.is('select'),
isMultiple = (tAttrs.multiple !== undefined);
// Enable watching of the options dataset if in use
if (tElm.is('select')) {
repeatOption = tElm.find('option[ng-repeat], option[data-ng-repeat]');
if (repeatOption.length) {
repeatAttr = repeatOption.attr('ng-repeat') || repeatOption.attr('data-ng-repeat');
watch = jQuery.trim(repeatAttr.split('|')[0]).split(' ').pop();
}
}
return function (scope, elm, attrs, controller) {
// instance-specific options
var opts = angular.extend({}, options, scope.$eval(attrs.uiSelect2));
if (isSelect) {
// Use <select multiple> instead
delete opts.multiple;
delete opts.initSelection;
} else if (isMultiple) {
opts.multiple = true;
}
if (controller) {
// Watch the model for programmatic changes
controller.$render = function () {
if (isSelect) {
elm.select2('val', controller.$modelValue);
} else {
if (isMultiple) {
if (!controller.$modelValue) {
elm.select2('data', []);
} else if (angular.isArray(controller.$modelValue)) {
elm.select2('data', controller.$modelValue);
} else {
elm.select2('val', controller.$modelValue);
}
} else {
if (angular.isObject(controller.$modelValue)) {
elm.select2('data', controller.$modelValue);
} else {
elm.select2('val', controller.$modelValue);
}
}
}
};
// Watch the options dataset for changes
if (watch) {
scope.$watch(watch, function (newVal, oldVal, scope) {
if (!newVal) return;
// Delayed so that the options have time to be rendered
$timeout(function () {
elm.select2('val', controller.$viewValue);
// Refresh angular to remove the superfluous option
elm.trigger('change');
});
});
}
if (!isSelect) {
// Set the view and model value and update the angular template manually for the ajax/multiple select2.
elm.bind("change", function () {
scope.$apply(function () {
controller.$setViewValue(elm.select2('data'));
});
});
if (opts.initSelection) {
var initSelection = opts.initSelection;
opts.initSelection = function (element, callback) {
initSelection(element, function (value) {
controller.$setViewValue(value);
callback(value);
});
};
}
}
}
attrs.$observe('disabled', function (value) {
elm.select2(value && 'disable' || 'enable');
});
if (attrs.ngMultiple) {
scope.$watch(attrs.ngMultiple, function(newVal) {
elm.select2(opts);
});
}
// Set initial value since Angular doesn't
elm.val(scope.$eval(attrs.ngModel));
// Initialize the plugin late so that the injected DOM does not disrupt the template compiler
$timeout(function () {
elm.select2(opts);
// Not sure if I should just check for !isSelect OR if I should check for 'tags' key
if (!opts.initSelection && !isSelect)
controller.$setViewValue(elm.select2('data'));
});
};
}
};
}]);
/**
* uiShow Directive
*
* Adds a 'ui-show' class to the element instead of display:block
* Created to allow tighter control of CSS without bulkier directives
*
* @param expression {boolean} evaluated expression to determine if the class should be added
*/
angular.module('ui.directives').directive('uiShow', [function () {
return function (scope, elm, attrs) {
scope.$watch(attrs.uiShow, function (newVal, oldVal) {
if (newVal) {
elm.addClass('ui-show');
} else {
elm.removeClass('ui-show');
}
});
};
}])
/**
* uiHide Directive
*
* Adds a 'ui-hide' class to the element instead of display:block
* Created to allow tighter control of CSS without bulkier directives
*
* @param expression {boolean} evaluated expression to determine if the class should be added
*/
.directive('uiHide', [function () {
return function (scope, elm, attrs) {
scope.$watch(attrs.uiHide, function (newVal, oldVal) {
if (newVal) {
elm.addClass('ui-hide');
} else {
elm.removeClass('ui-hide');
}
});
};
}])
/**
* uiToggle Directive
*
* Adds a class 'ui-show' if true, and a 'ui-hide' if false to the element instead of display:block/display:none
* Created to allow tighter control of CSS without bulkier directives. This also allows you to override the
* default visibility of the element using either class.
*
* @param expression {boolean} evaluated expression to determine if the class should be added
*/
.directive('uiToggle', [function () {
return function (scope, elm, attrs) {
scope.$watch(attrs.uiToggle, function (newVal, oldVal) {
if (newVal) {
elm.removeClass('ui-hide').addClass('ui-show');
} else {
elm.removeClass('ui-show').addClass('ui-hide');
}
});
};
}]);
/*
jQuery UI Sortable plugin wrapper
@param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
*/
angular.module('ui.directives').directive('uiSortable', [
'ui.config', function(uiConfig) {
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var onReceive, onRemove, onStart, onUpdate, opts, _receive, _remove, _start, _update;
opts = angular.extend({}, uiConfig.sortable, scope.$eval(attrs.uiSortable));
if (ngModel) {
ngModel.$render = function() {
element.sortable( "refresh" );
};
onStart = function(e, ui) {
// Save position of dragged item
ui.item.sortable = { index: ui.item.index() };
};
onUpdate = function(e, ui) {
// For some reason the reference to ngModel in stop() is wrong
ui.item.sortable.resort = ngModel;
};
onReceive = function(e, ui) {
ui.item.sortable.relocate = true;
// added item to array into correct position and set up flag
ngModel.$modelValue.splice(ui.item.index(), 0, ui.item.sortable.moved);
};
onRemove = function(e, ui) {
// copy data into item
if (ngModel.$modelValue.length === 1) {
ui.item.sortable.moved = ngModel.$modelValue.splice(0, 1)[0];
} else {
ui.item.sortable.moved = ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0];
}
};
onStop = function(e, ui) {
// digest all prepared changes
if (ui.item.sortable.resort && !ui.item.sortable.relocate) {
// Fetch saved and current position of dropped element
var end, start;
start = ui.item.sortable.index;
end = ui.item.index();
if (start < end)
end--;
// Reorder array and apply change to scope
ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]);
}
if (ui.item.sortable.resort || ui.item.sortable.relocate) {
scope.$apply();
}
};
// If user provided 'start' callback compose it with onStart function
_start = opts.start;
opts.start = function(e, ui) {
onStart(e, ui);
if (typeof _start === "function")
_start(e, ui);
};
// If user provided 'start' callback compose it with onStart function
_stop = opts.stop;
opts.stop = function(e, ui) {
onStop(e, ui);
if (typeof _stop === "function")
_stop(e, ui);
};
// If user provided 'update' callback compose it with onUpdate function
_update = opts.update;
opts.update = function(e, ui) {
onUpdate(e, ui);
if (typeof _update === "function")
_update(e, ui);
};
// If user provided 'receive' callback compose it with onReceive function
_receive = opts.receive;
opts.receive = function(e, ui) {
onReceive(e, ui);
if (typeof _receive === "function")
_receive(e, ui);
};
// If user provided 'remove' callback compose it with onRemove function
_remove = opts.remove;
opts.remove = function(e, ui) {
onRemove(e, ui);
if (typeof _remove === "function")
_remove(e, ui);
};
}
// Create sortable
element.sortable(opts);
}
};
}
]);
/**
* Binds a TinyMCE widget to <textarea> elements.
*/
angular.module('ui.directives').directive('uiTinymce', ['ui.config', function (uiConfig) {
uiConfig.tinymce = uiConfig.tinymce || {};
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var expression,
options = {
// Update model on button click
onchange_callback: function (inst) {
if (inst.isDirty()) {
inst.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase)
scope.$apply();
}
},
// Update model on keypress
handle_event_callback: function (e) {
if (this.isDirty()) {
this.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase)
scope.$apply();
}
return true; // Continue handling
},
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.onSetContent.add(function (ed, o) {
if (ed.isDirty()) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase)
scope.$apply();
}
});
}
};
if (attrs.uiTinymce) {
expression = scope.$eval(attrs.uiTinymce);
} else {
expression = {};
}
angular.extend(options, uiConfig.tinymce, expression);
setTimeout(function () {
elm.tinymce(options);
});
}
};
}]);
/**
* General-purpose validator for ngModel.
* angular.js comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using
* an arbitrary validation function requires creation of a custom formatters and / or parsers.
* The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).
* A validator function will trigger validation on both model and input changes.
*
* @example <input ui-validate=" 'myValidatorFunction($value)' ">
* @example <input ui-validate="{ foo : '$value > anotherModel', bar : 'validateFoo($value)' }">
* @example <input ui-validate="{ foo : '$value > anotherModel' }" ui-validate-watch=" 'anotherModel' ">
* @example <input ui-validate="{ foo : '$value > anotherModel', bar : 'validateFoo($value)' }" ui-validate-watch=" { foo : 'anotherModel' } ">
*
* @param ui-validate {string|object literal} If strings is passed it should be a scope's function to be used as a validator.
* If an object literal is passed a key denotes a validation error key while a value should be a validator function.
* In both cases validator function should take a value to validate as its argument and should return true/false indicating a validation result.
*/
angular.module('ui.directives').directive('uiValidate', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var validateFn, watch, validators = {},
validateExpr = scope.$eval(attrs.uiValidate);
if (!validateExpr) return;
if (angular.isString(validateExpr)) {
validateExpr = { validator: validateExpr };
}
angular.forEach(validateExpr, function (expression, key) {
validateFn = function (valueToValidate) {
if (scope.$eval(expression, { '$value' : valueToValidate })) {
ctrl.$setValidity(key, true);
return valueToValidate;
} else {
ctrl.$setValidity(key, false);
return undefined;
}
};
validators[key] = validateFn;
ctrl.$formatters.push(validateFn);
ctrl.$parsers.push(validateFn);
});
// Support for ui-validate-watch
if (attrs.uiValidateWatch) {
watch = scope.$eval(attrs.uiValidateWatch);
if (angular.isString(watch)) {
scope.$watch(watch, function(){
angular.forEach(validators, function(validatorFn, key){
validatorFn(ctrl.$modelValue);
});
});
} else {
angular.forEach(watch, function(expression, key){
scope.$watch(expression, function(){
validators[key](ctrl.$modelValue);
});
});
}
}
}
};
});
/**
* A replacement utility for internationalization very similar to sprintf.
*
* @param replace {mixed} The tokens to replace depends on type
* string: all instances of $0 will be replaced
* array: each instance of $0, $1, $2 etc. will be placed with each array item in corresponding order
* object: all attributes will be iterated through, with :key being replaced with its corresponding value
* @return string
*
* @example: 'Hello :name, how are you :day'.format({ name:'John', day:'Today' })
* @example: 'Records $0 to $1 out of $2 total'.format(['10', '20', '3000'])
* @example: '$0 agrees to all mentions $0 makes in the event that $0 hits a tree while $0 is driving drunk'.format('Bob')
*/
angular.module('ui.filters').filter('format', function(){
return function(value, replace) {
if (!value) {
return value;
}
var target = value.toString(), token;
if (replace === undefined) {
return target;
}
if (!angular.isArray(replace) && !angular.isObject(replace)) {
return target.split('$0').join(replace);
}
token = angular.isArray(replace) && '$' || ':';
angular.forEach(replace, function(value, key){
target = target.split(token+key).join(value);
});
return target;
};
});
/**
* Wraps the
* @param text {string} haystack to search through
* @param search {string} needle to search for
* @param [caseSensitive] {boolean} optional boolean to use case-sensitive searching
*/
angular.module('ui.filters').filter('highlight', function () {
return function (text, search, caseSensitive) {
if (search || angular.isNumber(search)) {
text = text.toString();
search = search.toString();
if (caseSensitive) {
return text.split(search).join('<span class="ui-match">' + search + '</span>');
} else {
return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
}
} else {
return text;
}
};
});
/**
* Converts variable-esque naming conventions to something presentational, capitalized words separated by space.
* @param {String} value The value to be parsed and prettified.
* @param {String} [inflector] The inflector to use. Default: humanize.
* @return {String}
* @example {{ 'Here Is my_phoneNumber' | inflector:'humanize' }} => Here Is My Phone Number
* {{ 'Here Is my_phoneNumber' | inflector:'underscore' }} => here_is_my_phone_number
* {{ 'Here Is my_phoneNumber' | inflector:'variable' }} => hereIsMyPhoneNumber
*/
angular.module('ui.filters').filter('inflector', function () {
function ucwords(text) {
return text.replace(/^([a-z])|\s+([a-z])/g, function ($1) {
return $1.toUpperCase();
});
}
function breakup(text, separator) {
return text.replace(/[A-Z]/g, function (match) {
return separator + match;
});
}
var inflectors = {
humanize: function (value) {
return ucwords(breakup(value, ' ').split('_').join(' '));
},
underscore: function (value) {
return value.substr(0, 1).toLowerCase() + breakup(value.substr(1), '_').toLowerCase().split(' ').join('_');
},
variable: function (value) {
value = value.substr(0, 1).toLowerCase() + ucwords(value.split('_').join(' ')).substr(1).split(' ').join('');
return value;
}
};
return function (text, inflector, separator) {
if (inflector !== false && angular.isString(text)) {
inflector = inflector || 'humanize';
return inflectors[inflector](text);
} else {
return text;
}
};
});
/**
* Filters out all duplicate items from an array by checking the specified key
* @param [key] {string} the name of the attribute of each object to compare for uniqueness
if the key is empty, the entire object will be compared
if the key === false then no filtering will be performed
* @return {array}
*/
angular.module('ui.filters').filter('unique', function () {
return function (items, filterOn) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];
var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return item[filterOn];
} else {
return item;
}
};
angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}
});
items = newItems;
}
return items;
};
});
/**
* @license AngularJS v1.0.2
* (c) 2010-2012 Google, Inc. http://angularjs.org
* License: MIT
*/
(function(window, angular, undefined) {
'use strict';
/**
* @ngdoc overview
* @name ngResource
* @description
*/
/**
* @ngdoc object
* @name ngResource.$resource
* @requires $http
*
* @description
* A factory which creates a resource object that lets you interact with
* [RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) server-side data sources.
*
* The returned resource object has action methods which provide high-level behaviors without
* the need to interact with the low level {@link ng.$http $http} service.
*
* @param {string} url A parameterized URL template with parameters prefixed by `:` as in
* `/user/:username`.
*
* @param {Object=} paramDefaults Default values for `url` parameters. These can be overridden in
* `actions` methods.
*
* Each key value in the parameter object is first bound to url template if present and then any
* excess keys are appended to the url search query after the `?`.
*
* Given a template `/path/:verb` and parameter `{verb:'greet', salutation:'Hello'}` results in
* URL `/path/greet?salutation=Hello`.
*
* If the parameter value is prefixed with `@` then the value of that parameter is extracted from
* the data object (useful for non-GET operations).
*
* @param {Object.<Object>=} actions Hash with declaration of custom action that should extend the
* default set of resource actions. The declaration should be created in the following format:
*
* {action1: {method:?, params:?, isArray:?},
* action2: {method:?, params:?, isArray:?},
* ...}
*
* Where:
*
* - `action` – {string} – The name of action. This name becomes the name of the method on your
* resource object.
* - `method` – {string} – HTTP request method. Valid methods are: `GET`, `POST`, `PUT`, `DELETE`,
* and `JSONP`
* - `params` – {object=} – Optional set of pre-bound parameters for this action.
* - isArray – {boolean=} – If true then the returned object for this action is an array, see
* `returns` section.
*
* @returns {Object} A resource "class" object with methods for the default set of resource actions
* optionally extended with custom `actions`. The default set contains these actions:
*
* { 'get': {method:'GET'},
* 'save': {method:'POST'},
* 'query': {method:'GET', isArray:true},
* 'remove': {method:'DELETE'},
* 'delete': {method:'DELETE'} };
*
* Calling these methods invoke an {@link ng.$http} with the specified http method,
* destination and parameters. When the data is returned from the server then the object is an
* instance of the resource class `save`, `remove` and `delete` actions are available on it as
* methods with the `$` prefix. This allows you to easily perform CRUD operations (create, read,
* update, delete) on server-side data like this:
* <pre>
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
</pre>
*
* It is important to realize that invoking a $resource object method immediately returns an
* empty reference (object or array depending on `isArray`). Once the data is returned from the
* server the existing reference is populated with the actual data. This is a useful trick since
* usually the resource is assigned to a model which is then rendered by the view. Having an empty
* object results in no rendering, once the data arrives from the server then the object is
* populated with the data and the view automatically re-renders itself showing the new data. This
* means that in most case one never has to write a callback function for the action methods.
*
* The action methods on the class object or instance object can be invoked with the following
* parameters:
*
* - HTTP GET "class" actions: `Resource.action([parameters], [success], [error])`
* - non-GET "class" actions: `Resource.action([parameters], postData, [success], [error])`
* - non-GET instance actions: `instance.$action([parameters], [success], [error])`
*
*
* @example
*
* # Credit card resource
*
* <pre>
// Define CreditCard class
var CreditCard = $resource('/user/:userId/card/:cardId',
{userId:123, cardId:'@id'}, {
charge: {method:'POST', params:{charge:true}}
});
// We can retrieve a collection from the server
var cards = CreditCard.query(function() {
// GET: /user/123/card
// server returns: [ {id:456, number:'1234', name:'Smith'} ];
var card = cards[0];
// each item is an instance of CreditCard
expect(card instanceof CreditCard).toEqual(true);
card.name = "J. Smith";
// non GET methods are mapped onto the instances
card.$save();
// POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'}
// server returns: {id:456, number:'1234', name: 'J. Smith'};
// our custom method is mapped as well.
card.$charge({amount:9.99});
// POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name:'J. Smith'}
});
// we can create an instance as well
var newCard = new CreditCard({number:'0123'});
newCard.name = "Mike Smith";
newCard.$save();
// POST: /user/123/card {number:'0123', name:'Mike Smith'}
// server returns: {id:789, number:'01234', name: 'Mike Smith'};
expect(newCard.id).toEqual(789);
* </pre>
*
* The object returned from this function execution is a resource "class" which has "static" method
* for each action in the definition.
*
* Calling these methods invoke `$http` on the `url` template with the given `method` and `params`.
* When the data is returned from the server then the object is an instance of the resource type and
* all of the non-GET methods are available with `$` prefix. This allows you to easily support CRUD
* operations (create, read, update, delete) on server-side data.
<pre>
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
</pre>
*
* It's worth noting that the success callback for `get`, `query` and other method gets passed
* in the response that came from the server as well as $http header getter function, so one
* could rewrite the above example and get access to http headers as:
*
<pre>
var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u, getResponseHeaders){
u.abc = true;
u.$save(function(u, putResponseHeaders) {
//u => saved user object
//putResponseHeaders => $http header getter
});
});
</pre>
* # Buzz client
Let's look at what a buzz client created with the `$resource` service looks like:
<doc:example>
<doc:source jsfiddle="false">
<script>
function BuzzController($resource) {
this.userId = 'googlebuzz';
this.Activity = $resource(
'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments',
{alt:'json', callback:'JSON_CALLBACK'},
{get:{method:'JSONP', params:{visibility:'@self'}}, replies: {method:'JSONP', params:{visibility:'@self', comments:'@comments'}}}
);
}
BuzzController.prototype = {
fetch: function() {
this.activities = this.Activity.get({userId:this.userId});
},
expandReplies: function(activity) {
activity.replies = this.Activity.replies({userId:this.userId, activityId:activity.id});
}
};
BuzzController.$inject = ['$resource'];
</script>
<div ng-controller="BuzzController">
<input ng-model="userId"/>
<button ng-click="fetch()">fetch</button>
<hr/>
<div ng-repeat="item in activities.data.items">
<h1 style="font-size: 15px;">
<img src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
<a href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
<a href ng-click="expandReplies(item)" style="float: right;">Expand replies: {{item.links.replies[0].count}}</a>
</h1>
{{item.object.content | html}}
<div ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;">
<img src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
<a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>: {{reply.content | html}}
</div>
</div>
</div>
</doc:source>
<doc:scenario>
</doc:scenario>
</doc:example>
*/
angular.module('ngResource', ['ng']).
factory('$resource', ['$http', '$parse', function($http, $parse) {
var DEFAULT_ACTIONS = {
'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
};
var noop = angular.noop,
forEach = angular.forEach,
extend = angular.extend,
copy = angular.copy,
isFunction = angular.isFunction,
getter = function(obj, path) {
return $parse(path)(obj);
};
/**
* We need our custom mehtod because encodeURIComponent is too agressive and doesn't follow
* http://www.ietf.org/rfc/rfc3986.txt with regards to the character set (pchar) allowed in path
* segments:
* segment = *pchar
* pchar = unreserved / pct-encoded / sub-delims / ":" / "@"
* pct-encoded = "%" HEXDIG HEXDIG
* unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"
* sub-delims = "!" / "$" / "&" / "'" / "(" / ")"
* / "*" / "+" / "," / ";" / "="
*/
function encodeUriSegment(val) {
return encodeUriQuery(val, true).
replace(/%26/gi, '&').
replace(/%3D/gi, '=').
replace(/%2B/gi, '+');
}
/**
* This method is intended for encoding *key* or *value* parts of query component. We need a custom
* method becuase encodeURIComponent is too agressive and encodes stuff that doesn't have to be
* encoded per http://tools.ietf.org/html/rfc3986:
* query = *( pchar / "/" / "?" )
* pchar = unreserved / pct-encoded / sub-delims / ":" / "@"
* unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"
* pct-encoded = "%" HEXDIG HEXDIG
* sub-delims = "!" / "$" / "&" / "'" / "(" / ")"
* / "*" / "+" / "," / ";" / "="
*/
function encodeUriQuery(val, pctEncodeSpaces) {
return encodeURIComponent(val).
replace(/%40/gi, '@').
replace(/%3A/gi, ':').
replace(/%24/g, '$').
replace(/%2C/gi, ',').
replace((pctEncodeSpaces ? null : /%20/g), '+');
}
function Route(template, defaults) {
this.template = template = template + '#';
this.defaults = defaults || {};
var urlParams = this.urlParams = {};
forEach(template.split(/\W/), function(param){
if (param && template.match(new RegExp("[^\\\\]:" + param + "\\W"))) {
urlParams[param] = true;
}
});
this.template = template.replace(/\\:/g, ':');
}
Route.prototype = {
url: function(params) {
var self = this,
url = this.template,
encodedVal;
params = params || {};
forEach(this.urlParams, function(_, urlParam){
encodedVal = encodeUriSegment(params[urlParam] || self.defaults[urlParam] || "");
url = url.replace(new RegExp(":" + urlParam + "(\\W)"), encodedVal + "$1");
});
url = url.replace(/\/?#$/, '');
var query = [];
forEach(params, function(value, key){
if (!self.urlParams[key]) {
query.push(encodeUriQuery(key) + '=' + encodeUriQuery(value));
}
});
query.sort();
url = url.replace(/\/*$/, '');
return url + (query.length ? '?' + query.join('&') : '');
}
};
function ResourceFactory(url, paramDefaults, actions) {
var route = new Route(url);
actions = extend({}, DEFAULT_ACTIONS, actions);
function extractParams(data){
var ids = {};
forEach(paramDefaults || {}, function(value, key){
ids[key] = value.charAt && value.charAt(0) == '@' ? getter(data, value.substr(1)) : value;
});
return ids;
}
function Resource(value){
copy(value || {}, this);
}
forEach(actions, function(action, name) {
var hasBody = action.method == 'POST' || action.method == 'PUT' || action.method == 'PATCH';
Resource[name] = function(a1, a2, a3, a4) {
var params = {};
var data;
var success = noop;
var error = null;
switch(arguments.length) {
case 4:
error = a4;
success = a3;
//fallthrough
case 3:
case 2:
if (isFunction(a2)) {
if (isFunction(a1)) {
success = a1;
error = a2;
break;
}
success = a2;
error = a3;
//fallthrough
} else {
params = a1;
data = a2;
success = a3;
break;
}
case 1:
if (isFunction(a1)) success = a1;
else if (hasBody) data = a1;
else params = a1;
break;
case 0: break;
default:
throw "Expected between 0-4 arguments [params, data, success, error], got " +
arguments.length + " arguments.";
}
var value = this instanceof Resource ? this : (action.isArray ? [] : new Resource(data));
$http({
method: action.method,
url: route.url(extend({}, extractParams(data), action.params || {}, params)),
data: data
}).then(function(response) {
var data = response.data;
if (data) {
if (action.isArray) {
value.length = 0;
forEach(data, function(item) {
value.push(new Resource(item));
});
} else {
copy(data, value);
}
}
(success||noop)(value, response.headers);
}, error);
return value;
};
Resource.bind = function(additionalParamDefaults){
return ResourceFactory(url, extend({}, paramDefaults, additionalParamDefaults), actions);
};
Resource.prototype['$' + name] = function(a1, a2, a3) {
var params = extractParams(this),
success = noop,
error;
switch(arguments.length) {
case 3: params = a1; success = a2; error = a3; break;
case 2:
case 1:
if (isFunction(a1)) {
success = a1;
error = a2;
} else {
params = a1;
success = a2 || noop;
}
case 0: break;
default:
throw "Expected between 1-3 arguments [params, success, error], got " +
arguments.length + " arguments.";
}
var data = hasBody ? this : undefined;
Resource[name].call(this, params, data, success, error);
};
});
return Resource;
}
return ResourceFactory;
}]);
})(window, window.angular);
[
{
"id": "2",
"customer_name": "Customer 1",
"wordpress_user_id": "39",
"status": "1",
"industries": [
"10",
"12",
"3",
"8",
"25"
]
},
{
"id": "4",
"customer_name": "Customer 2",
"wordpress_user_id": "0",
"status": "0",
"industries": [
]
},
{
"id": "3",
"customer_name": "Customer 3",
"wordpress_user_id": "0",
"status": "1",
"industries": [
"13",
"6",
"15",
"26"
]
},
{
"id": "1",
"customer_name": "Customer 4",
"wordpress_user_id": "47",
"status": "1",
"industries": [
"1"
]
}
]
[
{
"id": "4",
"industry_name": "Bakeries",
"status": "0"
},
{
"id": "12",
"industry_name": "Boats",
"status": "1"
},
{
"id": "5",
"industry_name": "Construction",
"status": "1"
},
{
"id": "10",
"industry_name": "Canvas",
"status": "0"
},
{
"id": "9",
"industry_name": "Grass",
"status": "1"
},
{
"id": "3",
"industry_name": "Herring",
"status": "0"
},
{
"id": "8",
"industry_name": "Wood",
"status": "0"
},
{
"id": "1",
"industry_name": "ICT",
"status": "1"
},
{
"id": "7",
"industry_name": "Cheese",
"status": "0"
},
{
"id": "13",
"industry_name": "Aviation",
"status": "1"
},
{
"id": "11",
"industry_name": "Tents",
"status": "0"
},
{
"id": "2",
"industry_name": "Fish",
"status": "1"
},
{
"id": "6",
"industry_name": "Meat",
"status": "1"
}
]