Skip to content

T
todomvc
Commit 67072a72 authored by Pascal Hartig's avatar Pascal Hartig
Browse files
Options

AngularJS: Upgrade to 1.2.20

parent c8c70e41
Hide whitespace changes
Inline Side-by-side
Showing with 509 additions and 465 deletions
architecture-examples/angularjs/bower.json
View file @ 67072a72
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
"name": "todomvc-angular", "name": "todomvc-angular",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"angular": "1.2.19", "angular": "1.2.20",
"todomvc-common": "~0.1.4" "todomvc-common": "~0.1.4"
}, },
"devDependencies": { "devDependencies": {
"angular-mocks": "1.2.19", "angular-mocks": "1.2.20",
"angular-route": "1.2.19" "angular-route": "1.2.20"
} }
} }
architecture-examples/angularjs/bower_components/angular-route/angular-route.js
View file @ 67072a72
/** /**
* @license AngularJS v1.2.19 * @license AngularJS v1.2.20
* (c) 2010-2014 Google, Inc. http://angularjs.org * (c) 2010-2014 Google, Inc. http://angularjs.org
* License: MIT * License: MIT
*/ */
......
architecture-examples/angularjs/bower_components/angular/angular.js
View file @ 67072a72
/** /**
* @license AngularJS v1.2.19 * @license AngularJS v1.2.20
* (c) 2010-2014 Google, Inc. http://angularjs.org * (c) 2010-2014 Google, Inc. http://angularjs.org
* License: MIT * License: MIT
*/ */
...@@ -68,7 +68,7 @@ function minErr(module) { ...@@ -68,7 +68,7 @@ function minErr(module) {
return match; return match;
}); });
message = message + '\nhttp://errors.angularjs.org/1.2.19/' + message = message + '\nhttp://errors.angularjs.org/1.2.20/' +
(module ? module + '/' : '') + code; (module ? module + '/' : '') + code;
for (i = 2; i < arguments.length; i++) { for (i = 2; i < arguments.length; i++) {
message = message + (i == 2 ? '?' : '&') + 'p' + (i-2) + '=' + message = message + (i == 2 ? '?' : '&') + 'p' + (i-2) + '=' +
...@@ -810,9 +810,9 @@ function isLeafNode (node) { ...@@ -810,9 +810,9 @@ function isLeafNode (node) {
* @returns {*} The copy or updated `destination`, if `destination` was specified. * @returns {*} The copy or updated `destination`, if `destination` was specified.
* *
* @example * @example
<example> <example module="copyExample">
<file name="index.html"> <file name="index.html">
<div ng-controller="Controller"> <div ng-controller="ExampleController">
<form novalidate class="simple-form"> <form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br /> Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br /> E-mail: <input type="email" ng-model="user.email" /><br />
...@@ -826,21 +826,22 @@ function isLeafNode (node) { ...@@ -826,21 +826,22 @@ function isLeafNode (node) {
</div> </div>
<script> <script>
function Controller($scope) { angular.module('copyExample')
$scope.master= {}; .controller('ExampleController', ['$scope', function($scope) {
$scope.master= {};
$scope.update = function(user) { $scope.update = function(user) {
// Example with 1 argument // Example with 1 argument
$scope.master= angular.copy(user); $scope.master= angular.copy(user);
}; };
$scope.reset = function() { $scope.reset = function() {
// Example with 2 arguments // Example with 2 arguments
angular.copy($scope.master, $scope.user); angular.copy($scope.master, $scope.user);
}; };
$scope.reset(); $scope.reset();
} }]);
</script> </script>
</file> </file>
</example> </example>
...@@ -1184,7 +1185,7 @@ function parseKeyValue(/**string*/keyValue) { ...@@ -1184,7 +1185,7 @@ function parseKeyValue(/**string*/keyValue) {
key = tryDecodeURIComponent(key_value[0]); key = tryDecodeURIComponent(key_value[0]);
if ( isDefined(key) ) { if ( isDefined(key) ) {
var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true; var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
if (!obj[key]) { if (!hasOwnProperty.call(obj, key)) {
obj[key] = val; obj[key] = val;
} else if(isArray(obj[key])) { } else if(isArray(obj[key])) {
obj[key].push(val); obj[key].push(val);
...@@ -1958,11 +1959,11 @@ function setupModuleLoader(window) { ...@@ -1958,11 +1959,11 @@ function setupModuleLoader(window) {
* - `codeName` – `{string}` – Code name of the release, such as "jiggling-armfat". * - `codeName` – `{string}` – Code name of the release, such as "jiggling-armfat".
*/ */
var version = { var version = {
full: '1.2.19', // all of these placeholder strings will be replaced by grunt's full: '1.2.20', // all of these placeholder strings will be replaced by grunt's
major: 1, // package task major: 1, // package task
minor: 2, minor: 2,
dot: 19, dot: 20,
codeName: 'precognitive-flashbacks' codeName: 'accidental-beautification'
}; };
...@@ -5241,7 +5242,7 @@ function $TemplateCacheProvider() { ...@@ -5241,7 +5242,7 @@ function $TemplateCacheProvider() {
* local name. Given `<widget my-attr="count = count + value">` and widget definition of * local name. Given `<widget my-attr="count = count + value">` and widget definition of
* `scope: { localFn:'&myAttr' }`, then isolate scope property `localFn` will point to * `scope: { localFn:'&myAttr' }`, then isolate scope property `localFn` will point to
* a function wrapper for the `count = count + value` expression. Often it's desirable to * a function wrapper for the `count = count + value` expression. Often it's desirable to
* pass data from the isolated scope via an expression and to the parent scope, this can be * pass data from the isolated scope via an expression to the parent scope, this can be
* done by passing a map of local variable names and values into the expression wrapper fn. * done by passing a map of local variable names and values into the expression wrapper fn.
* For example, if the expression is `increment(amount)` then we can specify the amount value * For example, if the expression is `increment(amount)` then we can specify the amount value
* by calling the `localFn` as `localFn({amount: 22})`. * by calling the `localFn` as `localFn({amount: 22})`.
...@@ -5468,10 +5469,10 @@ function $TemplateCacheProvider() { ...@@ -5468,10 +5469,10 @@ function $TemplateCacheProvider() {
* to illustrate how `$compile` works. * to illustrate how `$compile` works.
* </div> * </div>
* *
<example module="compile"> <example module="compileExample">
<file name="index.html"> <file name="index.html">
<script> <script>
angular.module('compile', [], function($compileProvider) { angular.module('compileExample', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive // configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile' // factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) { $compileProvider.directive('compile', function($compile) {
...@@ -5495,15 +5496,14 @@ function $TemplateCacheProvider() { ...@@ -5495,15 +5496,14 @@ function $TemplateCacheProvider() {
} }
); );
}; };
}) });
}); })
.controller('GreeterController', ['$scope', function($scope) {
function Ctrl($scope) {
$scope.name = 'Angular'; $scope.name = 'Angular';
$scope.html = 'Hello {{name}}'; $scope.html = 'Hello {{name}}';
} }]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="GreeterController">
<input ng-model="name"> <br> <input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br> <textarea ng-model="html"></textarea> <br>
<div compile="html"></div> <div compile="html"></div>
...@@ -7239,18 +7239,19 @@ function $ControllerProvider() { ...@@ -7239,18 +7239,19 @@ function $ControllerProvider() {
* A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` object. * A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` object.
* *
* @example * @example
<example> <example module="documentExample">
<file name="index.html"> <file name="index.html">
<div ng-controller="MainCtrl"> <div ng-controller="ExampleController">
<p>$document title: <b ng-bind="title"></b></p> <p>$document title: <b ng-bind="title"></b></p>
<p>window.document title: <b ng-bind="windowTitle"></b></p> <p>window.document title: <b ng-bind="windowTitle"></b></p>
</div> </div>
</file> </file>
<file name="script.js"> <file name="script.js">
function MainCtrl($scope, $document) { angular.module('documentExample', [])
$scope.title = $document[0].title; .controller('ExampleController', ['$scope', '$document', function($scope, $document) {
$scope.windowTitle = angular.element(window.document)[0].title; $scope.title = $document[0].title;
} $scope.windowTitle = angular.element(window.document)[0].title;
}]);
</file> </file>
</example> </example>
*/ */
...@@ -7383,12 +7384,39 @@ function isSuccess(status) { ...@@ -7383,12 +7384,39 @@ function isSuccess(status) {
} }
/**
* @ngdoc provider
* @name $httpProvider
* @description
* Use `$httpProvider` to change the default behavior of the {@link ng.$http $http} service.
* */
function $HttpProvider() { function $HttpProvider() {
var JSON_START = /^\s*(\[|\{[^\{])/, var JSON_START = /^\s*(\[|\{[^\{])/,
JSON_END = /[\}\]]\s*$/, JSON_END = /[\}\]]\s*$/,
PROTECTION_PREFIX = /^\)\]\}',?\n/, PROTECTION_PREFIX = /^\)\]\}',?\n/,
CONTENT_TYPE_APPLICATION_JSON = {'Content-Type': 'application/json;charset=utf-8'}; CONTENT_TYPE_APPLICATION_JSON = {'Content-Type': 'application/json;charset=utf-8'};
/**
* @ngdoc property
* @name $httpProvider#defaults
* @description
*
* Object containing default values for all {@link ng.$http $http} requests.
*
* - **`defaults.xsrfCookieName`** - {string} - Name of cookie containing the XSRF token.
* Defaults value is `'XSRF-TOKEN'`.
*
* - **`defaults.xsrfHeaderName`** - {string} - Name of HTTP header to populate with the
* XSRF token. Defaults value is `'X-XSRF-TOKEN'`.
*
* - **`defaults.headers`** - {Object} - Default headers for all $http requests.
* Refer to {@link ng.$http#setting-http-headers $http} for documentation on
* setting default headers.
* - **`defaults.headers.common`**
* - **`defaults.headers.post`**
* - **`defaults.headers.put`**
* - **`defaults.headers.patch`**
**/
var defaults = this.defaults = { var defaults = this.defaults = {
// transform incoming response data // transform incoming response data
transformResponse: [function(data) { transformResponse: [function(data) {
...@@ -7878,9 +7906,9 @@ function $HttpProvider() { ...@@ -7878,9 +7906,9 @@ function $HttpProvider() {
* *
* *
* @example * @example
<example> <example module="httpExample">
<file name="index.html"> <file name="index.html">
<div ng-controller="FetchCtrl"> <div ng-controller="FetchController">
<select ng-model="method"> <select ng-model="method">
<option>GET</option> <option>GET</option>
<option>JSONP</option> <option>JSONP</option>
...@@ -7902,30 +7930,32 @@ function $HttpProvider() { ...@@ -7902,30 +7930,32 @@ function $HttpProvider() {
</div> </div>
</file> </file>
<file name="script.js"> <file name="script.js">
function FetchCtrl($scope, $http, $templateCache) { angular.module('httpExample', [])
$scope.method = 'GET'; .controller('FetchController', ['$scope', '$http', '$templateCache',
$scope.url = 'http-hello.html'; function($scope, $http, $templateCache) {
$scope.method = 'GET';
$scope.fetch = function() { $scope.url = 'http-hello.html';
$scope.code = null;
$scope.response = null; $scope.fetch = function() {
$scope.code = null;
$http({method: $scope.method, url: $scope.url, cache: $templateCache}). $scope.response = null;
success(function(data, status) {
$scope.status = status; $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
$scope.data = data; success(function(data, status) {
}). $scope.status = status;
error(function(data, status) { $scope.data = data;
$scope.data = data || "Request failed"; }).
$scope.status = status; error(function(data, status) {
}); $scope.data = data || "Request failed";
}; $scope.status = status;
});
};
$scope.updateModel = function(method, url) { $scope.updateModel = function(method, url) {
$scope.method = method; $scope.method = method;
$scope.url = url; $scope.url = url;
}; };
} }]);
</file> </file>
<file name="http-hello.html"> <file name="http-hello.html">
Hello, $http! Hello, $http!
...@@ -7979,7 +8009,7 @@ function $HttpProvider() { ...@@ -7979,7 +8009,7 @@ function $HttpProvider() {
var reqData = transformData(config.data, headersGetter(headers), config.transformRequest); var reqData = transformData(config.data, headersGetter(headers), config.transformRequest);
// strip content-type if data is undefined // strip content-type if data is undefined
if (isUndefined(config.data)) { if (isUndefined(reqData)) {
forEach(headers, function(value, header) { forEach(headers, function(value, header) {
if (lowercase(header) === 'content-type') { if (lowercase(header) === 'content-type') {
delete headers[header]; delete headers[header];
...@@ -8048,10 +8078,6 @@ function $HttpProvider() { ...@@ -8048,10 +8078,6 @@ function $HttpProvider() {
defHeaders = extend({}, defHeaders.common, defHeaders[lowercase(config.method)]); defHeaders = extend({}, defHeaders.common, defHeaders[lowercase(config.method)]);
// execute if header value is function
execHeaders(defHeaders);
execHeaders(reqHeaders);
// using for-in instead of forEach to avoid unecessary iteration after header has been found // using for-in instead of forEach to avoid unecessary iteration after header has been found
defaultHeadersIteration: defaultHeadersIteration:
for (defHeaderName in defHeaders) { for (defHeaderName in defHeaders) {
...@@ -8066,6 +8092,8 @@ function $HttpProvider() { ...@@ -8066,6 +8092,8 @@ function $HttpProvider() {
reqHeaders[defHeaderName] = defHeaders[defHeaderName]; reqHeaders[defHeaderName] = defHeaders[defHeaderName];
} }
// execute if header value is a function for merged headers
execHeaders(reqHeaders);
return reqHeaders; return reqHeaders;
function execHeaders(headers) { function execHeaders(headers) {
...@@ -8841,25 +8869,27 @@ function $IntervalProvider() { ...@@ -8841,25 +8869,27 @@ function $IntervalProvider() {
* @returns {promise} A promise which will be notified on each iteration. * @returns {promise} A promise which will be notified on each iteration.
* *
* @example * @example
* <example module="time"> * <example module="intervalExample">
* <file name="index.html"> * <file name="index.html">
* <script> * <script>
* function Ctrl2($scope,$interval) { * angular.module('intervalExample', [])
* $scope.format = 'M/d/yy h:mm:ss a'; * .controller('ExampleController', ['$scope', '$interval',
* $scope.blood_1 = 100; * function($scope, $interval) {
* $scope.blood_2 = 120; * $scope.format = 'M/d/yy h:mm:ss a';
* $scope.blood_1 = 100;
* $scope.blood_2 = 120;
* *
* var stop; * var stop;
* $scope.fight = function() { * $scope.fight = function() {
* // Don't start a new fight if we are already fighting * // Don't start a new fight if we are already fighting
* if ( angular.isDefined(stop) ) return; * if ( angular.isDefined(stop) ) return;
* *
* stop = $interval(function() { * stop = $interval(function() {
* if ($scope.blood_1 > 0 && $scope.blood_2 > 0) { * if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
* $scope.blood_1 = $scope.blood_1 - 3; * $scope.blood_1 = $scope.blood_1 - 3;
* $scope.blood_2 = $scope.blood_2 - 4; * $scope.blood_2 = $scope.blood_2 - 4;
* } else { * } else {
* $scope.stopFight(); * $scope.stopFight();
* } * }
* }, 100); * }, 100);
* }; * };
...@@ -8874,22 +8904,21 @@ function $IntervalProvider() { ...@@ -8874,22 +8904,21 @@ function $IntervalProvider() {
* $scope.resetFight = function() { * $scope.resetFight = function() {
* $scope.blood_1 = 100; * $scope.blood_1 = 100;
* $scope.blood_2 = 120; * $scope.blood_2 = 120;
* } * };
* *
* $scope.$on('$destroy', function() { * $scope.$on('$destroy', function() {
* // Make sure that the interval is destroyed too * // Make sure that the interval nis destroyed too
* $scope.stopFight(); * $scope.stopFight();
* }); * });
* } * })
* * // Register the 'myCurrentTime' directive factory method.
* angular.module('time', []) * // We inject $interval and dateFilter service since the factory method is DI.
* // Register the 'myCurrentTime' directive factory method. * .directive('myCurrentTime', ['$interval', 'dateFilter',
* // We inject $interval and dateFilter service since the factory method is DI. * function($interval, dateFilter) {
* .directive('myCurrentTime', function($interval, dateFilter) {
* // return the directive link function. (compile function not needed) * // return the directive link function. (compile function not needed)
* return function(scope, element, attrs) { * return function(scope, element, attrs) {
* var format, // date format * var format, // date format
* stopTime; // so that we can cancel the time updates * stopTime; // so that we can cancel the time updates
* *
* // used to update the UI * // used to update the UI
* function updateTime() { * function updateTime() {
...@@ -8905,28 +8934,28 @@ function $IntervalProvider() { ...@@ -8905,28 +8934,28 @@ function $IntervalProvider() {
* stopTime = $interval(updateTime, 1000); * stopTime = $interval(updateTime, 1000);
* *
* // listen on DOM destroy (removal) event, and cancel the next UI update * // listen on DOM destroy (removal) event, and cancel the next UI update
* // to prevent updating time ofter the DOM element was removed. * // to prevent updating time after the DOM element was removed.
* element.bind('$destroy', function() { * element.bind('$destroy', function() {
* $interval.cancel(stopTime); * $interval.cancel(stopTime);
* }); * });
* } * }
* }); * });
* </script> * </script>
* *
* <div> * <div>
* <div ng-controller="Ctrl2"> * <div ng-controller="ExampleController">
* Date format: <input ng-model="format"> <hr/> * Date format: <input ng-model="format"> <hr/>
* Current time is: <span my-current-time="format"></span> * Current time is: <span my-current-time="format"></span>
* <hr/> * <hr/>
* Blood 1 : <font color='red'>{{blood_1}}</font> * Blood 1 : <font color='red'>{{blood_1}}</font>
* Blood 2 : <font color='red'>{{blood_2}}</font> * Blood 2 : <font color='red'>{{blood_2}}</font>
* <button type="button" data-ng-click="fight()">Fight</button> * <button type="button" data-ng-click="fight()">Fight</button>
* <button type="button" data-ng-click="stopFight()">StopFight</button> * <button type="button" data-ng-click="stopFight()">StopFight</button>
* <button type="button" data-ng-click="resetFight()">resetFight</button> * <button type="button" data-ng-click="resetFight()">resetFight</button>
* </div>
* </div> * </div>
* </div>
* *
* </file> * </file>
* </example> * </example>
*/ */
function interval(fn, delay, count, invokeApply) { function interval(fn, delay, count, invokeApply) {
...@@ -9483,14 +9512,17 @@ LocationHashbangInHtml5Url.prototype = ...@@ -9483,14 +9512,17 @@ LocationHashbangInHtml5Url.prototype =
* If the argument is a hash object containing an array of values, these values will be encoded * If the argument is a hash object containing an array of values, these values will be encoded
* as duplicate search parameters in the url. * as duplicate search parameters in the url.
* *
* @param {(string|Array<string>)=} paramValue If `search` is a string, then `paramValue` will * @param {(string|Array<string>|boolean)=} paramValue If `search` is a string, then `paramValue`
* override only a single search property. * will override only a single search property.
* *
* If `paramValue` is an array, it will override the property of the `search` component of * If `paramValue` is an array, it will override the property of the `search` component of
* `$location` specified via the first argument. * `$location` specified via the first argument.
* *
* If `paramValue` is `null`, the property specified via the first argument will be deleted. * If `paramValue` is `null`, the property specified via the first argument will be deleted.
* *
* If `paramValue` is `true`, the property specified via the first argument will be added with no
* value nor trailing equal sign.
*
* @return {Object} If called with no arguments returns the parsed `search` object. If called with * @return {Object} If called with no arguments returns the parsed `search` object. If called with
* one or more arguments returns `$location` object itself. * one or more arguments returns `$location` object itself.
*/ */
...@@ -9502,6 +9534,11 @@ LocationHashbangInHtml5Url.prototype = ...@@ -9502,6 +9534,11 @@ LocationHashbangInHtml5Url.prototype =
if (isString(search)) { if (isString(search)) {
this.$$search = parseKeyValue(search); this.$$search = parseKeyValue(search);
} else if (isObject(search)) { } else if (isObject(search)) {
// remove object undefined or null properties
forEach(search, function(value, key) {
if (value == null) delete search[key];
});
this.$$search = search; this.$$search = search;
} else { } else {
throw $locationMinErr('isrcharg', throw $locationMinErr('isrcharg',
...@@ -9823,15 +9860,16 @@ function $LocationProvider(){ ...@@ -9823,15 +9860,16 @@ function $LocationProvider(){
* {@link ng.$logProvider ng.$logProvider#debugEnabled} to change this. * {@link ng.$logProvider ng.$logProvider#debugEnabled} to change this.
* *
* @example * @example
<example> <example module="logExample">
<file name="script.js"> <file name="script.js">
function LogCtrl($scope, $log) { angular.module('logExample', [])
$scope.$log = $log; .controller('LogController', ['$scope', '$log', function($scope, $log) {
$scope.message = 'Hello World!'; $scope.$log = $log;
} $scope.message = 'Hello World!';
}]);
</file> </file>
<file name="index.html"> <file name="index.html">
<div ng-controller="LogCtrl"> <div ng-controller="LogController">
<p>Reload this page with open console, enter text and hit the log button...</p> <p>Reload this page with open console, enter text and hit the log button...</p>
Message: Message:
<input type="text" ng-model="message"/> <input type="text" ng-model="message"/>
...@@ -9855,7 +9893,7 @@ function $LogProvider(){ ...@@ -9855,7 +9893,7 @@ function $LogProvider(){
self = this; self = this;
/** /**
* @ngdoc property * @ngdoc method
* @name $logProvider#debugEnabled * @name $logProvider#debugEnabled
* @description * @description
* @param {boolean=} flag enable or disable debug level messages * @param {boolean=} flag enable or disable debug level messages
...@@ -10954,26 +10992,6 @@ function cspSafeGetterFn(key0, key1, key2, key3, key4, fullExp, options) { ...@@ -10954,26 +10992,6 @@ function cspSafeGetterFn(key0, key1, key2, key3, key4, fullExp, options) {
}; };
} }
function simpleGetterFn1(key0, fullExp) {
ensureSafeMemberName(key0, fullExp);
return function simpleGetterFn1(scope, locals) {
if (scope == null) return undefined;
return ((locals && locals.hasOwnProperty(key0)) ? locals : scope)[key0];
};
}
function simpleGetterFn2(key0, key1, fullExp) {
ensureSafeMemberName(key0, fullExp);
ensureSafeMemberName(key1, fullExp);
return function simpleGetterFn2(scope, locals) {
if (scope == null) return undefined;
scope = ((locals && locals.hasOwnProperty(key0)) ? locals : scope)[key0];
return scope == null ? undefined : scope[key1];
};
}
function getterFn(path, options, fullExp) { function getterFn(path, options, fullExp) {
// Check whether the cache has this getter already. // Check whether the cache has this getter already.
// We can use hasOwnProperty directly on the cache because we ensure, // We can use hasOwnProperty directly on the cache because we ensure,
...@@ -10986,13 +11004,8 @@ function getterFn(path, options, fullExp) { ...@@ -10986,13 +11004,8 @@ function getterFn(path, options, fullExp) {
pathKeysLength = pathKeys.length, pathKeysLength = pathKeys.length,
fn; fn;
// When we have only 1 or 2 tokens, use optimized special case closures.
// http://jsperf.com/angularjs-parse-getter/6 // http://jsperf.com/angularjs-parse-getter/6
if (!options.unwrapPromises && pathKeysLength === 1) { if (options.csp) {
fn = simpleGetterFn1(pathKeys[0], fullExp);
} else if (!options.unwrapPromises && pathKeysLength === 2) {
fn = simpleGetterFn2(pathKeys[0], pathKeys[1], fullExp);
} else if (options.csp) {
if (pathKeysLength < 6) { if (pathKeysLength < 6) {
fn = cspSafeGetterFn(pathKeys[0], pathKeys[1], pathKeys[2], pathKeys[3], pathKeys[4], fullExp, fn = cspSafeGetterFn(pathKeys[0], pathKeys[1], pathKeys[2], pathKeys[3], pathKeys[4], fullExp,
options); options);
...@@ -13119,19 +13132,21 @@ function adjustMatchers(matchers) { ...@@ -13119,19 +13132,21 @@ function adjustMatchers(matchers) {
* *
* Here is what a secure configuration for this scenario might look like: * Here is what a secure configuration for this scenario might look like:
* *
* <pre class="prettyprint"> * ```
* angular.module('myApp', []).config(function($sceDelegateProvider) { * angular.module('myApp', []).config(function($sceDelegateProvider) {
* $sceDelegateProvider.resourceUrlWhitelist([ * $sceDelegateProvider.resourceUrlWhitelist([
* // Allow same origin resource loads. * // Allow same origin resource loads.
* 'self', * 'self',
* // Allow loading from our assets domain. Notice the difference between * and **. * // Allow loading from our assets domain. Notice the difference between * and **.
* 'http://srv*.assets.example.com/**']); * 'http://srv*.assets.example.com/**'
* * ]);
* // The blacklist overrides the whitelist so the open redirect here is blocked. *
* $sceDelegateProvider.resourceUrlBlacklist([ * // The blacklist overrides the whitelist so the open redirect here is blocked.
* 'http://myapp.example.com/clickThru**']); * $sceDelegateProvider.resourceUrlBlacklist([
* }); * 'http://myapp.example.com/clickThru**'
* </pre> * ]);
* });
* ```
*/ */
function $SceDelegateProvider() { function $SceDelegateProvider() {
...@@ -13426,10 +13441,10 @@ function $SceDelegateProvider() { ...@@ -13426,10 +13441,10 @@ function $SceDelegateProvider() {
* *
* Here's an example of a binding in a privileged context: * Here's an example of a binding in a privileged context:
* *
* <pre class="prettyprint"> * ```
* <input ng-model="userHtml"> * <input ng-model="userHtml">
* <div ng-bind-html="userHtml"> * <div ng-bind-html="userHtml"></div>
* </pre> * ```
* *
* Notice that `ng-bind-html` is bound to `userHtml` controlled by the user. With SCE * Notice that `ng-bind-html` is bound to `userHtml` controlled by the user. With SCE
* disabled, this application allows the user to render arbitrary HTML into the DIV. * disabled, this application allows the user to render arbitrary HTML into the DIV.
...@@ -13469,15 +13484,15 @@ function $SceDelegateProvider() { ...@@ -13469,15 +13484,15 @@ function $SceDelegateProvider() {
* ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly * ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly
* simplified): * simplified):
* *
* <pre class="prettyprint"> * ```
* var ngBindHtmlDirective = ['$sce', function($sce) { * var ngBindHtmlDirective = ['$sce', function($sce) {
* return function(scope, element, attr) { * return function(scope, element, attr) {
* scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) { * scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
* element.html(value || ''); * element.html(value || '');
* }); * });
* }; * };
* }]; * }];
* </pre> * ```
* *
* ## Impact on loading templates * ## Impact on loading templates
* *
...@@ -13581,66 +13596,65 @@ function $SceDelegateProvider() { ...@@ -13581,66 +13596,65 @@ function $SceDelegateProvider() {
* *
* ## Show me an example using SCE. * ## Show me an example using SCE.
* *
* @example * <example module="mySceApp" deps="angular-sanitize.js">
<example module="mySceApp" deps="angular-sanitize.js"> * <file name="index.html">
<file name="index.html"> * <div ng-controller="myAppController as myCtrl">
<div ng-controller="myAppController as myCtrl"> * <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br>
<i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br> * <b>User comments</b><br>
<b>User comments</b><br> * By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when * $sanitize is available. If $sanitize isn't available, this results in an error instead of an
$sanitize is available. If $sanitize isn't available, this results in an error instead of an * exploit.
exploit. * <div class="well">
<div class="well"> * <div ng-repeat="userComment in myCtrl.userComments">
<div ng-repeat="userComment in myCtrl.userComments"> * <b>{{userComment.name}}</b>:
<b>{{userComment.name}}</b>: * <span ng-bind-html="userComment.htmlComment" class="htmlComment"></span>
<span ng-bind-html="userComment.htmlComment" class="htmlComment"></span> * <br>
<br> * </div>
</div> * </div>
</div> * </div>
</div> * </file>
</file> *
* <file name="script.js">
<file name="script.js"> * var mySceApp = angular.module('mySceApp', ['ngSanitize']);
var mySceApp = angular.module('mySceApp', ['ngSanitize']); *
* mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) {
mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) { * var self = this;
var self = this; * $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
$http.get("test_data.json", {cache: $templateCache}).success(function(userComments) { * self.userComments = userComments;
self.userComments = userComments; * });
}); * self.explicitlyTrustedHtml = $sce.trustAsHtml(
self.explicitlyTrustedHtml = $sce.trustAsHtml( * '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
'<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' + * 'sanitization.&quot;">Hover over this text.</span>');
'sanitization.&quot;">Hover over this text.</span>'); * });
}); * </file>
</file> *
* <file name="test_data.json">
<file name="test_data.json"> * [
[ * { "name": "Alice",
{ "name": "Alice", * "htmlComment":
"htmlComment": * "<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>"
"<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>" * },
}, * { "name": "Bob",
{ "name": "Bob", * "htmlComment": "<i>Yes!</i> Am I the only other one?"
"htmlComment": "<i>Yes!</i> Am I the only other one?" * }
} * ]
] * </file>
</file> *
* <file name="protractor.js" type="protractor">
<file name="protractor.js" type="protractor"> * describe('SCE doc demo', function() {
describe('SCE doc demo', function() { * it('should sanitize untrusted values', function() {
it('should sanitize untrusted values', function() { * expect(element.all(by.css('.htmlComment')).first().getInnerHtml())
expect(element(by.css('.htmlComment')).getInnerHtml()) * .toBe('<span>Is <i>anyone</i> reading this?</span>');
.toBe('<span>Is <i>anyone</i> reading this?</span>'); * });
}); *
* it('should NOT sanitize explicitly trusted values', function() {
it('should NOT sanitize explicitly trusted values', function() { * expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe(
expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe( * '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
'<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' + * 'sanitization.&quot;">Hover over this text.</span>');
'sanitization.&quot;">Hover over this text.</span>'); * });
}); * });
}); * </file>
</file> * </example>
</example>
* *
* *
* *
...@@ -13654,13 +13668,13 @@ function $SceDelegateProvider() { ...@@ -13654,13 +13668,13 @@ function $SceDelegateProvider() {
* *
* That said, here's how you can completely disable SCE: * That said, here's how you can completely disable SCE:
* *
* <pre class="prettyprint"> * ```
* angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { * angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
* // Completely disable SCE. For demonstration purposes only! * // Completely disable SCE. For demonstration purposes only!
* // Do not use in new projects. * // Do not use in new projects.
* $sceProvider.enabled(false); * $sceProvider.enabled(false);
* }); * });
* </pre> * ```
* *
*/ */
/* jshint maxlen: 100 */ /* jshint maxlen: 100 */
...@@ -14357,17 +14371,18 @@ function urlIsSameOrigin(requestUrl) { ...@@ -14357,17 +14371,18 @@ function urlIsSameOrigin(requestUrl) {
* expression. * expression.
* *
* @example * @example
<example> <example module="windowExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope, $window) { angular.module('windowExample', [])
$scope.greeting = 'Hello, World!'; .controller('ExampleController', ['$scope', '$window', function ($scope, $window) {
$scope.doGreeting = function(greeting) { $scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert(greeting); $window.alert(greeting);
}; };
} }]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<input type="text" ng-model="greeting" /> <input type="text" ng-model="greeting" />
<button ng-click="doGreeting(greeting)">ALERT</button> <button ng-click="doGreeting(greeting)">ALERT</button>
</div> </div>
...@@ -14766,14 +14781,15 @@ function filterFilter() { ...@@ -14766,14 +14781,15 @@ function filterFilter() {
* *
* *
* @example * @example
<example> <example module="currencyExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('currencyExample', [])
$scope.amount = 1234.56; .controller('ExampleController', ['$scope', function($scope) {
} $scope.amount = 1234.56;
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<input type="number" ng-model="amount"> <br> <input type="number" ng-model="amount"> <br>
default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br> default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span> custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span>
...@@ -14825,14 +14841,15 @@ function currencyFilter($locale) { ...@@ -14825,14 +14841,15 @@ function currencyFilter($locale) {
* @returns {string} Number rounded to decimalPlaces and places a “,” after each third digit. * @returns {string} Number rounded to decimalPlaces and places a “,” after each third digit.
* *
* @example * @example
<example> <example module="numberFilterExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('numberFilterExample', [])
$scope.val = 1234.56789; .controller('ExampleController', ['$scope', function($scope) {
} $scope.val = 1234.56789;
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
Enter number: <input ng-model='val'><br> Enter number: <input ng-model='val'><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br> Default formatting: <span id='number-default'>{{val | number}}</span><br>
No fractions: <span>{{val | number:0}}</span><br> No fractions: <span>{{val | number:0}}</span><br>
...@@ -15256,17 +15273,18 @@ var uppercaseFilter = valueFn(uppercase); ...@@ -15256,17 +15273,18 @@ var uppercaseFilter = valueFn(uppercase);
* had less than `limit` elements. * had less than `limit` elements.
* *
* @example * @example
<example> <example module="limitToExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('limitToExample', [])
$scope.numbers = [1,2,3,4,5,6,7,8,9]; .controller('ExampleController', ['$scope', function($scope) {
$scope.letters = "abcdefghi"; $scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.numLimit = 3; $scope.letters = "abcdefghi";
$scope.letterLimit = 3; $scope.numLimit = 3;
} $scope.letterLimit = 3;
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
Limit {{numbers}} to: <input type="integer" ng-model="numLimit"> Limit {{numbers}} to: <input type="integer" ng-model="numLimit">
<p>Output numbers: {{ numbers | limitTo:numLimit }}</p> <p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
Limit {{letters}} to: <input type="integer" ng-model="letterLimit"> Limit {{letters}} to: <input type="integer" ng-model="letterLimit">
...@@ -15378,20 +15396,21 @@ function limitToFilter(){ ...@@ -15378,20 +15396,21 @@ function limitToFilter(){
* @returns {Array} Sorted copy of the source array. * @returns {Array} Sorted copy of the source array.
* *
* @example * @example
<example> <example module="orderByExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('orderByExample', [])
$scope.friends = .controller('ExampleController', ['$scope', function($scope) {
[{name:'John', phone:'555-1212', age:10}, $scope.friends =
{name:'Mary', phone:'555-9876', age:19}, [{name:'John', phone:'555-1212', age:10},
{name:'Mike', phone:'555-4321', age:21}, {name:'Mary', phone:'555-9876', age:19},
{name:'Adam', phone:'555-5678', age:35}, {name:'Mike', phone:'555-4321', age:21},
{name:'Julie', phone:'555-8765', age:29}] {name:'Adam', phone:'555-5678', age:35},
$scope.predicate = '-age'; {name:'Julie', phone:'555-8765', age:29}];
} $scope.predicate = '-age';
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
<hr/> <hr/>
[ <a href="" ng-click="predicate=''">unsorted</a> ] [ <a href="" ng-click="predicate=''">unsorted</a> ]
...@@ -15419,7 +15438,7 @@ function limitToFilter(){ ...@@ -15419,7 +15438,7 @@ function limitToFilter(){
* Example: * Example:
* *
* @example * @example
<example> <example module="orderByExample">
<file name="index.html"> <file name="index.html">
<div ng-controller="Ctrl"> <div ng-controller="Ctrl">
<table class="friend"> <table class="friend">
...@@ -15439,21 +15458,21 @@ function limitToFilter(){ ...@@ -15439,21 +15458,21 @@ function limitToFilter(){
</file> </file>
<file name="script.js"> <file name="script.js">
function Ctrl($scope, $filter) { angular.module('orderByExample', [])
var orderBy = $filter('orderBy'); .controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
$scope.friends = [ var orderBy = $filter('orderBy');
{ name: 'John', phone: '555-1212', age: 10 }, $scope.friends = [
{ name: 'Mary', phone: '555-9876', age: 19 }, { name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mike', phone: '555-4321', age: 21 }, { name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Adam', phone: '555-5678', age: 35 }, { name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Julie', phone: '555-8765', age: 29 } { name: 'Adam', phone: '555-5678', age: 35 },
]; { name: 'Julie', phone: '555-8765', age: 29 }
];
$scope.order = function(predicate, reverse) { $scope.order = function(predicate, reverse) {
$scope.friends = orderBy($scope.friends, predicate, reverse); $scope.friends = orderBy($scope.friends, predicate, reverse);
}; };
$scope.order('-age',false); $scope.order('-age',false);
} }]);
</file> </file>
</example> </example>
*/ */
...@@ -15639,7 +15658,7 @@ var htmlAnchorDirective = valueFn({ ...@@ -15639,7 +15658,7 @@ var htmlAnchorDirective = valueFn({
return browser.driver.getCurrentUrl().then(function(url) { return browser.driver.getCurrentUrl().then(function(url) {
return url.match(/\/123$/); return url.match(/\/123$/);
}); });
}, 1000, 'page should navigate to /123'); }, 5000, 'page should navigate to /123');
}); });
xit('should execute ng-click but not reload when href empty string and name specified', function() { xit('should execute ng-click but not reload when href empty string and name specified', function() {
...@@ -15667,7 +15686,7 @@ var htmlAnchorDirective = valueFn({ ...@@ -15667,7 +15686,7 @@ var htmlAnchorDirective = valueFn({
return browser.driver.getCurrentUrl().then(function(url) { return browser.driver.getCurrentUrl().then(function(url) {
return url.match(/\/6$/); return url.match(/\/6$/);
}); });
}, 1000, 'page should navigate to /6'); }, 5000, 'page should navigate to /6');
}); });
</file> </file>
</example> </example>
...@@ -16283,12 +16302,13 @@ function FormController(element, attrs, $scope, $animate) { ...@@ -16283,12 +16302,13 @@ function FormController(element, attrs, $scope, $animate) {
* </pre> * </pre>
* *
* @example * @example
<example deps="angular-animate.js" animations="true" fixBase="true"> <example deps="angular-animate.js" animations="true" fixBase="true" module="formExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('formExample', [])
$scope.userType = 'guest'; .controller('FormController', ['$scope', function($scope) {
} $scope.userType = 'guest';
}]);
</script> </script>
<style> <style>
.my-form { .my-form {
...@@ -16300,7 +16320,7 @@ function FormController(element, attrs, $scope, $animate) { ...@@ -16300,7 +16320,7 @@ function FormController(element, attrs, $scope, $animate) {
background: red; background: red;
} }
</style> </style>
<form name="myForm" ng-controller="Ctrl" class="my-form"> <form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required> userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br> <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<tt>userType = {{userType}}</tt><br> <tt>userType = {{userType}}</tt><br>
...@@ -16403,7 +16423,7 @@ var ngFormDirective = formDirectiveFactory(true); ...@@ -16403,7 +16423,7 @@ var ngFormDirective = formDirectiveFactory(true);
*/ */
var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/; var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i; var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/; var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
var inputType = { var inputType = {
...@@ -16433,15 +16453,16 @@ var inputType = { ...@@ -16433,15 +16453,16 @@ var inputType = {
* @param {boolean=} [ngTrim=true] If set to false Angular will not automatically trim the input. * @param {boolean=} [ngTrim=true] If set to false Angular will not automatically trim the input.
* *
* @example * @example
<example name="text-input-directive"> <example name="text-input-directive" module="textInputExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('textInputExample', [])
$scope.text = 'guest'; .controller('ExampleController', ['$scope', function($scope) {
$scope.word = /^\s*\w*\s*$/; $scope.text = 'guest';
} $scope.word = /^\s*\w*\s*$/;
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
Single word: <input type="text" name="input" ng-model="text" Single word: <input type="text" name="input" ng-model="text"
ng-pattern="word" required ng-trim="false"> ng-pattern="word" required ng-trim="false">
<span class="error" ng-show="myForm.input.$error.required"> <span class="error" ng-show="myForm.input.$error.required">
...@@ -16513,14 +16534,15 @@ var inputType = { ...@@ -16513,14 +16534,15 @@ var inputType = {
* interaction with the input element. * interaction with the input element.
* *
* @example * @example
<example name="number-input-directive"> <example name="number-input-directive" module="numberExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('numberExample', [])
$scope.value = 12; .controller('ExampleController', ['$scope', function($scope) {
} $scope.value = 12;
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
Number: <input type="number" name="input" ng-model="value" Number: <input type="number" name="input" ng-model="value"
min="0" max="99" required> min="0" max="99" required>
<span class="error" ng-show="myForm.input.$error.required"> <span class="error" ng-show="myForm.input.$error.required">
...@@ -16588,14 +16610,15 @@ var inputType = { ...@@ -16588,14 +16610,15 @@ var inputType = {
* interaction with the input element. * interaction with the input element.
* *
* @example * @example
<example name="url-input-directive"> <example name="url-input-directive" module="urlExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('urlExample', [])
$scope.text = 'http://google.com'; .controller('ExampleController', ['$scope', function($scope) {
} $scope.text = 'http://google.com';
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
URL: <input type="url" name="input" ng-model="text" required> URL: <input type="url" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.$error.required"> <span class="error" ng-show="myForm.input.$error.required">
Required!</span> Required!</span>
...@@ -16664,14 +16687,15 @@ var inputType = { ...@@ -16664,14 +16687,15 @@ var inputType = {
* interaction with the input element. * interaction with the input element.
* *
* @example * @example
<example name="email-input-directive"> <example name="email-input-directive" module="emailExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('emailExample', [])
$scope.text = 'me@example.com'; .controller('ExampleController', ['$scope', function($scope) {
} $scope.text = 'me@example.com';
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
Email: <input type="email" name="input" ng-model="text" required> Email: <input type="email" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.$error.required"> <span class="error" ng-show="myForm.input.$error.required">
Required!</span> Required!</span>
...@@ -16730,18 +16754,19 @@ var inputType = { ...@@ -16730,18 +16754,19 @@ var inputType = {
* be set when selected. * be set when selected.
* *
* @example * @example
<example name="radio-input-directive"> <example name="radio-input-directive" module="radioExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('radioExample', [])
$scope.color = 'blue'; .controller('ExampleController', ['$scope', function($scope) {
$scope.specialValue = { $scope.color = 'blue';
"id": "12345", $scope.specialValue = {
"value": "green" "id": "12345",
}; "value": "green"
} };
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="color" value="red"> Red <br/> <input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/> <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/> <input type="radio" ng-model="color" value="blue"> Blue <br/>
...@@ -16780,15 +16805,16 @@ var inputType = { ...@@ -16780,15 +16805,16 @@ var inputType = {
* interaction with the input element. * interaction with the input element.
* *
* @example * @example
<example name="checkbox-input-directive"> <example name="checkbox-input-directive" module="checkboxExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('checkboxExample', [])
$scope.value1 = true; .controller('ExampleController', ['$scope', function($scope) {
$scope.value2 = 'YES' $scope.value1 = true;
} $scope.value2 = 'YES'
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
Value1: <input type="checkbox" ng-model="value1"> <br/> Value1: <input type="checkbox" ng-model="value1"> <br/>
Value2: <input type="checkbox" ng-model="value2" Value2: <input type="checkbox" ng-model="value2"
ng-true-value="YES" ng-false-value="NO"> <br/> ng-true-value="YES" ng-false-value="NO"> <br/>
...@@ -17188,14 +17214,15 @@ function checkboxInputType(scope, element, attr, ctrl) { ...@@ -17188,14 +17214,15 @@ function checkboxInputType(scope, element, attr, ctrl) {
* interaction with the input element. * interaction with the input element.
* *
* @example * @example
<example name="input-directive"> <example name="input-directive" module="inputExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('inputExample', [])
$scope.user = {name: 'guest', last: 'visitor'}; .controller('ExampleController', ['$scope', function($scope) {
} $scope.user = {name: 'guest', last: 'visitor'};
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<form name="myForm"> <form name="myForm">
User name: <input type="text" name="userName" ng-model="user.name" required> User name: <input type="text" name="userName" ng-model="user.name" required>
<span class="error" ng-show="myForm.userName.$error.required"> <span class="error" ng-show="myForm.userName.$error.required">
...@@ -17713,12 +17740,13 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ ...@@ -17713,12 +17740,13 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
* </pre> * </pre>
* *
* @example * @example
* <example deps="angular-animate.js" animations="true" fixBase="true"> * <example deps="angular-animate.js" animations="true" fixBase="true" module="inputExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('inputExample', [])
$scope.val = '1'; .controller('ExampleController', ['$scope', function($scope) {
} $scope.val = '1';
}]);
</script> </script>
<style> <style>
.my-input { .my-input {
...@@ -17733,7 +17761,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ ...@@ -17733,7 +17761,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
</style> </style>
Update input to see transitions when valid/invalid. Update input to see transitions when valid/invalid.
Integer is a valid value. Integer is a valid value.
<form name="testForm" ng-controller="Ctrl"> <form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" /> <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form> </form>
</file> </file>
...@@ -17777,17 +17805,18 @@ var ngModelDirective = function() { ...@@ -17777,17 +17805,18 @@ var ngModelDirective = function() {
* in input value. * in input value.
* *
* @example * @example
* <example name="ngChange-directive"> * <example name="ngChange-directive" module="changeExample">
* <file name="index.html"> * <file name="index.html">
* <script> * <script>
* function Controller($scope) { * angular.module('changeExample', [])
* $scope.counter = 0; * .controller('ExampleController', ['$scope', function($scope) {
* $scope.change = function() { * $scope.counter = 0;
* $scope.counter++; * $scope.change = function() {
* }; * $scope.counter++;
* } * };
* }]);
* </script> * </script>
* <div ng-controller="Controller"> * <div ng-controller="ExampleController">
* <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" /> * <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
* <input type="checkbox" ng-model="confirmed" id="ng-change-example2" /> * <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
* <label for="ng-change-example2">Confirmed</label><br /> * <label for="ng-change-example2">Confirmed</label><br />
...@@ -17868,14 +17897,15 @@ var requiredDirective = function() { ...@@ -17868,14 +17897,15 @@ var requiredDirective = function() {
* specified in form `/something/` then the value will be converted into a regular expression. * specified in form `/something/` then the value will be converted into a regular expression.
* *
* @example * @example
<example name="ngList-directive"> <example name="ngList-directive" module="listExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('listExample', [])
$scope.names = ['igor', 'misko', 'vojta']; .controller('ExampleController', ['$scope', function($scope) {
} $scope.names = ['igor', 'misko', 'vojta'];
}]);
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="ExampleController">
List: <input name="namesInput" ng-model="names" ng-list required> List: <input name="namesInput" ng-model="names" ng-list required>
<span class="error" ng-show="myForm.namesInput.$error.required"> <span class="error" ng-show="myForm.namesInput.$error.required">
Required!</span> Required!</span>
...@@ -17967,15 +17997,16 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/; ...@@ -17967,15 +17997,16 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
* of the `input` element * of the `input` element
* *
* @example * @example
<example name="ngValue-directive"> <example name="ngValue-directive" module="valueExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('valueExample', [])
$scope.names = ['pizza', 'unicorns', 'robots']; .controller('ExampleController', ['$scope', function($scope) {
$scope.my = { favorite: 'unicorns' }; $scope.names = ['pizza', 'unicorns', 'robots'];
} $scope.my = { favorite: 'unicorns' };
}]);
</script> </script>
<form ng-controller="Ctrl"> <form ng-controller="ExampleController">
<h2>Which is your favorite?</h2> <h2>Which is your favorite?</h2>
<label ng-repeat="name in names" for="{{name}}"> <label ng-repeat="name in names" for="{{name}}">
{{name}} {{name}}
...@@ -18046,14 +18077,15 @@ var ngValueDirective = function() { ...@@ -18046,14 +18077,15 @@ var ngValueDirective = function() {
* *
* @example * @example
* Enter a name in the Live Preview text box; the greeting below the text box changes instantly. * Enter a name in the Live Preview text box; the greeting below the text box changes instantly.
<example> <example module="bindExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('bindExample', [])
$scope.name = 'Whirled'; .controller('ExampleController', ['$scope', function($scope) {
} $scope.name = 'Whirled';
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
Enter name: <input type="text" ng-model="name"><br> Enter name: <input type="text" ng-model="name"><br>
Hello <span ng-bind="name"></span>! Hello <span ng-bind="name"></span>!
</div> </div>
...@@ -18104,15 +18136,16 @@ var ngBindDirective = ngDirective({ ...@@ -18104,15 +18136,16 @@ var ngBindDirective = ngDirective({
* *
* @example * @example
* Try it here: enter text in text box and watch the greeting change. * Try it here: enter text in text box and watch the greeting change.
<example> <example module="bindExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('bindExample', [])
$scope.salutation = 'Hello'; .controller('ExampleController', ['$scope', function ($scope) {
$scope.name = 'World'; $scope.salutation = 'Hello';
} $scope.name = 'World';
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
Salutation: <input type="text" ng-model="salutation"><br> Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br> Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre> <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
...@@ -18170,20 +18203,20 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) { ...@@ -18170,20 +18203,20 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
* @example * @example
Try it here: enter text in text box and watch the greeting change. Try it here: enter text in text box and watch the greeting change.
<example module="ngBindHtmlExample" deps="angular-sanitize.js"> <example module="bindHtmlExample" deps="angular-sanitize.js">
<file name="index.html"> <file name="index.html">
<div ng-controller="ngBindHtmlCtrl"> <div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p> <p ng-bind-html="myHTML"></p>
</div> </div>
</file> </file>
<file name="script.js"> <file name="script.js">
angular.module('ngBindHtmlExample', ['ngSanitize']) angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) { $scope.myHTML =
$scope.myHTML = 'I am an <code>HTML</code>string with ' +
'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>'; '<a href="#">links!</a> and other <em>stuff</em>';
}]); }]);
</file> </file>
<file name="protractor.js" type="protractor"> <file name="protractor.js" type="protractor">
...@@ -18682,7 +18715,7 @@ var ngCloakDirective = ngDirective({ ...@@ -18682,7 +18715,7 @@ var ngCloakDirective = ngDirective({
* *
* This example demonstrates the `controller as` syntax. * This example demonstrates the `controller as` syntax.
* *
* <example name="ngControllerAs"> * <example name="ngControllerAs" module="controllerAsExample">
* <file name="index.html"> * <file name="index.html">
* <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings"> * <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
* Name: <input type="text" ng-model="settings.name"/> * Name: <input type="text" ng-model="settings.name"/>
...@@ -18703,6 +18736,9 @@ var ngCloakDirective = ngDirective({ ...@@ -18703,6 +18736,9 @@ var ngCloakDirective = ngDirective({
* </div> * </div>
* </file> * </file>
* <file name="app.js"> * <file name="app.js">
* angular.module('controllerAsExample', [])
* .controller('SettingsController1', SettingsController1);
*
* function SettingsController1() { * function SettingsController1() {
* this.name = "John Smith"; * this.name = "John Smith";
* this.contacts = [ * this.contacts = [
...@@ -18731,29 +18767,29 @@ var ngCloakDirective = ngDirective({ ...@@ -18731,29 +18767,29 @@ var ngCloakDirective = ngDirective({
* <file name="protractor.js" type="protractor"> * <file name="protractor.js" type="protractor">
* it('should check controller as', function() { * it('should check controller as', function() {
* var container = element(by.id('ctrl-as-exmpl')); * var container = element(by.id('ctrl-as-exmpl'));
* expect(container.findElement(by.model('settings.name')) * expect(container.element(by.model('settings.name'))
* .getAttribute('value')).toBe('John Smith'); * .getAttribute('value')).toBe('John Smith');
* *
* var firstRepeat = * var firstRepeat =
* container.findElement(by.repeater('contact in settings.contacts').row(0)); * container.element(by.repeater('contact in settings.contacts').row(0));
* var secondRepeat = * var secondRepeat =
* container.findElement(by.repeater('contact in settings.contacts').row(1)); * container.element(by.repeater('contact in settings.contacts').row(1));
* *
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) * expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
* .toBe('408 555 1212'); * .toBe('408 555 1212');
* *
* expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value')) * expect(secondRepeat.element(by.model('contact.value')).getAttribute('value'))
* .toBe('john.smith@example.org'); * .toBe('john.smith@example.org');
* *
* firstRepeat.findElement(by.linkText('clear')).click(); * firstRepeat.element(by.linkText('clear')).click();
* *
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) * expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
* .toBe(''); * .toBe('');
* *
* container.findElement(by.linkText('add')).click(); * container.element(by.linkText('add')).click();
* *
* expect(container.findElement(by.repeater('contact in settings.contacts').row(2)) * expect(container.element(by.repeater('contact in settings.contacts').row(2))
* .findElement(by.model('contact.value')) * .element(by.model('contact.value'))
* .getAttribute('value')) * .getAttribute('value'))
* .toBe('yourname@example.org'); * .toBe('yourname@example.org');
* }); * });
...@@ -18762,7 +18798,7 @@ var ngCloakDirective = ngDirective({ ...@@ -18762,7 +18798,7 @@ var ngCloakDirective = ngDirective({
* *
* This example demonstrates the "attach to `$scope`" style of controller. * This example demonstrates the "attach to `$scope`" style of controller.
* *
* <example name="ngController"> * <example name="ngController" module="controllerExample">
* <file name="index.html"> * <file name="index.html">
* <div id="ctrl-exmpl" ng-controller="SettingsController2"> * <div id="ctrl-exmpl" ng-controller="SettingsController2">
* Name: <input type="text" ng-model="name"/> * Name: <input type="text" ng-model="name"/>
...@@ -18783,6 +18819,9 @@ var ngCloakDirective = ngDirective({ ...@@ -18783,6 +18819,9 @@ var ngCloakDirective = ngDirective({
* </div> * </div>
* </file> * </file>
* <file name="app.js"> * <file name="app.js">
* angular.module('controllerExample', [])
* .controller('SettingsController2', ['$scope', SettingsController2]);
*
* function SettingsController2($scope) { * function SettingsController2($scope) {
* $scope.name = "John Smith"; * $scope.name = "John Smith";
* $scope.contacts = [ * $scope.contacts = [
...@@ -18812,28 +18851,28 @@ var ngCloakDirective = ngDirective({ ...@@ -18812,28 +18851,28 @@ var ngCloakDirective = ngDirective({
* it('should check controller', function() { * it('should check controller', function() {
* var container = element(by.id('ctrl-exmpl')); * var container = element(by.id('ctrl-exmpl'));
* *
* expect(container.findElement(by.model('name')) * expect(container.element(by.model('name'))
* .getAttribute('value')).toBe('John Smith'); * .getAttribute('value')).toBe('John Smith');
* *
* var firstRepeat = * var firstRepeat =
* container.findElement(by.repeater('contact in contacts').row(0)); * container.element(by.repeater('contact in contacts').row(0));
* var secondRepeat = * var secondRepeat =
* container.findElement(by.repeater('contact in contacts').row(1)); * container.element(by.repeater('contact in contacts').row(1));
* *
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) * expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
* .toBe('408 555 1212'); * .toBe('408 555 1212');
* expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value')) * expect(secondRepeat.element(by.model('contact.value')).getAttribute('value'))
* .toBe('john.smith@example.org'); * .toBe('john.smith@example.org');
* *
* firstRepeat.findElement(by.linkText('clear')).click(); * firstRepeat.element(by.linkText('clear')).click();
* *
* expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) * expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
* .toBe(''); * .toBe('');
* *
* container.findElement(by.linkText('add')).click(); * container.element(by.linkText('add')).click();
* *
* expect(container.findElement(by.repeater('contact in contacts').row(2)) * expect(container.element(by.repeater('contact in contacts').row(2))
* .findElement(by.model('contact.value')) * .element(by.model('contact.value'))
* .getAttribute('value')) * .getAttribute('value'))
* .toBe('yourname@example.org'); * .toBe('yourname@example.org');
* }); * });
...@@ -19204,21 +19243,22 @@ forEach( ...@@ -19204,21 +19243,22 @@ forEach(
* ({@link guide/expression#-event- Event object is available as `$event`}) * ({@link guide/expression#-event- Event object is available as `$event`})
* *
* @example * @example
<example> <example module="submitExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('submitExample', [])
$scope.list = []; .controller('ExampleController', ['$scope', function($scope) {
$scope.text = 'hello'; $scope.list = [];
$scope.submit = function() { $scope.text = 'hello';
if ($scope.text) { $scope.submit = function() {
$scope.list.push(this.text); if ($scope.text) {
$scope.text = ''; $scope.list.push(this.text);
} $scope.text = '';
}; }
} };
}]);
</script> </script>
<form ng-submit="submit()" ng-controller="Ctrl"> <form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter: Enter text and hit enter:
<input type="text" ng-model="text" name="text" /> <input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" /> <input type="submit" id="submit" value="Submit" />
...@@ -19230,7 +19270,7 @@ forEach( ...@@ -19230,7 +19270,7 @@ forEach(
expect(element(by.binding('list')).getText()).toBe('list=[]'); expect(element(by.binding('list')).getText()).toBe('list=[]');
element(by.css('#submit')).click(); element(by.css('#submit')).click();
expect(element(by.binding('list')).getText()).toContain('hello'); expect(element(by.binding('list')).getText()).toContain('hello');
expect(element(by.input('text')).getAttribute('value')).toBe(''); expect(element(by.model('text')).getAttribute('value')).toBe('');
}); });
it('should ignore empty strings', function() { it('should ignore empty strings', function() {
expect(element(by.binding('list')).getText()).toBe('list=[]'); expect(element(by.binding('list')).getText()).toBe('list=[]');
...@@ -19503,9 +19543,9 @@ var ngIfDirective = ['$animate', function($animate) { ...@@ -19503,9 +19543,9 @@ var ngIfDirective = ['$animate', function($animate) {
* - Otherwise enable scrolling only if the expression evaluates to truthy value. * - Otherwise enable scrolling only if the expression evaluates to truthy value.
* *
* @example * @example
<example module="ngAnimate" deps="angular-animate.js" animations="true"> <example module="includeExample" deps="angular-animate.js" animations="true">
<file name="index.html"> <file name="index.html">
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<select ng-model="template" ng-options="t.name for t in templates"> <select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option> <option value="">(blank)</option>
</select> </select>
...@@ -19517,12 +19557,13 @@ var ngIfDirective = ['$animate', function($animate) { ...@@ -19517,12 +19557,13 @@ var ngIfDirective = ['$animate', function($animate) {
</div> </div>
</file> </file>
<file name="script.js"> <file name="script.js">
function Ctrl($scope) { angular.module('includeExample', ['ngAnimate'])
$scope.templates = .controller('ExampleController', ['$scope', function($scope) {
[ { name: 'template1.html', url: 'template1.html'}, $scope.templates =
{ name: 'template2.html', url: 'template2.html'} ]; [ { name: 'template1.html', url: 'template1.html'},
$scope.template = $scope.templates[0]; { name: 'template2.html', url: 'template2.html'} ];
} $scope.template = $scope.templates[0];
}]);
</file> </file>
<file name="template1.html"> <file name="template1.html">
Content of template1.html Content of template1.html
...@@ -19585,7 +19626,7 @@ var ngIfDirective = ['$animate', function($animate) { ...@@ -19585,7 +19626,7 @@ var ngIfDirective = ['$animate', function($animate) {
return; return;
} }
templateSelect.click(); templateSelect.click();
templateSelect.element.all(by.css('option')).get(2).click(); templateSelect.all(by.css('option')).get(2).click();
expect(includeElem.getText()).toMatch(/Content of template2.html/); expect(includeElem.getText()).toMatch(/Content of template2.html/);
}); });
...@@ -19595,7 +19636,7 @@ var ngIfDirective = ['$animate', function($animate) { ...@@ -19595,7 +19636,7 @@ var ngIfDirective = ['$animate', function($animate) {
return; return;
} }
templateSelect.click(); templateSelect.click();
templateSelect.element.all(by.css('option')).get(0).click(); templateSelect.all(by.css('option')).get(0).click();
expect(includeElem.isPresent()).toBe(false); expect(includeElem.isPresent()).toBe(false);
}); });
</file> </file>
...@@ -19747,14 +19788,15 @@ var ngIncludeFillContentDirective = ['$compile', ...@@ -19747,14 +19788,15 @@ var ngIncludeFillContentDirective = ['$compile',
* @param {expression} ngInit {@link guide/expression Expression} to eval. * @param {expression} ngInit {@link guide/expression Expression} to eval.
* *
* @example * @example
<example> <example module="initExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('initExample', [])
$scope.list = [['a', 'b'], ['c', 'd']]; .controller('ExampleController', ['$scope', function($scope) {
} $scope.list = [['a', 'b'], ['c', 'd']];
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<div ng-repeat="innerList in list" ng-init="outerIndex = $index"> <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index"> <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span> <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
...@@ -19907,16 +19949,17 @@ var ngNonBindableDirective = ngDirective({ terminal: true, priority: 1000 }); ...@@ -19907,16 +19949,17 @@ var ngNonBindableDirective = ngDirective({ terminal: true, priority: 1000 });
* @param {number=} offset Offset to deduct from the total number. * @param {number=} offset Offset to deduct from the total number.
* *
* @example * @example
<example> <example module="pluralizeExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('pluralizeExample', [])
$scope.person1 = 'Igor'; .controller('ExampleController', ['$scope', function($scope) {
$scope.person2 = 'Misko'; $scope.person1 = 'Igor';
$scope.personCount = 1; $scope.person2 = 'Misko';
} $scope.personCount = 1;
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
Person 1:<input type="text" ng-model="person1" value="Igor" /><br/> Person 1:<input type="text" ng-model="person1" value="Igor" /><br/>
Person 2:<input type="text" ng-model="person2" value="Misko" /><br/> Person 2:<input type="text" ng-model="person2" value="Misko" /><br/>
Number of People:<input type="text" ng-model="personCount" value="1" /><br/> Number of People:<input type="text" ng-model="personCount" value="1" /><br/>
...@@ -20850,9 +20893,9 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) { ...@@ -20850,9 +20893,9 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) {
* *
* *
* @example * @example
<example module="ngAnimate" deps="angular-animate.js" animations="true"> <example module="switchExample" deps="angular-animate.js" animations="true">
<file name="index.html"> <file name="index.html">
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<select ng-model="selection" ng-options="item for item in items"> <select ng-model="selection" ng-options="item for item in items">
</select> </select>
<tt>selection={{selection}}</tt> <tt>selection={{selection}}</tt>
...@@ -20866,10 +20909,11 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) { ...@@ -20866,10 +20909,11 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) {
</div> </div>
</file> </file>
<file name="script.js"> <file name="script.js">
function Ctrl($scope) { angular.module('switchExample', ['ngAnimate'])
$scope.items = ['settings', 'home', 'other']; .controller('ExampleController', ['$scope', function($scope) {
$scope.selection = $scope.items[0]; $scope.items = ['settings', 'home', 'other'];
} $scope.selection = $scope.items[0];
}]);
</file> </file>
<file name="animations.css"> <file name="animations.css">
.animate-switch-container { .animate-switch-container {
...@@ -20912,11 +20956,11 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) { ...@@ -20912,11 +20956,11 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) {
expect(switchElem.getText()).toMatch(/Settings Div/); expect(switchElem.getText()).toMatch(/Settings Div/);
}); });
it('should change to home', function() { it('should change to home', function() {
select.element.all(by.css('option')).get(1).click(); select.all(by.css('option')).get(1).click();
expect(switchElem.getText()).toMatch(/Home Span/); expect(switchElem.getText()).toMatch(/Home Span/);
}); });
it('should select default', function() { it('should select default', function() {
select.element.all(by.css('option')).get(2).click(); select.all(by.css('option')).get(2).click();
expect(switchElem.getText()).toMatch(/default/); expect(switchElem.getText()).toMatch(/default/);
}); });
</file> </file>
...@@ -21008,15 +21052,10 @@ var ngSwitchDefaultDirective = ngDirective({ ...@@ -21008,15 +21052,10 @@ var ngSwitchDefaultDirective = ngDirective({
* @element ANY * @element ANY
* *
* @example * @example
<example module="transclude"> <example module="transcludeExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function Ctrl($scope) { angular.module('transcludeExample', [])
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}
angular.module('transclude', [])
.directive('pane', function(){ .directive('pane', function(){
return { return {
restrict: 'E', restrict: 'E',
...@@ -21027,9 +21066,13 @@ var ngSwitchDefaultDirective = ngDirective({ ...@@ -21027,9 +21066,13 @@ var ngSwitchDefaultDirective = ngDirective({
'<div ng-transclude></div>' + '<div ng-transclude></div>' +
'</div>' '</div>'
}; };
}); })
.controller('ExampleController', ['$scope', function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="ExampleController">
<input ng-model="title"><br> <input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/> <textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane> <pane title="{{title}}">{{text}}</pane>
...@@ -21188,21 +21231,22 @@ var ngOptionsMinErr = minErr('ngOptions'); ...@@ -21188,21 +21231,22 @@ var ngOptionsMinErr = minErr('ngOptions');
* `value` variable (e.g. `value.propertyName`). * `value` variable (e.g. `value.propertyName`).
* *
* @example * @example
<example> <example module="selectExample">
<file name="index.html"> <file name="index.html">
<script> <script>
function MyCntrl($scope) { angular.module('selectExample', [])
$scope.colors = [ .controller('ExampleController', ['$scope', function($scope) {
{name:'black', shade:'dark'}, $scope.colors = [
{name:'white', shade:'light'}, {name:'black', shade:'dark'},
{name:'red', shade:'dark'}, {name:'white', shade:'light'},
{name:'blue', shade:'dark'}, {name:'red', shade:'dark'},
{name:'yellow', shade:'light'} {name:'blue', shade:'dark'},
]; {name:'yellow', shade:'light'}
$scope.myColor = $scope.colors[2]; // red ];
} $scope.myColor = $scope.colors[2]; // red
}]);
</script> </script>
<div ng-controller="MyCntrl"> <div ng-controller="ExampleController">
<ul> <ul>
<li ng-repeat="color in colors"> <li ng-repeat="color in colors">
Name: <input ng-model="color.name"> Name: <input ng-model="color.name">
...@@ -21239,7 +21283,7 @@ var ngOptionsMinErr = minErr('ngOptions'); ...@@ -21239,7 +21283,7 @@ var ngOptionsMinErr = minErr('ngOptions');
<file name="protractor.js" type="protractor"> <file name="protractor.js" type="protractor">
it('should check ng-options', function() { it('should check ng-options', function() {
expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('red'); expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('red');
element.all(by.select('myColor')).first().click(); element.all(by.model('myColor')).first().click();
element.all(by.css('select[ng-model="myColor"] option')).first().click(); element.all(by.css('select[ng-model="myColor"] option')).first().click();
expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('black'); expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('black');
element(by.css('.nullable select[ng-model="myColor"]')).click(); element(by.css('.nullable select[ng-model="myColor"]')).click();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7