[ { "path": ".circleci/config.yml", "content": "# Configuration file for https://circleci.com/gh/angular/angular.js\n\n# Note: YAML anchors allow an object to be re-used, reducing duplication.\n# The ampersand declares an alias for an object, then later the `<<: *name`\n# syntax dereferences it.\n# See http://blog.daemonl.com/2016/02/yaml.html\n# To validate changes, use an online parser, eg.\n# http://yaml-online-parser.appspot.com/\n\n# CircleCI configuration version\n# Version 2.1 allows for extra config reuse features\n# https://circleci.com/docs/2.0/reusing-config/#getting-started-with-config-reuse\nversion: 2.1\n\n# Workspace persisted by the `setup` job to share build artifacts with other jobs.\n# https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs\n# https://circleci.com/blog/deep-diving-into-circleci-workspaces/\nvar_workspace_location: &workspace_location ~/\n\n# Executor Definitions\n# https://circleci.com/docs/2.0/reusing-config/#authoring-reusable-executors\n# **NOTE 1**: Pin to exact images using an ID (SHA). See https://circleci.com/docs/2.0/circleci-images/#using-a-docker-image-id-to-pin-an-image-to-a-fixed-version.\n# (Using the tag in not necessary when pinning by ID, but include it anyway for documentation purposes.)\nexecutors:\n default-executor:\n parameters:\n resource_class:\n type: string\n default: medium\n docker:\n - image: circleci/node:14.16.1@sha256:b094e85848b43209ca83d9bb114d406fe62c75cb73b18c9d8eb1a9c6462c97d4\n resource_class: << parameters.resource_class >>\n working_directory: ~/ng\n cloud-sdk:\n description: The docker container to use when running gcp-gcs commands\n docker:\n - image: google/cloud-sdk:alpine@sha256:7d0cae28cb282b76f2d9babe278c63c910d54f0cceca7a65fdf6806e2b43882e\n working_directory: ~/ng\n\n\n# Filter Definitions\n\n# Filter to run a job on all branches and any `v1.X.Y(-Z)` tags.\n# Since the jobs need to run on tagged builds too, a `tags` section has to be explicitly specified.\n# (The `branches` section could be omitted, since it defaults to all branches - just being explicit\n# here).\n# See also https://circleci.com/docs/2.0/workflows/#executing-workflows-for-a-git-tag.\nvar-filter-run-always: &run-always\n filters:\n branches:\n only: /.*/\n tags:\n only: /v1\\.\\d+\\.\\d.*/\n\n# Filter to run a job when code might need to be deployed - i.e. on builds for the `master` branch.\n# (Further checks are needed to determine whether a deployment is actually needed, but these are not\n# possible via filters.)\nvar-filter-run-on-master: &run-on-master\n filters:\n branches:\n only:\n - master\n tags:\n ignore: /.*/\n\n# Filter to run a job when code/docs might need to be deployed - i.e. on tagged builds and on builds\n# for master and `v1.*.x` branches.\n# (Further checks are needed to determine whether a deployment is actually needed, but these are not\n# possible via filters.)\nvar-filter-run-on-tags-and-master-and-version-branches: &run-on-tags-and-master-and-version-branches\n filters:\n branches:\n only:\n - master\n - /v1\\.\\d+\\.x/\n tags:\n only: /v1\\.\\d+\\.\\d.*/\n\n# Filter to run a job when docs might need to be deployed - i.e. on builds for `v1.*.x` branches,\n# which might correspond to the stable branch.\n# (Further checks are needed to determine whether a deployment is actually needed, but these are not\n# possible via filters.)\nvar-filter-run-on-version-branches: &run-on-version-branches\n filters:\n branches:\n only:\n - /v1\\.\\d+\\.x/\n tags:\n ignore: /.*/\n\n\n# Command Definitions\n# https://circleci.com/docs/2.0/reusing-config/#authoring-reusable-commands\ncommands:\n skip_on_pr_and_fork_builds:\n description: Skip a job on pull request and fork builds\n steps:\n - run:\n name: Skip this job if this is a pull request or fork build\n # Note: Using `CIRCLE_*` env variables (instead of those defined in `env.sh` so that this\n # step can be run before `init_environment`.\n command: >\n if [[ -n \"$CIRCLE_PR_NUMBER\" ]] ||\n [[ \"$CIRCLE_PROJECT_USERNAME\" != \"angular\" ]] ||\n [[ \"$CIRCLE_PROJECT_REPONAME\" != \"angular.js\" ]]; then\n echo \"Skipping this job, because this is either a pull request or a fork build.\"\n circleci step halt\n fi\n\n skip_unless_stable_branch:\n description: Skip a job unless this is the stable branch\n steps:\n - run:\n name: Skip this job unless this is the stable branch\n command: >\n if [[ \"$DIST_TAG\" != \"latest\" ]]; then\n echo \"Skipping deployment, because this is not the stable branch.\"\n circleci step halt\n fi\n\n skip_unless_tag_or_master_or_stable_branch:\n description: Skip a job unless this is a tag or the master or stable branch\n steps:\n - run:\n name: Skip this job unless this is a tag or the master or stable branch\n command: >\n if [[ \"$CI_GIT_TAG\" == \"false\" ]] &&\n [[ \"$CI_BRANCH\" != \"master\" ]] &&\n [[ \"$DIST_TAG\" != \"latest\" ]]; then\n echo \"Skipping this job, because this is neither a tag nor the master or stable branch.\"\n circleci step halt\n fi\n\n\n custom_attach_workspace:\n description: Attach workspace at a predefined location\n steps:\n - attach_workspace:\n at: *workspace_location\n\n # Java is needed for running the Closure Compiler (during the `minall` task).\n install_java:\n description: Install java\n steps:\n - run:\n name: Install java\n command: |\n sudo apt-get update\n # Install java runtime\n sudo apt-get install default-jre\n\n # Initializes the CI environment by setting up common environment variables.\n init_environment:\n description: Initializing environment (setting up variables)\n steps:\n - run:\n name: Set up environment\n environment:\n CIRCLE_GIT_BASE_REVISION: << pipeline.git.base_revision >>\n CIRCLE_GIT_REVISION: << pipeline.git.revision >>\n command: ./.circleci/env.sh\n - run:\n # Configure git as the CircleCI `checkout` command does.\n # This is needed because we only checkout on the setup job.\n # Add GitHub to known hosts\n name: Configure git\n command: |\n mkdir -p ~/.ssh\n echo 'github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==' >> ~/.ssh/known_hosts\n git config --global url.\"ssh://git@github.com\".insteadOf \"https://github.com\" || true\n git config --global gc.auto 0 || true\n\n init_saucelabs_environment:\n description: Sets up a domain that resolves to the local host.\n steps:\n - run:\n name: Preparing environment for running tests on Saucelabs.\n command: |\n # For SauceLabs jobs, we set up a domain which resolves to the machine which launched\n # the tunnel. We do this because devices are sometimes not able to properly resolve\n # `localhost` or `127.0.0.1` through the SauceLabs tunnel. Using a domain that does not\n # resolve to anything on SauceLabs VMs ensures that such requests are always resolved\n # through the tunnel, and resolve to the actual tunnel host machine (i.e. the CircleCI VM).\n # More context can be found in: https://github.com/angular/angular/pull/35171.\n setPublicVar SAUCE_LOCALHOST_ALIAS_DOMAIN \"angular-ci.local\"\n setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)\n - run:\n # Sets up a local domain in the machine's host file that resolves to the local\n # host. This domain is helpful in Saucelabs tests where devices are not able to\n # properly resolve `localhost` or `127.0.0.1` through the sauce-connect tunnel.\n name: Setting up alias domain for local host.\n command: echo \"127.0.0.1 $SAUCE_LOCALHOST_ALIAS_DOMAIN\" | sudo tee -a /etc/hosts\n\n start_saucelabs:\n steps:\n - run:\n name: Starting Saucelabs tunnel service\n command: ./lib/saucelabs/sauce-service.sh start-ready-wait\n\n stop_saucelabs:\n steps:\n - run:\n name: Stopping Saucelabs tunnel service\n command: ./lib/saucelabs/sauce-service.sh stop\n\n run_e2e_tests:\n parameters:\n specs:\n type: string\n steps:\n - custom_attach_workspace\n - init_environment\n - init_saucelabs_environment\n - start_saucelabs\n - run:\n command: yarn grunt test:circleci-protractor --specs=\"<< parameters.specs >>\"\n no_output_timeout: 30m\n - stop_saucelabs\n\n run_e2e_tests_jquery:\n parameters:\n specs:\n type: string\n steps:\n - custom_attach_workspace\n - init_environment\n - init_saucelabs_environment\n - start_saucelabs\n - run:\n environment:\n USE_JQUERY: 1\n command: yarn grunt test:circleci-protractor --specs=\"<< parameters.specs >>\"\n no_output_timeout: 30m\n - stop_saucelabs\n\n# Job definitions\n# Jobs can include parameters that are passed in the workflow job invocation.\n# https://circleci.com/docs/2.0/reusing-config/#authoring-parameterized-jobs\njobs:\n setup:\n executor: default-executor\n steps:\n - checkout\n - init_environment\n - install_java\n - run:\n name: Running Yarn install\n command: yarn install --frozen-lockfile --non-interactive\n # Yarn's requests sometimes take more than 10mins to complete.\n no_output_timeout: 45m\n - run: yarn grunt package\n # Persist any changes at this point to be reused by further jobs.\n # **NOTE**: To add new content to the workspace, always persist on the same root.\n - persist_to_workspace:\n root: *workspace_location\n paths:\n - ./ng\n\n lint:\n executor: default-executor\n steps:\n - custom_attach_workspace\n - init_environment\n - run: yarn grunt ci-checks\n - run: yarn commitplease \"$CI_COMMIT_RANGE\"\n - run: yarn grunt validate-angular-files\n\n unit-test:\n executor:\n name: default-executor\n steps:\n - custom_attach_workspace\n - init_environment\n - install_java\n - init_saucelabs_environment\n - run: yarn grunt test:promises-aplus\n - run:\n command: yarn grunt test:jqlite --browsers=\"$BROWSERS\" --reporters=spec\n no_output_timeout: 10m\n - run:\n command: yarn grunt test:modules --browsers=\"$BROWSERS\" --reporters=spec\n no_output_timeout: 10m\n - run:\n command: yarn grunt test:docs --browsers=\"$BROWSERS\" --reporters=spec\n no_output_timeout: 10m\n\n unit-test-jquery:\n executor:\n name: default-executor\n steps:\n - custom_attach_workspace\n - init_environment\n - init_saucelabs_environment\n - run:\n command: yarn grunt test:jquery --browsers=\"$BROWSERS\" --reporters=spec\n no_output_timeout: 10m\n - run:\n command: yarn grunt test:jquery-2.2 --browsers=\"$BROWSERS\" --reporters=spec\n no_output_timeout: 10m\n - run:\n command: yarn grunt test:jquery-2.1 --browsers=\"$BROWSERS\" --reporters=spec\n no_output_timeout: 10m\n\n e2e-test-1:\n executor:\n name: default-executor\n steps:\n - run_e2e_tests:\n specs: test/e2e/tests/**/*.js\n\n e2e-test-2a:\n executor:\n name: default-executor\n steps:\n - run_e2e_tests:\n specs: build/docs/ptore2e/example-ng*/**/default_test.js\n\n e2e-test-2b:\n executor:\n name: default-executor\n steps:\n - run_e2e_tests:\n specs: \"build/docs/ptore2e/!(example-ng*)/**/default_test.js\"\n\n e2e-test-jquery-1:\n executor:\n name: default-executor\n steps:\n - run_e2e_tests_jquery:\n specs: test/e2e/tests/**/*.js\n\n e2e-test-jquery-2a:\n executor:\n name: default-executor\n steps:\n - run_e2e_tests_jquery:\n specs: build/docs/ptore2e/example-ng*/**/jquery_test.js\n\n e2e-test-jquery-2b:\n executor:\n name: default-executor\n steps:\n - run_e2e_tests_jquery:\n specs: build/docs/ptore2e/!(example-ng*)/**/jquery_test.js\n\n prepare-deployment:\n executor:\n name: default-executor\n steps:\n - skip_on_pr_and_fork_builds\n - custom_attach_workspace\n - init_environment\n - run: yarn grunt prepareDeploy\n # Write the deployment files to the workspace to be used by deploy-docs and deploy-code\n - persist_to_workspace:\n root: *workspace_location\n paths:\n - ./ng\n\n # The `deploy-code-files` job should only run when all of these conditions are true for the build:\n # - It is for the `angular/angular.js` repository (not a fork).\n # - It is not for a pull request.\n # - It is for a tag or the master branch or the stable branch(*).\n #\n # *: The stable branch is the one that has the value `latest` in `package.json > distTag`.\n deploy-code-files:\n executor:\n name: cloud-sdk\n steps:\n - skip_on_pr_and_fork_builds\n - custom_attach_workspace\n - init_environment\n - skip_unless_tag_or_master_or_stable_branch\n - run: ls scripts/code.angularjs.org-firebase/deploy\n - run:\n name: Authenticate and configure Docker\n command: |\n echo $GCLOUD_SERVICE_KEY | gcloud auth activate-service-account --key-file=-\n gcloud --quiet config set project ${GOOGLE_PROJECT_ID}\n - run:\n name: Sync files to code.angularjs.org\n command: |\n gsutil -m rsync -r scripts/code.angularjs.org-firebase/deploy gs://code-angularjs-org-338b8.appspot.com\n\n # The `deploy-code-firebase` job should only run when all of these conditions are true for the build:\n # - It is for the `angular/angular.js` repository (not a fork).\n # - It is not for a pull request.\n # - It is for the master branch.\n # (This is enforced via job filters, so we don't need to a step to check it here.)\n deploy-code-firebase:\n executor:\n name: default-executor\n steps:\n - skip_on_pr_and_fork_builds\n - custom_attach_workspace\n - init_environment\n # Install dependencies for Firebase functions to prevent parsing errors during deployment.\n # See https://github.com/angular/angular.js/pull/16453.\n - run:\n name: Install dependencies in `scripts/code.angularjs.org-firebase/functions/`.\n working_directory: scripts/code.angularjs.org-firebase/functions\n command: yarn install --frozen-lockfile --ignore-engines --non-interactive\n - run:\n name: Deploy to Firebase from `scripts/code.angularjs.org-firebase/`.\n working_directory: scripts/code.angularjs.org-firebase\n command: |\n # Do not use `yarn firebase` as that causes the Firebase CLI to look for `firebase.json`\n # in the root directory, even if run from inside `scripts/code.angularjs.org-firebase/`.\n firebase=$(yarn bin)/firebase\n $firebase use\n $firebase deploy --message \"Commit:\\ $CI_COMMIT\" --non-interactive --token \"$FIREBASE_TOKEN\"\n\n # The `deploy-docs` job should only run when all of these conditions are true for the build:\n # - It is for the `angular/angular.js` repository (not a fork).\n # - It is not for a pull request.\n # - It is for the stable branch(*).\n #\n # *: The stable branch is the one that has the value `latest` in `package.json > distTag`.\n deploy-docs:\n executor:\n name: default-executor\n steps:\n - skip_on_pr_and_fork_builds\n - custom_attach_workspace\n - init_environment\n - skip_unless_stable_branch\n # Install dependencies for Firebase functions to prevent parsing errors during deployment.\n # See https://github.com/angular/angular.js/pull/16453.\n - run:\n name: Install dependencies in `scripts/docs.angularjs.org-firebase/functions/`.\n working_directory: scripts/docs.angularjs.org-firebase/functions\n command: yarn install --frozen-lockfile --ignore-engines --non-interactive\n - run:\n name: Deploy to Firebase from `scripts/docs.angularjs.org-firebase/`.\n working_directory: scripts/docs.angularjs.org-firebase\n command: |\n # Do not use `yarn firebase` as that causes the Firebase CLI to look for `firebase.json`\n # in the root directory, even if run from inside `scripts/docs.angularjs.org-firebase/`.\n firebase=$(yarn bin)/firebase\n $firebase use\n $firebase deploy --message \"Commit:\\ $CI_COMMIT\" --non-interactive --token \"$FIREBASE_TOKEN\"\n\nworkflows:\n version: 2\n default_workflow:\n jobs:\n - setup:\n <<: *run-always\n - lint:\n <<: *run-always\n requires:\n - setup\n - unit-test:\n <<: *run-always\n requires:\n - setup\n - unit-test-jquery:\n <<: *run-always\n requires:\n - setup\n - e2e-test-1:\n <<: *run-always\n requires:\n - setup\n - e2e-test-2a:\n <<: *run-always\n requires:\n - setup\n - e2e-test-2b:\n <<: *run-always\n requires:\n - setup\n - e2e-test-jquery-1:\n <<: *run-always\n requires:\n - setup\n - e2e-test-jquery-2a:\n <<: *run-always\n requires:\n - setup\n - e2e-test-jquery-2b:\n <<: *run-always\n requires:\n - setup\n - prepare-deployment:\n <<: *run-on-tags-and-master-and-version-branches\n requires:\n - setup\n - lint\n - unit-test\n - unit-test-jquery\n - e2e-test-1\n - e2e-test-2a\n - e2e-test-2b\n - e2e-test-jquery-1\n - e2e-test-jquery-2a\n - e2e-test-jquery-2b\n - deploy-code-files:\n <<: *run-on-tags-and-master-and-version-branches\n requires:\n - prepare-deployment\n - deploy-code-firebase:\n <<: *run-on-master\n requires:\n - prepare-deployment\n - deploy-docs:\n <<: *run-on-version-branches\n requires:\n - prepare-deployment\n" }, { "path": ".circleci/env-helpers.inc.sh", "content": "####################################################################################################\n# Helpers for defining environment variables for CircleCI.\n#\n# In CircleCI, each step runs in a new shell. The way to share ENV variables across steps is to\n# export them from `$BASH_ENV`, which is automatically sourced at the beginning of every step (for\n# the default `bash` shell).\n#\n# See also https://circleci.com/docs/2.0/env-vars/#using-bash_env-to-set-environment-variables.\n####################################################################################################\n\n# Set and print an environment variable.\n#\n# Use this function for setting environment variables that are public, i.e. it is OK for them to be\n# visible to anyone through the CI logs.\n#\n# Usage: `setPublicVar `\nfunction setPublicVar() {\n setSecretVar $1 \"$2\";\n echo \"$1=$2\";\n}\n\n# Set (without printing) an environment variable.\n#\n# Use this function for setting environment variables that are secret, i.e. should not be visible to\n# everyone through the CI logs.\n#\n# Usage: `setSecretVar `\nfunction setSecretVar() {\n # WARNING: Secrets (e.g. passwords, access tokens) should NOT be printed.\n # (Keep original shell options to restore at the end.)\n local -r originalShellOptions=$(set +o);\n set +x -eu -o pipefail;\n\n echo \"export $1=\\\"${2:-}\\\";\" >> $BASH_ENV;\n\n # Restore original shell options.\n eval \"$originalShellOptions\";\n}\n\n\n# Create a function to set an environment variable, when called.\n#\n# Use this function for creating setter for public environment variables that require expensive or\n# time-consuming computaions and may not be needed. When needed, you can call this function to set\n# the environment variable (which will be available through `$BASH_ENV` from that point onwards).\n#\n# Arguments:\n# - ``: The name of the environment variable. The generated setter function will be\n# `setPublicVar_`.\n# - ``: The code to run to compute the value for the variable. Since this code should be\n# executed lazily, it must be properly escaped. For example:\n# ```sh\n# # DO NOT do this:\n# createPublicVarSetter MY_VAR \"$(whoami)\"; # `whoami` will be evaluated eagerly\n#\n# # DO this isntead:\n# createPublicVarSetter MY_VAR \"\\$(whoami)\"; # `whoami` will NOT be evaluated eagerly\n# ```\n#\n# Usage: `createPublicVarSetter `\n#\n# Example:\n# ```sh\n# createPublicVarSetter MY_VAR 'echo \"FOO\"';\n# echo $MY_VAR; # Not defined\n#\n# setPublicVar_MY_VAR;\n# source $BASH_ENV;\n# echo $MY_VAR; # FOO\n# ```\nfunction createPublicVarSetter() {\n echo \"setPublicVar_$1() { setPublicVar $1 \\\"$2\\\"; }\" >> $BASH_ENV;\n}\n" }, { "path": ".circleci/env.sh", "content": "#!/usr/bin/env bash\n\n# Variables\nreadonly projectDir=$(realpath \"$(dirname ${BASH_SOURCE[0]})/..\")\nreadonly envHelpersPath=\"$projectDir/.circleci/env-helpers.inc.sh\";\n\n# Load helpers and make them available everywhere (through `$BASH_ENV`).\nsource $envHelpersPath;\necho \"source $envHelpersPath;\" >> $BASH_ENV;\n\n####################################################################################################\n# Define PUBLIC environment variables for CircleCI.\n####################################################################################################\n# See https://circleci.com/docs/2.0/env-vars/#built-in-environment-variables for more info.\n####################################################################################################\nsetPublicVar CI \"$CI\"\nsetPublicVar PROJECT_ROOT \"$projectDir\";\n# This is the branch being built; e.g. `pull/12345` for PR builds.\nsetPublicVar CI_BRANCH \"$CIRCLE_BRANCH\";\nsetPublicVar CI_BUILD_URL \"$CIRCLE_BUILD_URL\";\nsetPublicVar CI_COMMIT \"$CIRCLE_SHA1\";\nsetPublicVar CI_GIT_BASE_REVISION \"${CIRCLE_GIT_BASE_REVISION}\";\nsetPublicVar CI_GIT_REVISION \"${CIRCLE_GIT_REVISION}\";\nsetPublicVar CI_GIT_TAG \"${CIRCLE_TAG:-false}\";\nsetPublicVar CI_COMMIT_RANGE \"$CIRCLE_GIT_BASE_REVISION..$CIRCLE_GIT_REVISION\";\nsetPublicVar CI_PULL_REQUEST \"${CIRCLE_PR_NUMBER:-false}\";\nsetPublicVar CI_REPO_NAME \"$CIRCLE_PROJECT_REPONAME\";\nsetPublicVar CI_REPO_OWNER \"$CIRCLE_PROJECT_USERNAME\";\nsetPublicVar CI_PR_REPONAME \"$CIRCLE_PR_REPONAME\";\nsetPublicVar CI_PR_USERNAME \"$CIRCLE_PR_USERNAME\";\n\n\n####################################################################################################\n# Define SauceLabs environment variables for CircleCI.\n####################################################################################################\nsetPublicVar BROWSER_PROVIDER \"saucelabs\"\n\n# The currently latest-1 version of desktop Safari on Saucelabs (v12.0) is unstable and disconnects\n# consistently. The latest version (v12.1) works fine.\n# TODO: Add `SL_Safari-1` back, once it no longer corresponds to v12.0.\nsetPublicVar BROWSERS \"SL_Chrome,SL_Chrome-1,\\\nSL_Firefox,SL_Firefox-1,\\\nSL_Safari,\\\nSL_iOS,SL_iOS-1,\\\nSL_IE_9,SL_IE_10,SL_IE_11,\\\nSL_EDGE,SL_EDGE-1\"\n\nsetPublicVar SAUCE_LOG_FILE /tmp/angular/sauce-connect.log\nsetPublicVar SAUCE_READY_FILE /tmp/angular/sauce-connect-ready-file.lock\nsetPublicVar SAUCE_PID_FILE /tmp/angular/sauce-connect-pid-file.lock\nsetPublicVar SAUCE_TUNNEL_IDENTIFIER \"angularjs-framework-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX}\"\n# Amount of seconds we wait for sauceconnect to establish a tunnel instance. In order to not\n# acquire CircleCI instances for too long if sauceconnect failed, we need a connect timeout.\nsetPublicVar SAUCE_READY_FILE_TIMEOUT 120\n\n####################################################################################################\n# Define additional environment variables\n####################################################################################################\n\n# NOTE: Make sure the tools used to compute this are available in all executors in `config.yml`.\nsetPublicVar DIST_TAG $( cat package.json | grep distTag | sed -E 's/^\\s*\"distTag\"\\s*:\\s*\"([^\"]+)\"\\s*,\\s*$/\\1/' )\n\n####################################################################################################\n####################################################################################################\n## Source `$BASH_ENV` to make the variables available immediately. ##\n## *** NOTE: This must remain the last command in this script. *** ##\n####################################################################################################\n####################################################################################################\nsource $BASH_ENV;\n" }, { "path": ".editorconfig", "content": "# https://editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[dropdown-toggle.js]\ntrim_trailing_whitespace = false\ninsert_final_newline = false\n\n[htmlparser.js]\ninsert_final_newline = false\n" }, { "path": ".eslintignore", "content": "build/**\ndocs/app/assets/js/angular-bootstrap/**\ndocs/config/templates/**\nnode_modules/**\nlib/htmlparser/**\nsrc/angular.bind.js\nsrc/ngParseExt/ucd.js\ni18n/closure/**\ntmp/**\nvendor/**\n" }, { "path": ".eslintrc-base.json", "content": "{\n \"rules\": {\n // Rules are divided into sections from http://eslint.org/docs/rules/\n\n // Possible errors\n \"comma-dangle\": [\"error\", \"never\"],\n \"no-cond-assign\": [\"error\", \"except-parens\"],\n \"no-constant-condition\": [\"error\", {\"checkLoops\": false}],\n \"no-control-regex\": \"error\",\n \"no-debugger\": \"error\",\n \"no-dupe-args\": \"error\",\n \"no-dupe-keys\": \"error\",\n \"no-duplicate-case\": \"error\",\n \"no-empty-character-class\": \"error\",\n \"no-empty\": \"error\",\n \"no-ex-assign\": \"error\",\n \"no-extra-boolean-cast\": \"error\",\n \"no-extra-semi\": \"error\",\n \"no-func-assign\": \"error\",\n \"no-inner-declarations\": \"error\",\n \"no-invalid-regexp\": \"error\",\n \"no-irregular-whitespace\": \"error\",\n \"no-negated-in-lhs\": \"error\",\n \"no-obj-calls\": \"error\",\n \"no-regex-spaces\": \"error\",\n \"no-sparse-arrays\": \"error\",\n \"no-unreachable\": \"error\",\n \"use-isnan\": \"error\",\n \"no-unsafe-finally\": \"error\",\n \"valid-typeof\": \"error\",\n \"no-unexpected-multiline\": \"error\",\n\n // Best practices\n \"accessor-pairs\": \"error\",\n \"array-callback-return\": \"error\",\n \"eqeqeq\": [\"error\", \"allow-null\"],\n \"no-alert\": \"error\",\n \"no-caller\": \"error\",\n \"no-case-declarations\": \"error\",\n \"no-eval\": \"error\",\n \"no-extend-native\": \"error\",\n \"no-extra-bind\": \"error\",\n \"no-extra-label\": \"error\",\n \"no-fallthrough\": \"error\",\n \"no-floating-decimal\": \"error\",\n \"no-implied-eval\": \"error\",\n \"no-invalid-this\": \"error\",\n \"no-iterator\": \"error\",\n \"no-multi-str\": \"error\",\n \"no-new-func\": \"error\",\n \"no-new-wrappers\": \"error\",\n \"no-new\": \"error\",\n \"no-octal-escape\": \"error\",\n \"no-octal\": \"error\",\n \"no-proto\": \"error\",\n \"no-redeclare\": \"error\",\n \"no-return-assign\": \"error\",\n \"no-script-url\": \"error\",\n \"no-self-assign\": \"error\",\n \"no-self-compare\": \"error\",\n \"no-sequences\": \"error\",\n \"no-throw-literal\": \"error\",\n \"no-unmodified-loop-condition\": \"error\",\n \"no-unused-expressions\": \"error\",\n \"no-unused-labels\": \"error\",\n \"no-useless-call\": \"error\",\n \"no-useless-concat\": \"error\",\n \"no-useless-escape\": \"error\",\n \"no-void\": \"error\",\n \"no-with\": \"error\",\n \"radix\": \"error\",\n \"wrap-iife\": [\"error\", \"inside\"],\n\n // Strict mode\n \"strict\": [\"error\", \"global\"],\n\n // Variables\n \"no-delete-var\": \"error\",\n \"no-label-var\": \"error\",\n \"no-restricted-globals\": [\"error\", \"event\"],\n \"no-shadow-restricted-names\": \"error\",\n \"no-undef-init\": \"error\",\n \"no-undef\": \"error\",\n \"no-unused-vars\": [\"error\", { \"vars\": \"local\", \"args\": \"none\" }],\n\n // Node.js\n \"handle-callback-err\": \"error\",\n\n // Stylistic issues\n \"array-bracket-spacing\": [\"error\", \"never\"],\n \"brace-style\": [\"error\", \"1tbs\", { \"allowSingleLine\": true }],\n \"comma-style\": [\"error\", \"last\"],\n \"eol-last\": \"error\",\n \"keyword-spacing\": \"error\",\n \"linebreak-style\": [\"error\", \"unix\"],\n \"max-len\": [\"error\", { \"code\": 200, \"ignoreComments\": true, \"ignoreUrls\": true }],\n \"new-cap\": \"error\",\n \"new-parens\": \"error\",\n \"no-array-constructor\": \"error\",\n \"no-bitwise\": \"error\",\n \"no-mixed-spaces-and-tabs\": \"error\",\n \"no-multiple-empty-lines\": [\"error\", { \"max\": 3, \"maxEOF\": 1 }],\n \"no-whitespace-before-property\": \"error\",\n \"no-spaced-func\": \"error\",\n \"no-trailing-spaces\": \"error\",\n \"no-unneeded-ternary\": \"error\",\n \"quotes\": [\"error\", \"single\"],\n \"semi-spacing\": \"error\",\n \"semi\": \"error\",\n \"space-before-blocks\": [\"error\", \"always\"],\n \"space-before-function-paren\": [\"error\", \"never\"],\n \"space-in-parens\": [\"error\", \"never\"],\n \"space-infix-ops\": \"error\",\n \"space-unary-ops\": [\"error\", { \"words\": true, \"nonwords\": false }],\n \"unicode-bom\": [\"error\", \"never\"]\n }\n}\n" }, { "path": ".eslintrc-browser.json", "content": "{\n \"extends\": \"./.eslintrc-base.json\",\n\n \"env\": {\n // Note: don't set `\"browser\": true`; code in \"src/\" should be compatible with\n // non-browser environments like Node.js with a custom window implementation\n // like jsdom. All browser globals should be taken from window.\n \"browser\": false,\n \"node\": false\n },\n\n \"globals\": {\n \"window\": false,\n\n \"angular\": false\n }\n}\n" }, { "path": ".eslintrc-node.json", "content": "{\n \"extends\": \"./.eslintrc-base.json\",\n \"env\": {\n \"browser\": false,\n \"node\": true\n },\n \"parserOptions\": {\n \"ecmaVersion\": 2017\n },\n \"plugins\": [\n \"promise\"\n ]\n}\n" }, { "path": ".eslintrc-todo.json", "content": "{\n // This config contains proposed rules that we'd like to have enabled but haven't\n // converted the code to adhere yet. If a decision comes to not enable one of these\n // rules, it should be removed from the file. Every rule that got enabled in the\n // end should be moved from here to a respective section in .eslintrc.json\n\n \"rules\": {\n // Rules are divided into sections from http://eslint.org/docs/rules/\n\n // Best practices\n \"complexity\": [\"error\", 10],\n \"dot-notation\": \"error\",\n \"dot-location\": [\"error\", \"property\"],\n\n // Stylistic issues\n \"block-spacing\": [\"error\", \"always\"],\n \"comma-spacing\": \"error\",\n \"id-denylist\": [\"error\", \"event\"],\n \"indent\": [\"error\", 2],\n \"key-spacing\": [\"error\", { \"beforeColon\": false, \"afterColon\": true, \"mode\": \"minimum\" }],\n \"object-curly-spacing\": [\"error\", \"never\"],\n \"object-property-newline\": [\"error\", { \"allowMultiplePropertiesPerLine\": true }],\n \"operator-linebreak\": [\"error\", \"after\", { \"overrides\": { \"?\": \"before\", \":\": \"before\" }}]\n }\n}\n" }, { "path": ".eslintrc.json", "content": "{\n \"root\": true,\n \"extends\": \"./.eslintrc-node.json\"\n}\n" }, { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# JS files must always use LF for tools to work\n*.js eol=lf\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "# AngularJS is in LTS mode\nWe are no longer accepting changes that are not critical bug fixes into this project.\nSee https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c for more detail.\n\n\n\n\n\n**I'm submitting a ...**\n\n- [ ] regression from 1.7.0\n- [ ] security issue\n- [ ] issue caused by a new browser version\n- [ ] other \n\n**Current behavior:**\n\n\n**Expected / new behavior:**\n\n\n**Minimal reproduction of the problem with instructions:**\n\n\n**AngularJS version:** 1.8.x\n\n\n**Browser:** [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView | Opera XX ]\n\n\n**Anything else:**\n\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "# AngularJS is in LTS mode\nWe are no longer accepting changes that are not critical bug fixes into this project.\nSee https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c for more detail.\n\n\n**Does this PR fix a regression since 1.7.0, a security flaw, or a problem caused by a new browser version?**\n\n\n\n\n**What is the current behavior? (You can also link to an open issue here)**\n\n\n\n**What is the new behavior (if this is a feature change)?**\n\n\n\n**Does this PR introduce a breaking change?**\n\n\n\n**Please check if the PR fulfills these requirements**\n- [ ] The commit message follows our [guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits)\n- [ ] Fix/Feature: [Docs](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#documentation) have been added/updated\n- [ ] Fix/Feature: Tests have been added; existing tests pass\n\n**Other information**:\n\n" }, { "path": ".gitignore", "content": "/build/\n/benchpress-build/\n.DS_Store\ngen_docs.disable\ntest.disable\nregression/temp*.html\nperformance/temp*.html\n.idea/workspace.xml\n*~\n*.swp\nangular.js.tmproj\nnode_modules/\nangular.xcodeproj\n.firebase/\n.idea\n*.iml\n.agignore\n.lvimrc\nlibpeerconnection.log\nnpm-debug.log\n/tmp/\n.vscode\n*.log\n*.stackdump\nscripts/code.angularjs.org-firebase/deploy\nscripts/docs.angularjs.org-firebase/deploy\nscripts/docs.angularjs.org-firebase/functions/content\n" }, { "path": ".mailmap", "content": "Andres Ornelas \nCaitlin Potter \nCaitlin Potter \nDi Peng \nDi Peng \nGeorgios Kalpakas \nGeorgios Kalpakas \nJulie Ralph \nLucas Galfaso \nMartin Staffa \nMartin Staffa \nMatias Niemelä \nMichał Gołębiowski-Owczarek \nMisko Hevery \nMisko Hevery \nIgor Minar \nIgor Minar \nIgor Minar \nIgor Minar \nPawel Kozlowski \nPeter Bacon Darwin \nRodric Haddad \nShahar Talmi \nShahar Talmi \nShyam Seshadri \nShyam Seshadri \nVojta Jina \nVojta Jina \nVojta Jina \n" }, { "path": ".nvmrc", "content": "14.16.1\n" }, { "path": "CHANGELOG.md", "content": "**AngularJS support has officially ended as of January 2022.\n[See what ending support means](https://docs.angularjs.org/misc/version-support-status)\nand [read the end of life announcement](https://goo.gle/angularjs-end-of-life).**\n\n**Visit [angular.io](https://angular.io) for the actively supported Angular.**\n\n\n# 1.8.3 ultimate-farewell (2022-04-07)\n\nOne final release of AngularJS in order to update package README files on npm.\n\n\n# 1.8.2 meteoric-mining (2020-10-21)\n\n## Bug Fixes\n- **$sceDelegate:** ensure that `resourceUrlWhitelist()` is identical to `trustedResourceUrlList()`\n ([e41f01](https://github.com/angular/angular.js/commit/e41f018959934bfbf982ba996cd654b1fce88d43),\n [#17090](https://github.com/angular/angular.js/issues/17090))\n\n\n\n# 1.8.1 mutually-supporting (2020-09-30)\n\n## Bug Fixes\n- **$sanitize:** do not trigger CSP alert/report in Firefox and Chrome\n ([2fab3d](https://github.com/angular/angular.js/commit/2fab3d4e00f4fe35bfa3cf255160cb97404baf24))\n\n## Refactorings\n\n- **SanitizeUriProvider:** remove usages of whitelist\n ([76738102](https://github.com/angular/angular.js/commit/767381020d88bda2855ac87ca6f00748907e14ff))\n- **httpProvider:** remove usages of whitelist and blacklist\n ([c953af6b](https://github.com/angular/angular.js/commit/c953af6b8cfeefe4acc0ca358550eed5da8cfe00))\n- **sceDelegateProvider:** remove usages of whitelist and blacklist\n ([a206e267](https://github.com/angular/angular.js/commit/a206e2675c351c3cdcde3402978126774c1c5df9))\n\n## Deprecation Notices\n\n- Deprecated ~~`$compileProvider.aHrefSanitizationWhitelist`~~.\n It is now [`aHrefSanitizationTrustedUrlList`](https://docs.angularjs.org/api/ng/provider/$compileProvider#aHrefSanitizationTrustedUrlList).\n- Deprecated ~~`$compileProvider.imgSrcSanitizationWhitelist`~~.\n It is now [`imgSrcSanitizationTrustedUrlList`](https://docs.angularjs.org/api/ng/provider/$compileProvider#imgSrcSanitizationTrustedUrlList).\n- Deprecated ~~`$httpProvider.xsrfWhitelistedOrigins`~~.\n It is now [`xsrfTrustedOrigins`](https://docs.angularjs.org/api/ng/provider/$httpProvider#xsrfTrustedOrigins).\n- Deprecated ~~`$sceDelegateProvider.resourceUrlWhitelist`~~.\n It is now [`trustedResourceUrlList`](https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider#trustedResourceUrlList).\n- Deprecated ~~`$sceDelegateProvider.resourceUrlBlacklist`~~.\n It is now [`bannedResourceUrlList`](https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider#bannedResourceUrlList).\n\nFor the purposes of backward compatibility, the previous symbols are aliased to their new symbol.\n\n\n\n# 1.8.0 nested-vaccination (2020-06-01)\n\n_This release contains a breaking change to resolve a security issue which was discovered by\nKrzysztof Kotowicz(@koto); and independently by Esben Sparre Andreasen (@esbena) while\nperforming a Variant Analysis of [CVE-2020-11022](https://github.com/advisories/GHSA-gxr4-xjj5-5px2)\nwhich itself was found and reported by Masato Kinugawa (@masatokinugawa)._\n\n## Bug Fixes\n- **jqLite:**\n - prevent possible XSS due to regex-based HTML replacement\n ([2df43c](https://github.com/angular/angular.js/commit/2df43c07779137d1bddf7f3b282a1287a8634acd))\n\n## Breaking Changes\n\n### **jqLite** due to:\n - **[2df43c](https://github.com/angular/angular.js/commit/2df43c07779137d1bddf7f3b282a1287a8634acd)**: prevent possible XSS due to regex-based HTML replacement\n\nJqLite no longer turns XHTML-like strings like `
` to sibling elements `
`\nwhen not in XHTML mode. Instead it will leave them as-is. The browser, in non-XHTML mode, will convert these to:\n`
`.\n\nThis is a security fix to avoid an XSS vulnerability if a new jqLite element is created from a user-controlled HTML string.\nIf you must have this functionality and understand the risk involved then it is posible to restore the original behavior by calling\n\n```js\nangular.UNSAFE_restoreLegacyJqLiteXHTMLReplacement();\n```\n\nBut you should adjust your code for this change and remove your use of this function as soon as possible.\n\nNote that this only patches jqLite. If you use jQuery 3.5.0 or newer, please read the [jQuery 3.5 upgrade guide](https://jquery.com/upgrade-guide/3.5/) for more details about the workarounds.\n\n\n\n# 1.7.9 pollution-eradication (2019-11-19)\n\n## Bug Fixes\n- **angular.merge:** do not merge __proto__ property\n ([726f49](https://github.com/angular/angular.js/commit/726f49dcf6c23106ddaf5cfd5e2e592841db743a))\n
(Thanks to the [Snyk Security Research Team](https://snyk.io/blog/snyk-research-team-discovers-severe-prototype-pollution-security-vulnerabilities-affecting-all-versions-of-lodash/) for identifyng this issue.)\n- **ngStyle:** correctly remove old style when new style value is invalid\n ([5edd25](https://github.com/angular/angular.js/commit/5edd25364f617083363dc2bd61f9230b38267578),\n [#16860](https://github.com/angular/angular.js/issues/16860),\n [#16868](https://github.com/angular/angular.js/issues/16868))\n\n\n\n# 1.7.8 enthusiastic-oblation (2019-03-11)\n\n\n## Bug Fixes\n- **required:** correctly validate required on non-input element surrounded by ngIf\n ([a4c7bd](https://github.com/angular/angular.js/commit/a4c7bdccd76c39c30e33f6215da9a00cc8acde2c),\n [#16830](https://github.com/angular/angular.js/issues/16830),\n [#16836](https://github.com/angular/angular.js/issues/16836))\n\n\n\n# 1.7.7 kingly-exiting (2019-02-04)\n\n## Bug Fixes\n- **ngRequired:** set error correctly when inside ngRepeat and false by default\n ([5ad4f5](https://github.com/angular/angular.js/commit/5ad4f5562c37b1cb575e3e5fddd96e9dd10408e2),\n [#16814](https://github.com/angular/angular.js/issues/16814),\n [#16820](https://github.com/angular/angular.js/issues/16820))\n\n\n\n# 1.7.6 gravity-manipulation (2019-01-17)\n\n## Bug Fixes\n- **$compile:** fix ng-prop-* with undefined values\n ([772440](https://github.com/angular/angular.js/commit/772440cdaf9a9bfa40de1675e20a5f0e356089ed),\n [#16797](https://github.com/angular/angular.js/issues/16797),\n [#16798](https://github.com/angular/angular.js/issues/16798))\n- **compile:** properly handle false value for boolean attrs with jQuery\n ([27486b](https://github.com/angular/angular.js/commit/27486bd15e70946ece2ba713e4e8654b7f9bddad),\n [#16778](https://github.com/angular/angular.js/issues/16778),\n [#16779](https://github.com/angular/angular.js/issues/16779))\n- **ngRepeat:**\n - fix reference to last collection value remaining across linkages\n ([cf919a](https://github.com/angular/angular.js/commit/cf919a6fb7fc655f3fa37a74899a797ea5b8073e))\n - fix trackBy function being invoked with incorrect scope\n ([d4d103](https://github.com/angular/angular.js/commit/d4d1031bcd9b30ae6a58bd60a79bcc9d20f0f2b7),\n [#16776](https://github.com/angular/angular.js/issues/16776),\n [#16777](https://github.com/angular/angular.js/issues/16777))\n- **aria/ngClick:** check if element is `contenteditable` before blocking spacebar\n ([289374](https://github.com/angular/angular.js/commit/289374a43c1b2fd715ddf7455db225b17afebbaf),\n [#16762](https://github.com/angular/angular.js/issues/16762))\n- **input:** prevent browsers from autofilling hidden inputs\n ([7cbb10](https://github.com/angular/angular.js/commit/7cbb1044fcb3576cdad791bd22ebea3dfd533ff8))\n- **Angular:** add workaround for Safari / Webdriver problem\n ([eb49f6](https://github.com/angular/angular.js/commit/eb49f6b7555cfd7ab03fd35581adb6b4bd49044e))\n- **$browser:** normalize inputted URLs\n ([2f72a6](https://github.com/angular/angular.js/commit/2f72a69ded53a122afad3ec28d91f9bd2f41eb4f),\n [#16606](https://github.com/angular/angular.js/issues/16606))\n- **interpolate:** do not create directives for constant media URL attributes\n ([90a41d](https://github.com/angular/angular.js/commit/90a41d415c83abdbf28317f49df0fd0a7e07db86),\n [#16734](https://github.com/angular/angular.js/issues/16734))\n- **$q:** allow third-party promise libraries\n ([eefaa7](https://github.com/angular/angular.js/commit/eefaa76a90dbef08fdc7d734a205cc2de50d9f91),\n [#16164](https://github.com/angular/angular.js/issues/16164),\n [#16471](https://github.com/angular/angular.js/issues/16471))\n- **urlUtils:** make IPv6 URL's hostname wrapped in square brackets in IE/Edge\n ([0e1bd7](https://github.com/angular/angular.js/commit/0e1bd7822e61822a48b8fd7ba5913a8702e6dabf),\n [#16692](https://github.com/angular/angular.js/issues/16692),\n [#16715](https://github.com/angular/angular.js/issues/16715))\n- **ngAnimateSwap:** make it compatible with `ngIf` on the same element\n ([b27080](https://github.com/angular/angular.js/commit/b27080d52546409fb4e483f212f03616e2ca8037),\n [#16616](https://github.com/angular/angular.js/issues/16616),\n [#16729](https://github.com/angular/angular.js/issues/16729))\n- **ngMock:** make matchLatestDefinitionEnabled work\n ([3cdffc](https://github.com/angular/angular.js/commit/3cdffcecbae71189b4db69b57fadda6608a23b61),\n [#16702](https://github.com/angular/angular.js/issues/16702))\n- **ngStyle:** skip setting empty value when new style has the property\n ([d6098e](https://github.com/angular/angular.js/commit/d6098eeb1c9510d599e9bd3cfdba7dd21e7a55a5),\n [#16709](https://github.com/angular/angular.js/issues/16709))\n\n## Performance Improvements\n- **input:** prevent multiple validations on initialization\n ([692622](https://github.com/angular/angular.js/commit/69262239632027b373258e75c670b89132ad9edb),\n [#14691](https://github.com/angular/angular.js/issues/14691),\n [#16760](https://github.com/angular/angular.js/issues/16760))\n\n\n\n\n# 1.7.5 anti-prettification (2018-10-04)\n\n## Bug Fixes\n- **ngClass:** do not break on invalid values\n ([f3a565](https://github.com/angular/angular.js/commit/f3a565872d802c94bb213944791b11b483d52f73),\n [#16697](https://github.com/angular/angular.js/issues/16697),\n [#16699](https://github.com/angular/angular.js/issues/16699))\n\n\n\n# 1.7.4 interstellar-exploration (2018-09-07)\n\n## Bug Fixes\n- **ngAria.ngClick:** prevent default event on space/enter only for non-interactive elements\n ([61b335](https://github.com/angular/angular.js/commit/61b33543ff8e7f32464dec98a46bf0a35e9b03a4),\n [#16664](https://github.com/angular/angular.js/issues/16664),\n [#16680](https://github.com/angular/angular.js/issues/16680))\n- **ngAnimate:** remove the \"prepare\" classes with multiple structural animations\n ([3105b2](https://github.com/angular/angular.js/commit/3105b2c26a71594c4e7904efc18f4b2e9da25b1b),\n [#16681](https://github.com/angular/angular.js/issues/16681),\n [#16677](https://github.com/angular/angular.js/issues/16677))\n- **$route:** correctly extract path params if the path contains a question mark or a hash\n ([2ceeb7](https://github.com/angular/angular.js/commit/2ceeb739f35e01fcebcabac4beeeb7684ae9f86d))\n- **ngHref:** allow numbers and other objects in interpolation\n ([30084c](https://github.com/angular/angular.js/commit/30084c13699c814ff6703d7aa2d3947a9b2f7067),\n [#16652](https://github.com/angular/angular.js/issues/16652),\n [#16626](https://github.com/angular/angular.js/issues/16626))\n- **select:** allow to select first option with value `undefined`\n ([668a33](https://github.com/angular/angular.js/commit/668a33da3439f17e61dfa8f6d9b114ebde8c9d87),\n [#16653](https://github.com/angular/angular.js/issues/16653),\n [#16656](https://github.com/angular/angular.js/issues/16656))\n\n\n\n# 1.7.3 eventful-proposal (2018-08-03)\n\n## Bug Fixes\n- **$location:**\n - fix infinite recursion/digest on URLs with special characters\n ([e68697](https://github.com/angular/angular.js/commit/e68697e2e30695f509e6c2c1e43c2c02b7af41f0),\n [#16592](https://github.com/angular/angular.js/issues/16592),\n [#16611](https://github.com/angular/angular.js/issues/16611))\n - avoid unnecessary `$locationChange*` events due to empty hash\n ([1144b1](https://github.com/angular/angular.js/commit/1144b1eccb886ea0e4a80bcb07d38a305c3263b4),\n [#16632](https://github.com/angular/angular.js/issues/16632),\n [#16636](https://github.com/angular/angular.js/issues/16636))\n- **ngMock.$httpBackend:**\n - pass failed HTTP expectations to `$exceptionHandler`\n ([4adbf8](https://github.com/angular/angular.js/commit/4adbf82a84a564a8d3f0982c17a64c6163200bcd),\n [#16644](https://github.com/angular/angular.js/issues/16644))\n - correctly ignore query params in {expect,when}Route\n ([be417f](https://github.com/angular/angular.js/commit/be417f28549e184fbc3c7f74251ac21fca965ae8),\n [#14173](https://github.com/angular/angular.js/issues/14173),\n [#16589](https://github.com/angular/angular.js/issues/16589))\n- **Angular:** add workaround for Safari / Webdriver problem\n ([0a1db2](https://github.com/angular/angular.js/commit/0a1db2ad5f8da6902b1711a738ae4177ce9685fa),\n [#16645](https://github.com/angular/angular.js/issues/16645))\n- **$animate:** avoid memory leak with `$animate.enabled(element, enabled)`\n ([4bd424](https://github.com/angular/angular.js/commit/4bd424690612885ca06028e9b27de585edc3d3c3),\n [#16649](https://github.com/angular/angular.js/issues/16649))\n- **$compile:**\n - use correct parent element when requiring on html element\n ([05ac70](https://github.com/angular/angular.js/commit/05ac702bc7edae5f89c363ea661774910735ea8b),\n [#16535](https://github.com/angular/angular.js/issues/16535),\n [#16647](https://github.com/angular/angular.js/issues/16647))\n - work around Firefox `DocumentFragment` bug\n ([10973c](https://github.com/angular/angular.js/commit/10973c3366676ac8e5b2728b1e006cdef4ea197e),\n [#16607](https://github.com/angular/angular.js/issues/16607),\n [#16615](https://github.com/angular/angular.js/issues/16615))\n- **ngEventDirs:**\n - pass error in handler to $exceptionHandler when event was triggered in a digest\n ([688211](https://github.com/angular/angular.js/commit/6882113bc194fb10081db9bab3dd7d69dd59f311))\n - don't wrap the event handler in $apply if already in $digest\n ([535ee3](https://github.com/angular/angular.js/commit/535ee32a0b4881c9fd526fb5e0ffc10919ba1800),\n [#14673](https://github.com/angular/angular.js/issues/14673),\n [#14674](https://github.com/angular/angular.js/issues/14674))\n- **angular.element:** do not break on `cleanData()` if `_data()` returns undefined\n ([7cf4a2](https://github.com/angular/angular.js/commit/7cf4a2933cb017e45b0c97b0a836cbbd905ee31a),\n [#16641](https://github.com/angular/angular.js/issues/16641),\n [#16642](https://github.com/angular/angular.js/issues/16642))\n- **ngAria:** do not scroll when pressing spacebar on custom buttons\n ([3a517c](https://github.com/angular/angular.js/commit/3a517c25f677294a7a9eca1660654a3edcc9e103),\n [#14665](https://github.com/angular/angular.js/issues/14665),\n [#16604](https://github.com/angular/angular.js/issues/16604))\n\n\n## New Features\n- **$compile:** add support for arbitrary DOM property and event bindings\n ([a5914c](https://github.com/angular/angular.js/commit/a5914c94a8fa5b1eceeab9e4e6849cbf467bc26d),\n [#16428](https://github.com/angular/angular.js/issues/16428),\n [#16235](https://github.com/angular/angular.js/issues/16235),\n [#16614](https://github.com/angular/angular.js/issues/16614))\n- **ngMock:** add `$flushPendingTasks()` and `$verifyNoPendingTasks()`\n ([6f7674](https://github.com/angular/angular.js/commit/6f7674a7d063d434205f75f5b861f167e8125999),\n [#14336](https://github.com/angular/angular.js/issues/14336))\n- **core:** implement more granular pending task tracking\n ([17b139](https://github.com/angular/angular.js/commit/17b139f107e5471a9351af638093a8e13a69e42a))\n- **$animate:** add option data to event callbacks\n ([fc64e6](https://github.com/angular/angular.js/commit/fc64e6807642512b567deb52b497bd2bff570a1f),\n [#12697](https://github.com/angular/angular.js/issues/12697),\n [#13059](https://github.com/angular/angular.js/issues/13059))\n- **form.FormController:** add $getControls()\n ([c9d1e6](https://github.com/angular/angular.js/commit/c9d1e690aa597283373b78e646676fa8f1ba1b4d),\n [#16601](https://github.com/angular/angular.js/issues/16601),\n [#14749](https://github.com/angular/angular.js/issues/14749),\n [#14517](https://github.com/angular/angular.js/issues/14517),\n [#13202](https://github.com/angular/angular.js/issues/13202))\n- **ngModelOptions:** add `timeStripZeroSeconds` and `timeSecondsFormat`\n ([b68221](https://github.com/angular/angular.js/commit/b682213d72d65c996a6a31ea57b79d4c4f4e3c98),\n [#10721](https://github.com/angular/angular.js/issues/10721),\n [#16510](https://github.com/angular/angular.js/issues/16510),\n [#16584](https://github.com/angular/angular.js/issues/16584))\n\n\n## Performance Improvements\n- **ngAnimate:** avoid repeated calls to addClass/removeClass when animation has no duration\n ([093635](https://github.com/angular/angular.js/commit/0936353e9a03f072bc3c4056888fd154a96530ef),\n [#14165](https://github.com/angular/angular.js/issues/14165),\n [#14166](https://github.com/angular/angular.js/issues/14166),\n [#16613](https://github.com/angular/angular.js/issues/16613))\n\n\n\n# 1.7.2 extreme-compatiplication (2018-06-12)\n\nIn the previous release, we removed a private, undocumented API that was no longer used by\nAngularJS. It turned out that several popular UI libraries (such as\n[AngularJS Material](https://material.angularjs.org/),\n[UI Bootstrap](https://angular-ui.github.io/bootstrap/),\n[ngDialog](http://likeastore.github.io/ngDialog/) and probably others) relied on that API.\n\nIn order to avoid unnecessary pain for developers, this release reverts the removal of the private\nAPI and restores compatibility of the aforementioned libraries with the latest AngularJS.\n\n## Reverts\n- **$compile:** remove `preAssignBindingsEnabled` leftovers\n ([2da495](https://github.com/angular/angular.js/commit/2da49504065e9e2b71a7a5622e45118d8abbe87e),\n [#16580](https://github.com/angular/angular.js/pull/16580),\n [a81232](https://github.com/angular/angular.js/commit/a812327acda8bc890a4c4e809f0debb761c29625),\n [#16595](https://github.com/angular/angular.js/pull/16595))\n\n\n\n# 1.7.1 momentum-defiance (2018-06-08)\n\n\n## Bug Fixes\n- **$compile:** support transcluding multi-element directives\n ([789db8](https://github.com/angular/angular.js/commit/789db83a8ae0e2db5db13289b2c29e56093d967a),\n [#15554](https://github.com/angular/angular.js/issues/15554),\n [#15555](https://github.com/angular/angular.js/issues/15555))\n- **ngModel:** do not throw if view value changes on destroyed scope\n ([2b6c98](https://github.com/angular/angular.js/commit/2b6c9867369fd3ef1ddb687af1153478ab62ee1b),\n [#16583](https://github.com/angular/angular.js/issues/16583),\n [#16585](https://github.com/angular/angular.js/issues/16585))\n\n\n## New Features\n- **$compile:** add one-way collection bindings\n ([f9d1ca](https://github.com/angular/angular.js/commit/f9d1ca20c38f065f15769fbe23aee5314cb58bd4),\n [#14039](https://github.com/angular/angular.js/issues/14039),\n [#16553](https://github.com/angular/angular.js/issues/16553),\n [#15874](https://github.com/angular/angular.js/issues/15874))\n- **ngRef:** add directive to publish controller, or element into scope\n ([bf841d](https://github.com/angular/angular.js/commit/bf841d35120bf3c4655fde46af4105c85a0f1cdc),\n [#16511](https://github.com/angular/angular.js/issues/16511))\n- **errorHandlingConfig:** add option to exclude error params from url\n ([3d6c45](https://github.com/angular/angular.js/commit/3d6c45d76e30b1b3c4eb9672cf4a93e5251c06b3),\n [#14744](https://github.com/angular/angular.js/issues/14744),\n [#15707](https://github.com/angular/angular.js/issues/15707),\n [#16283](https://github.com/angular/angular.js/issues/16283),\n [#16299](https://github.com/angular/angular.js/issues/16299),\n [#16591](https://github.com/angular/angular.js/issues/16591))\n- **ngAria:** add support for ignoring a specific element\n ([7d9d38](https://github.com/angular/angular.js/commit/7d9d387195292cb5e04984602b752d31853cfea6),\n [#14602](https://github.com/angular/angular.js/issues/14602),\n [#14672](https://github.com/angular/angular.js/issues/14672),\n [#14833](https://github.com/angular/angular.js/issues/14833))\n- **ngCookies:** support samesite option\n ([10a229](https://github.com/angular/angular.js/commit/10a229ce1befdeaf6295d1635dc11391c252a91a),\n [#16543](https://github.com/angular/angular.js/issues/16543),\n [#16544](https://github.com/angular/angular.js/issues/16544))\n- **ngMessages:** add support for default message\n ([a8c263](https://github.com/angular/angular.js/commit/a8c263c1947cc85ee60b4732f7e4bcdc7ba463e8),\n [#12008](https://github.com/angular/angular.js/issues/12008),\n [#12213](https://github.com/angular/angular.js/issues/12213),\n [#16587](https://github.com/angular/angular.js/issues/16587))\n- **ngMock, ngMockE2E:** add option to match latest definition for `$httpBackend` request\n ([773f39](https://github.com/angular/angular.js/commit/773f39c9345479f5f8b6321236ce6ad96f77aa92),\n [#16251](https://github.com/angular/angular.js/issues/16251),\n [#11637](https://github.com/angular/angular.js/issues/11637),\n [#16560](https://github.com/angular/angular.js/issues/16560))\n- **$route:** add support for the `reloadOnUrl` configuration option\n ([f4f571](https://github.com/angular/angular.js/commit/f4f571efdf86d6acbcd5c6b1de66b4b33a259125),\n [#7925](https://github.com/angular/angular.js/issues/7925),\n [#15002](https://github.com/angular/angular.js/issues/15002))\n\n\n\n# 1.7.0 nonexistent-physiology (2018-05-11)\n\n**Here are the full changes for the release of 1.7.0 that are not already released in the 1.6.x branch,\nwhich includes commits from 1.7.0-rc.0 and commits from 1.7.0 directly.**\n\n1.7.0 is the last scheduled release of AngularJS that includes breaking changes. 1.7.x patch\nreleases will continue to receive bug fixes and non-breaking features until AngularJS enters Long\nTerm Support mode (LTS) on July 1st 2018.\n\n## Bug Fixes\n- **input:**\n - listen on \"change\" instead of \"click\" for radio/checkbox ngModels\n ([656c8f](https://github.com/angular/angular.js/commit/656c8fa8f23b1277cc5c214c4d0237f3393afa1e),\n [#4516](https://github.com/angular/angular.js/issues/4516),\n [#14667](https://github.com/angular/angular.js/issues/14667),\n [#14685](https://github.com/angular/angular.js/issues/14685))\n- **input\\[number\\]:** validate min/max against viewValue\n ([aa3f95](https://github.com/angular/angular.js/commit/aa3f951330ec7b10b43ea884d9b5754e296770ec),\n [#12761](https://github.com/angular/angular.js/issues/12761),\n [#16325](https://github.com/angular/angular.js/issues/16325))\n- **input\\[date\\]:** correctly parse 2-digit years\n ([627180](https://github.com/angular/angular.js/commit/627180fb71b92048d5b9ca2606b9eff1fd99387e),\n [#16537](https://github.com/angular/angular.js/issues/16537),\n [#16539](https://github.com/angular/angular.js/issues/16539))\n- **jqLite:** make removeData() not remove event handlers\n ([b7d396](https://github.com/angular/angular.js/commit/b7d396b8b6e8f27a1f4556d58fc903321e8d532a),\n [#15869](https://github.com/angular/angular.js/issues/15869),\n [#16512](https://github.com/angular/angular.js/issues/16512))\n- **$compile:**\n - remove the preAssignBindingsEnabled flag\n ([38f8c9](https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb),\n [#15782](https://github.com/angular/angular.js/issues/15782))\n - add `base[href]` to the list of RESOURCE_URL context attributes\n ([1cf728](https://github.com/angular/angular.js/commit/1cf728e209a9e0016068fac2769827e8f747760e),\n [#15597](https://github.com/angular/angular.js/issues/15597))\n- **$interval:** throw when trying to cancel non-$interval promise\n ([a8bef9](https://github.com/angular/angular.js/commit/a8bef95127775d83d80daa4617c33227c4b443d4),\n [#16424](https://github.com/angular/angular.js/issues/16424),\n [#16476](https://github.com/angular/angular.js/issues/16476))\n- **$timeout:** throw when trying to cancel non-$timeout promise\n ([336525](https://github.com/angular/angular.js/commit/3365256502344970f86355d3ace1cb4251ae9828),\n [#16424](https://github.com/angular/angular.js/issues/16424),\n [#16476](https://github.com/angular/angular.js/issues/16476))\n- **$cookies:** remove the deprecated $cookieStore factory\n ([73c646](https://github.com/angular/angular.js/commit/73c6467f1468353215dc689c019ed83aa4993c77),\n [#16465](https://github.com/angular/angular.js/issues/16465))\n- **$resource:** fix interceptors and success/error callbacks\n ([ea0585](https://github.com/angular/angular.js/commit/ea0585773bb93fd891576e2271254a17e15f1ddd),\n [#6731](https://github.com/angular/angular.js/issues/6731),\n [#9334](https://github.com/angular/angular.js/issues/9334),\n [#6865](https://github.com/angular/angular.js/issues/6865),\n [#16446](https://github.com/angular/angular.js/issues/16446))\n- **$templateRequest:**\n - give tpload error the correct namespace\n ([c617d6](https://github.com/angular/angular.js/commit/c617d6dceee5b000bfceda44ced22fc16b48b18b))\n - always return the template that is stored in the cache\n ([fb0099](https://github.com/angular/angular.js/commit/fb00991460cf69ae8bc7f1f826363d09c73c0d5e),\n [#16225](https://github.com/angular/angular.js/issues/16225))\n- **$animate:** let cancel() reject the runner promise\n ([16b82c](https://github.com/angular/angular.js/commit/16b82c6afe0ab916fef1d6ca78053b00bf5ada83),\n [#14204](https://github.com/angular/angular.js/issues/14204),\n [#16373](https://github.com/angular/angular.js/issues/16373))\n- **ngTouch:**\n - deprecate the module and its contents\n ([67f54b](https://github.com/angular/angular.js/commit/67f54b660038de2b4346b3e76d66a8dc8ccb1f9b),\n [#16427](https://github.com/angular/angular.js/issues/16427),\n [#16431](https://github.com/angular/angular.js/issues/16431))\n - remove ngClick override, `$touchProvider`, and `$touch`\n ([11d9ad](https://github.com/angular/angular.js/commit/11d9ad1eb25eaf5967195e424108207427835d50),\n [#15761](https://github.com/angular/angular.js/issues/15761),\n [#15755](https://github.com/angular/angular.js/issues/15755))\n- **ngScenario:** completely remove the angular scenario runner\n ([0cd392](https://github.com/angular/angular.js/commit/0cd39217828b0ad53eaf731576af17d66c18ff60),\n [#9405](https://github.com/angular/angular.js/issues/9405))\n- **form:** set $submitted to true on child forms when parent is submitted\n ([223de5](https://github.com/angular/angular.js/commit/223de59e988dc0cc8b4ec3a045b7c0735eba1c77),\n [#10071](https://github.com/angular/angular.js/issues/10071))\n- **$rootScope:**\n - provide correct value of one-time bindings in watchGroup\n ([c2b8fa](https://github.com/angular/angular.js/commit/c2b8fab0a480204374d561d6b9b3d47347ac5570))\n - don't allow explicit digest calls to affect $evalAsync\n ([02c046](https://github.com/angular/angular.js/commit/02c04690da16a9bef55694f5db0b8368dc0125c9),\n [#15127](https://github.com/angular/angular.js/issues/15127),\n [#15494](https://github.com/angular/angular.js/issues/15494))\n- **ngAria:** do not set aria attributes on input[type=\"hidden\"]\n ([6d5ef3](https://github.com/angular/angular.js/commit/6d5ef34fc6a974cde73157ba94f9706723dd8f5b),\n [#15113](https://github.com/angular/angular.js/issues/15113),\n [#16367](https://github.com/angular/angular.js/issues/16367))\n- **ngModel, input:** improve handling of built-in named parsers\n ([74b04c](https://github.com/angular/angular.js/commit/74b04c9403af4fc7df5b6420f22c9f45a3e84140),\n [#14292](https://github.com/angular/angular.js/issues/14292),\n [#10076](https://github.com/angular/angular.js/issues/10076),\n [#16347](https://github.com/angular/angular.js/issues/16347))\n- **$httpParamSerializerJQLike:**\n - call functions as jQuery does\n ([a784fa](https://github.com/angular/angular.js/commit/a784fab605d825f1158c6292b3c42f8c4a502fdf),\n [#16138](https://github.com/angular/angular.js/issues/16138),\n [#16139](https://github.com/angular/angular.js/issues/16139))\n - follow jQuery for `null` and `undefined`\n ([301fdd](https://github.com/angular/angular.js/commit/301fdda648680d89ccab607c413a7ddede7b0165))\n- **$parse:**\n - do not pass scope/locals to interceptors of one-time bindings\n ([87a586](https://github.com/angular/angular.js/commit/87a586eb9a23cfd0d0bb681cc778b4b8e5c8451d))\n - always pass the intercepted value to watchers\n ([2ee503](https://github.com/angular/angular.js/commit/2ee5033967d5f87a516bad137686b0592e25d26b),\n [#16021](https://github.com/angular/angular.js/issues/16021))\n - respect the interceptor.$stateful flag\n ([de7403](https://github.com/angular/angular.js/commit/de74034ddf6f92505ccdb61be413a6df2c723f87))\n- **Angular:** remove `angular.lowercase` and `angular.uppercase`\n ([1daa4f](https://github.com/angular/angular.js/commit/1daa4f2231a89ee88345689f001805ffffa9e7de),\n [#15445](https://github.com/angular/angular.js/issues/15445))\n- **$controller:** remove instantiating controllers defined on window\n ([e269c1](https://github.com/angular/angular.js/commit/e269c14425a3209040f65c022658770e00a36f16),\n [#15349](https://github.com/angular/angular.js/issues/15349),\n [#15762](https://github.com/angular/angular.js/issues/15762))\n\n\n## New Features\n- **angular.isArray:** support Array subclasses in `angular.isArray()`\n ([e3ece2](https://github.com/angular/angular.js/commit/e3ece2fad9e1e6d47b5f06815ff186d7e6f44948),\n [#15533](https://github.com/angular/angular.js/issues/15533),\n [#15541](https://github.com/angular/angular.js/issues/15541))\n- **$sce:** handle URL sanitization through the `$sce` service\n ([1e9ead](https://github.com/angular/angular.js/commit/1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9))\n- **orderBy:** consider `null` and `undefined` greater than other values\n ([1d8046](https://github.com/angular/angular.js/commit/1d804645f7656d592c90216a0355b4948807f6b8),\n [#15294](https://github.com/angular/angular.js/issues/15294),\n [#16376](https://github.com/angular/angular.js/issues/16376))\n- **$resource:** add support for `request` and `requestError` interceptors (#15674)\n ([240a3d](https://github.com/angular/angular.js/commit/240a3ddbf12a9bb79754031be95dae4b6bd2dded),\n [#5146](https://github.com/angular/angular.js/issues/5146))\n- **ngModelOptions:** add debounce catch-all + allow debouncing 'default' only\n ([55ba44](https://github.com/angular/angular.js/commit/55ba44913e02650b56410aa9ab5eeea5d3492b68),\n [#15411](https://github.com/angular/angular.js/issues/15411),\n [#16335](https://github.com/angular/angular.js/issues/16335))\n- **$compile:** lower the `xlink:href` security context for SVG's `a` and `image` elements\n ([6ccbfa](https://github.com/angular/angular.js/commit/6ccbfa65d60a3dc396d0cf6da21b993ad74653fd),\n [#15736](https://github.com/angular/angular.js/issues/15736))\n\n\n## Performance Improvements\n- **$rootScope:** allow $watchCollection use of expression input watching\n ([97b00c](https://github.com/angular/angular.js/commit/97b00ca497676aaff8a803762a9f8c7ff4aa24dd))\n- **ngStyle:** use $watchCollection\n ([15bbd3](https://github.com/angular/angular.js/commit/15bbd3e18cd89b91f7206a06c73d40e54a8a48a0),\n [#15947](https://github.com/angular/angular.js/issues/15947))\n- **$compile:** do not use deepWatch in literal one-way bindings\n ([fd4f01](https://github.com/angular/angular.js/commit/fd4f0111188b62773b99ab6eab38b4d2b5d8d727),\n [#15301](https://github.com/angular/angular.js/issues/15301))\n\n\n\n\n## Breaking Changes\n\n### **jqLite** due to:\n - **[b7d396](https://github.com/angular/angular.js/commit/b7d396b8b6e8f27a1f4556d58fc903321e8d532a)**: make removeData() not remove event handlers\n\nBefore this commit `removeData()` invoked on an element removed its event\nhandlers as well. If you want to trigger a full cleanup of an element, change:\n\n```js\nelem.removeData();\n```\n\nto:\n\n```js\nangular.element.cleanData(elem);\n```\n\nIn most cases, though, cleaning up after an element is supposed to be done\nonly when it's removed from the DOM as well; in such cases the following:\n\n```js\nelem.remove();\n```\n\nwill remove event handlers as well.\n\n### **$cookies** due to:\n - **[73c646](https://github.com/angular/angular.js/commit/73c6467f1468353215dc689c019ed83aa4993c77)**: remove the deprecated $cookieStore factory\n\nThe $cookieStore has been removed. Migrate to the $cookies service. Note that\nfor object values you need to use the `putObject` & `getObject` methods as\n`get`/`put` will not correctly save/retrieve them.\n\nBefore:\n```js\n$cookieStore.put('name', {key: 'value'});\n$cookieStore.get('name'); // {key: 'value'}\n$cookieStore.remove('name');\n```\n\nAfter:\n```js\n$cookies.putObject('name', {key: 'value'});\n$cookies.getObject('name'); // {key: 'value'}\n$cookies.remove('name');\n```\n\n### **$resource** due to:\n - **[ea0585](https://github.com/angular/angular.js/commit/ea0585773bb93fd891576e2271254a17e15f1ddd)**: fix interceptors and success/error callbacks\n\nIf you are not using `success` or `error` callbacks with `$resource`,\nyour app should not be affected by this change.\n\nIf you are using `success` or `error` callbacks (with or without\nresponse interceptors), one (subtle) difference is that throwing an\nerror inside the callbacks will not propagate to the returned\n`$promise`. Therefore, you should try to use the promises whenever\npossible. E.g.:\n\n```js\n// Avoid\nUser.query(function onSuccess(users) { throw new Error(); }).\n $promise.\n catch(function onError() { /* Will not be called. */ });\n\n// Prefer\nUser.query().\n $promise.\n then(function onSuccess(users) { throw new Error(); }).\n catch(function onError() { /* Will be called. */ });\n```\n\nFinally, if you are using `success` or `error` callbacks with response\ninterceptors, the callbacks will now always run _after_ the interceptors\n(and wait for them to resolve in case they return a promise).\nPreviously, the `error` callback was called before the `responseError`\ninterceptor and the `success` callback was synchronously called after\nthe `response` interceptor. E.g.:\n\n```js\nvar User = $resource('/api/users/:id', {id: '@id'}, {\n get: {\n method: 'get',\n interceptor: {\n response: function(response) {\n console.log('responseInterceptor-1');\n return $timeout(1000).then(function() {\n console.log('responseInterceptor-2');\n return response.resource;\n });\n },\n responseError: function(response) {\n console.log('responseErrorInterceptor-1');\n return $timeout(1000).then(function() {\n console.log('responseErrorInterceptor-2');\n return $q.reject('Ooops!');\n });\n }\n }\n }\n});\nvar onSuccess = function(value) { console.log('successCallback', value); };\nvar onError = function(error) { console.log('errorCallback', error); };\n\n// Assuming the following call is successful...\nUser.get({id: 1}, onSuccess, onError);\n // Old behavior:\n // responseInterceptor-1\n // successCallback, {/* Promise object */}\n // responseInterceptor-2\n // New behavior:\n // responseInterceptor-1\n // responseInterceptor-2\n // successCallback, {/* User object */}\n\n// Assuming the following call returns an error...\nUser.get({id: 2}, onSuccess, onError);\n // Old behavior:\n // errorCallback, {/* Response object */}\n // responseErrorInterceptor-1\n // responseErrorInterceptor-2\n // New behavior:\n // responseErrorInterceptor-1\n // responseErrorInterceptor-2\n // errorCallback, Ooops!\n```\n\n - **[240a3d](https://github.com/angular/angular.js/commit/240a3ddbf12a9bb79754031be95dae4b6bd2dded)**: add support for `request` and `requestError` interceptors (#15674)\n\nPreviously, calling a `$resource` method would synchronously call\n`$http`. Now, it will be called asynchronously (regardless if a\n`request`/`requestError` interceptor has been defined.\n\nThis is not expected to affect applications at runtime, since the\noverall operation is asynchronous already, but may affect assertions in\ntests. For example, if you want to assert that `$http` has been called\nwith specific arguments as a result of a `$resource` call, you now need\nto run a `$digest` first, to ensure the (possibly empty) request\ninterceptor promise has been resolved.\n\nBefore:\n```js\nit('...', function() {\n $httpBackend.expectGET('/api/things').respond(...);\n var Things = $resource('/api/things');\n Things.query();\n\n expect($http).toHaveBeenCalledWith(...);\n});\n```\n\nAfter:\n```js\nit('...', function() {\n $httpBackend.expectGET('/api/things').respond(...);\n var Things = $resource('/api/things');\n Things.query();\n $rootScope.$digest();\n\n expect($http).toHaveBeenCalledWith(...);\n});\n```\n\n### **$templateRequest**:\n - due to **[c617d6](https://github.com/angular/angular.js/commit/c617d6dceee5b000bfceda44ced22fc16b48b18b)**: give tpload error the correct namespace\n\nPreviously the `tpload` error was namespaced to `$compile`. If you have\ncode that matches errors of the form `[$compile:tpload]` it will no\nlonger run. You should change the code to match\n`[$templateRequest:tpload]`.\n\n - due to **([fb0099](https://github.com/angular/angular.js/commit/fb00991460cf69ae8bc7f1f826363d09c73c0d5e)**: always return the template that is stored in the cache\n\nThe service now returns the result of `$templateCache.put()` when making a server request to the\ntemplate. Previously it would return the content of the response directly.\nThis now means if you are decorating `$templateCache.put()` to manipulate the template, you will\nnow get this manipulated result also on the first `$templateRequest` rather than only on subsequent\ncalls (when the template is retrived from the cache).\nIn practice this should not affect any apps, as it is unlikely that they rely on the template being\ndifferent in the first and subsequent calls.\n\n### **$animate** due to:\n - **[16b82c](https://github.com/angular/angular.js/commit/16b82c6afe0ab916fef1d6ca78053b00bf5ada83)**: let cancel() reject the runner promise\n\n$animate.cancel(runner) now rejects the underlying\npromise and calls the catch() handler on the runner\nreturned by $animate functions (enter, leave, move,\naddClass, removeClass, setClass, animate).\nPreviously it would resolve the promise as if the animation\nhad ended successfully.\n\nExample:\n\n```js\nvar runner = $animate.addClass('red');\nrunner.then(function() { console.log('success')});\nrunner.catch(function() { console.log('cancelled')});\n\nrunner.cancel();\n```\n\nPre-1.7.0, this logs 'success', 1.7.0 and later it logs 'cancelled'.\nTo migrate, add a catch() handler to your animation runners.\n\n### **angular.isArray** due to:\n - **[e3ece2](https://github.com/angular/angular.js/commit/e3ece2fad9e1e6d47b5f06815ff186d7e6f44948)**: support Array subclasses in `angular.isArray()`\n\nPreviously, `angular.isArray()` was an alias for `Array.isArray()`.\nTherefore, objects that prototypally inherit from `Array` where not\nconsidered arrays. Now such objects are considered arrays too.\n\nThis change affects several other methods that use `angular.isArray()`\nunder the hood, such as `angular.copy()`, `angular.equals()`,\n`angular.forEach()`, and `angular.merge()`.\n\nThis in turn affects how dirty checking treats objects that prototypally\ninherit from `Array` (e.g. MobX observable arrays). AngularJS will now\nbe able to handle these objects better when copying or watching.\n\n### **$sce** :\n - due to **[1e9ead](https://github.com/angular/angular.js/commit/1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9)**: handle URL sanitization through the `$sce` service\n\nIf you use `attrs.$set` for URL attributes (a[href] and img[src]) there will no\nlonger be any automated sanitization of the value. This is in line with other\nprogrammatic operations, such as writing to the innerHTML of an element.\n\nIf you are programmatically writing URL values to attributes from untrusted\ninput then you must sanitize it yourself. You could write your own sanitizer or copy\nthe private `$$sanitizeUri` service.\n\nNote that values that have been passed through the `$interpolate` service within the\n`URL` or `MEDIA_URL` will have already been sanitized, so you would not need to sanitize\nthese values again.\n\n - due to **[1e9ead](https://github.com/angular/angular.js/commit/1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9)**: handle URL sanitization through the `$sce` service\n\nbinding `trustAs()` and the short versions (`trustAsResourceUrl()` et al.) to\n`ngSrc`, `ngSrcset`, and `ngHref` will now raise an infinite digest error:\n\n```js\n $scope.imgThumbFn = function(id) {\n return $sce.trustAsResourceUrl(someService.someUrl(id));\n };\n```\n\n```html\n \n```\nThis is because the `$interpolate` service is now responsible for sanitizing\nthe attribute value, and its watcher receives a new object from `trustAs()`\non every digest.\nTo migrate, compute the trusted value only when the input value changes:\n\n```js\n $scope.$watch('imgId', function(id) {\n $scope.imgThumb = $sce.trustAsResourceUrl(someService.someUrl(id));\n });\n```\n\n```html\n \n```\n\n### **orderBy** due to:\n - **[1d8046](https://github.com/angular/angular.js/commit/1d804645f7656d592c90216a0355b4948807f6b8)**: consider `null` and `undefined` greater than other values\n\nWhen using `orderBy` to sort arrays containing `null` values, the `null` values\nwill be considered \"greater than\" all other values, except for `undefined`.\nPreviously, they were sorted as strings. This will result in different (but more\nintuitive) sorting order.\n\nBefore:\n```js\norderByFilter(['a', undefined, 'o', null, 'z']);\n//--> 'a', null, 'o', 'z', undefined\n```\n\nAfter:\n```js\norderByFilter(['a', undefined, 'o', null, 'z']);\n//--> 'a', 'o', 'z', null, undefined\n```\n\n### **ngScenario** due to:\n - **[0cd392](https://github.com/angular/angular.js/commit/0cd39217828b0ad53eaf731576af17d66c18ff60)**: completely remove the angular scenario runner\n\nThe angular scenario runner end-to-end test framework has been\nremoved from the project and will no longer be available on npm\nor bower starting with 1.7.0.\nIt was deprecated and removed from the documentation in 2014.\nApplications that still use it should migrate to\n[Protractor](http://www.protractortest.org).\nTechnically, it should also be possible to continue using an\nolder version of the scenario runner, as the underlying APIs have\nnot changed. However, we do not guarantee future compatibility.\n\n### **form** due to:\n - **[223de5](https://github.com/angular/angular.js/commit/223de59e988dc0cc8b4ec3a045b7c0735eba1c77)**: set $submitted to true on child forms when parent is submitted\n\nForms will now set $submitted on child forms when they are submitted.\nFor example:\n```\n
\n \n \n \n \n
\n```\n\nSubmitting this form will set $submitted on \"parentform\" and \"childform\".\nPreviously, it was only set on \"parentform\".\n\nThis change was introduced because mixing form and ngForm does not create\nlogically separate forms, but rather something like input groups.\nTherefore, child forms should inherit the submission state from their parent form.\n\n### **ngAria** due to:\n - **[6d5ef3](https://github.com/angular/angular.js/commit/6d5ef34fc6a974cde73157ba94f9706723dd8f5b)**: do not set aria attributes on input[type=\"hidden\"]\n\nngAria no longer sets aria-* attributes on input[type=\"hidden\"] with ngModel.\nThis can affect apps that test for the presence of aria attributes on hidden inputs.\nTo migrate, remove these assertions.\nIn actual apps, this should not have a user-facing effect, as the previous behavior\nwas incorrect, and the new behavior is correct for accessibility.\n\n### **ngModel, input** due to:\n - **[74b04c](https://github.com/angular/angular.js/commit/74b04c9403af4fc7df5b6420f22c9f45a3e84140)**: improve handling of built-in named parsers\n\n*Custom* parsers that fail to parse on input types \"email\", \"url\", \"number\", \"date\", \"month\",\n\"time\", \"datetime-local\", \"week\", do no longer set `ngModelController.$error[inputType]`, and\nthe `ng-invalid-[inputType]` class. Also, custom parsers on input type \"range\" do no\nlonger set `ngModelController.$error.number` and the `ng-invalid-number` class.\n\nInstead, any custom parsers on these inputs set `ngModelController.$error.parse` and\n`ng-invalid-parse`. This change was made to make distinguishing errors from built-in parsers\nand custom parsers easier.\n\n### **ngModelOptions** due to:\n - **[55ba44](https://github.com/angular/angular.js/commit/55ba44913e02650b56410aa9ab5eeea5d3492b68)**: add debounce catch-all + allow debouncing 'default' only\n\nthe 'default' key in 'debounce' now only debounces the default event, i.e. the event\nthat is added as an update trigger by the different input directives automatically.\n\nPreviously, it also applied to other update triggers defined in 'updateOn' that\ndid not have a corresponding key in the 'debounce'.\n\nThis behavior is now supported via a special wildcard / catch-all key: '*'.\n\nSee the following example:\n\nPre-1.7:\n'mouseup' is also debounced by 500 milliseconds because 'default' is applied:\n```\nng-model-options=\"{\n updateOn: 'default blur mouseup',\n debounce: { 'default': 500, 'blur': 0 }\n}\n```\n\n1.7:\nThe pre-1.7 behavior can be re-created by setting '*' as a catch-all debounce value:\n```\nng-model-options=\"{\n updateOn: 'default blur mouseup',\n debounce: { '*': 500, 'blur': 0 }\n}\n```\n\nIn contrast, when only 'default' is used, 'blur' and 'mouseup' are not debounced:\n```\nng-model-options=\"{\n updateOn: 'default blur mouseup',\n debounce: { 'default': 500 }\n}\n```\n\n### **input\\[number\\]** due to:\n - **[aa3f95](https://github.com/angular/angular.js/commit/aa3f951330ec7b10b43ea884d9b5754e296770ec)**: validate min/max against viewValue\n\n`input[type=number]` with `ngModel` now validates the input for the `max`/`min` restriction against\nthe `ngModelController.$viewValue` instead of against the `ngModelController.$modelValue`.\n\nThis affects apps that use `$parsers` or `$formatters` to transform the input / model value.\n\nIf you rely on the $modelValue validation, you can overwrite the `min`/`max` validator from a custom directive, as seen in the following example directive definition object:\n\n```\n{\n restrict: 'A',\n require: 'ngModel',\n link: function(scope, element, attrs, ctrl) {\n var maxValidator = ctrl.$validators.max;\n\n ctrl.$validators.max = function(modelValue, viewValue) {\n return maxValidator(modelValue, modelValue);\n };\n }\n}\n```\n\n### **input** due to:\n - **[656c8f](https://github.com/angular/angular.js/commit/656c8fa8f23b1277cc5c214c4d0237f3393afa1e)**: listen on \"change\" instead of \"click\" for radio/checkbox ngModels\n\n`input[radio]` and `input[checkbox]` now listen to the \"change\" event instead of the \"click\" event.\nMost apps should not be affected, as \"change\" is automatically fired by browsers after \"click\"\nhappens.\n\nTwo scenarios might need migration:\n\n- Custom click events:\n\nBefore this change, custom click event listeners on radio / checkbox would be called after the\ninput element and `ngModel` had been updated, unless they were specifically registered before\nthe built-in click handlers.\nAfter this change, they are called before the input is updated, and can call event.preventDefault()\nto prevent the input from updating.\n\nIf an app uses a click event listener that expects ngModel to be updated when it is called, it now\nneeds to register a change event listener instead.\n\n- Triggering click events:\n\nConventional trigger functions:\n\nThe change event might not be fired when the input element is not attached to the document. This\ncan happen in **tests** that compile input elements and\ntrigger click events on them. Depending on the browser (Chrome and Safari) and the trigger method,\nthe change event will not be fired when the input isn't attached to the document.\n\nBefore:\n\n```js\n it('should update the model', inject(function($compile, $rootScope) {\n var inputElm = $compile('')($rootScope);\n\n inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()\n expect($rootScope.checkbox).toBe(true);\n });\n```\n\nWith this patch, `$rootScope.checkbox` might not be true, because the click event\nhasn't triggered the change event. To make the test, work append the inputElm to the app's\n`$rootElement`, and the `$rootElement` to the `$document`.\n\nAfter:\n\n```js\n it('should update the model', inject(function($compile, $rootScope, $rootElement, $document) {\n var inputElm = $compile('')($rootScope);\n\n $rootElement.append(inputElm);\n $document.append($rootElement);\n\n inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()\n expect($rootScope.checkbox).toBe(true);\n });\n```\n\n`triggerHandler()`:\n\nIf you are using this jQuery / jqLite function on the input elements, you don't have to attach\nthe elements to the document, but instead change the triggered event to \"change\". This is because\n`triggerHandler(event)` only triggers the exact event when it has been added by jQuery / jqLite.\n\n### **ngStyle** due to:\n - **[15bbd3](https://github.com/angular/angular.js/commit/15bbd3e18cd89b91f7206a06c73d40e54a8a48a0)**: use $watchCollection\n\nPreviously the use of deep watch by ng-style would trigger styles to be\nre-applied when nested state changed. Now only changes to direct\nproperties of the watched object will trigger changes.\n\n### **$compile** due to:\n - **[38f8c9](https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb)**: remove the preAssignBindingsEnabled flag\n\nPreviously, the `$compileProvider.preAssignBindingsEnabled` flag was supported.\nThe flag controlled whether bindings were available inside the controller\nconstructor or only in the `$onInit` hook. The bindings are now no longer\navailable in the constructor.\n\nTo migrate your code:\n\n1. If you haven't invoked `$compileProvider.preAssignBindingsEnabled()` you\ndon't have to do anything to migrate.\n\n2. If you specified `$compileProvider.preAssignBindingsEnabled(false)`, you\ncan remove that statement - since AngularJS 1.6.0 this is the default so your\napp should still work even in AngularJS 1.6 after such removal. Afterwards,\nmigrating to AngularJS 1.7.0 shouldn't require any further action.\n\n3. If you specified `$compileProvider.preAssignBindingsEnabled(true)` you need\nto first migrate your code so that the flag can be flipped to `false`. The\ninstructions on how to do that are available in the \"Migrating from 1.5 to 1.6\"\nguide:\nhttps://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6\nAfterwards, remove the `$compileProvider.preAssignBindingsEnabled(true)`\nstatement.\n\n - **[6ccbfa](https://github.com/angular/angular.js/commit/6ccbfa65d60a3dc396d0cf6da21b993ad74653fd)**: lower the `xlink:href` security context for SVG's `a` and `image` elements\n\nIn the unlikely case that an app relied on RESOURCE_URL whitelisting for the\npurpose of binding to the `xlink:href` property of SVG's `` or ``\nelements and if the values do not pass the regular URL sanitization, they will\nbreak.\n\nTo fix this you need to ensure that the values used for binding to the affected\n`xlink:href` contexts are considered safe URLs, e.g. by whitelisting them in\n`$compileProvider`'s `aHrefSanitizationWhitelist` (for `` elements) or\n`imgSrcSanitizationWhitelist` (for `` elements).\n\n - **[fd4f01](https://github.com/angular/angular.js/commit/fd4f0111188b62773b99ab6eab38b4d2b5d8d727)**: do not use deepWatch in literal one-way bindings\n\nPreviously when a literal value was passed into a directive/component via\none-way binding it would be watched with a deep watcher.\n\nFor example, for ``, a new instance of the array\nwould be passed into the directive/component (and trigger $onChanges) not\nonly if `a` changed but also if any sub property of `a` changed such as\n`a.b` or `a.b.c.d.e` etc.\n\nThis also means a new but equal value for `a` would NOT trigger such a\nchange.\n\nNow literal values use an input-based watch similar to other directive/component\none-way bindings. In this context inputs are the non-constant parts of the\nliteral. In the example above the input would be `a`. Changes are only\ntriggered when the inputs to the literal change.\n\n - **[1cf728](https://github.com/angular/angular.js/commit/1cf728e209a9e0016068fac2769827e8f747760e)**: add `base[href]` to the list of RESOURCE_URL context attributes\n\nPreviously, `` would not require `baseUrl` to\nbe trusted as a RESOURCE_URL. Now, `baseUrl` will be sent to `$sce`'s\nRESOURCE_URL checks. By default, it will break unless `baseUrl` is of the same\norigin as the application document.\n\nRefer to the\n[`$sce` API docs](https://code.angularjs.org/snapshot/docs/api/ng/service/$sce)\nfor more info on how to trust a value in a RESOURCE_URL context.\n\nAlso, concatenation in trusted contexts is not allowed, which means that the\nfollowing won't work: ``.\n\nEither construct complex values in a controller (recommended):\n\n```js\nthis.baseUrl = '/something/' + this.partialPath;\n```\n```html\n\n```\n\nOr use string concatenation in the interpolation expression (not recommended\nexcept for the simplest of cases):\n\n```html\n\n```\n\n### **ngTouch** due to:\n - **[11d9ad](https://github.com/angular/angular.js/commit/11d9ad1eb25eaf5967195e424108207427835d50)**: remove ngClick override, `$touchProvider`, and `$touch`\n\nThe `ngClick` directive from the ngTouch module has been removed, and with it the\ncorresponding `$touchProvider` and `$touch` service.\n\nIf you have included ngTouch v1.5.0 or higher in your application, and have not\nchanged the value of `$touchProvider.ngClickOverrideEnabled()`, or injected and used the `$touch`\nservice, then there are no migration steps for your code. Otherwise you must remove references to\nthe provider and service.\n\nThe `ngClick` override directive had been deprecated and by default disabled since v1.5.0,\nbecause of buggy behavior in edge cases, and a general trend to avoid special touch based\noverrides of click events. In modern browsers, it should not be necessary to use a touch override\nlibrary:\n\n- Chrome, Firefox, Edge, and Safari remove the 300ms delay when\n `` is set.\n- Internet Explorer 10+, Edge, Safari, and Chrome remove the delay on elements that have the\n `touch-action` css property is set to `manipulation`.\n\nYou can find out more in these articles:\nhttps://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away\nhttps://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html#//apple_ref/doc/uid/TP40014305-CH10-SW8\nhttps://blogs.msdn.microsoft.com/ie/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay/\n\n### **Angular** due to:\n - **[1daa4f](https://github.com/angular/angular.js/commit/1daa4f2231a89ee88345689f001805ffffa9e7de)**: remove `angular.lowercase` and `angular.uppercase`\n\nThe helper functions `angular.lowercase` `and angular.uppercase` have\nbeen removed.\n\nThese functions have been deprecated since 1.5.0. They are internally\nused, but should not be exposed as they contain special locale handling\n(for Turkish) to maintain internal consistency regardless of user-set locale.\n\nDevelopers should generally use the built-ins `toLowerCase` and `toUpperCase`\nor `toLocaleLowerCase` and `toLocaleUpperCase` for special cases.\n\nFurther, we generally discourage using the angular.x helpers in application code.\n\n### **$controller** due to:\n - **[e269c1](https://github.com/angular/angular.js/commit/e269c14425a3209040f65c022658770e00a36f16)**: remove instantiating controllers defined on window\n\nThe option to instantiate controllers from constructors on the global `window` object\nhas been removed. Likewise, the deprecated `$controllerProvider.allowGlobals()`\nmethod that could enable this behavior, has been removed.\n\nThis behavior had been deprecated since AngularJS v1.3.0, because polluting the global scope\nis bad. To migrate, remove the call to $controllerProvider.allowGlobals() in the config, and\nregister your controller via the Module API or the $controllerProvider, e.g.\n\n```\nangular.module('myModule', []).controller('myController', function() {...});\n\nangular.module('myModule', []).config(function($controllerProvider) {\n $controllerProvider.register('myController', function() {...});\n});\n\n```\n\n### **$rootScope** due to:\n - **[c2b8fa](https://github.com/angular/angular.js/commit/c2b8fab0a480204374d561d6b9b3d47347ac5570)**: provide correct value of one-time bindings in watchGroup\n\nPreviously when using `$watchGroup` the entries in `newValues` and\n`oldValues` represented the *most recent change of each entry*.\n\nNow the entries in `oldValues` will always equal the `newValues` of the previous\ncall of the listener. This means comparing the entries in `newValues` and\n`oldValues` can be used to determine which individual expressions changed.\n\nFor example `$scope.$watchGroup(['a', 'b'], fn)` would previously:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `a=2` | [2, undefined] | [1, undefined] |\n| `b=3` | [2, 3] | [1, undefined] |\n\n\nNow the `oldValue` will always equal the previous `newValue`:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `a=2` | [2, undefined] | [1, undefined] |\n| `b=3` | [2, 3] | [2, undefined] |\n\nNote the last call now shows `a === 2` in the `oldValues` array.\n\nThis also makes the `oldValue` of one-time watchers more clear. Previously\nthe `oldValue` of a one-time watcher would remain `undefined` forever. For\nexample `$scope.$watchGroup(['a', '::b'], fn)` would previously:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `b=2` | [1, 2] | [undefined, undefined] |\n| `a=b=3` | [3, 2] | [1, undefined] |\n\nWhere now the `oldValue` will always equal the previous `newValue`:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `b=2` | [1, 2] | [1, undefined] |\n| `a=b=3` | [3, 2] | [1, 2] |\n\n### **$interval** due to:\n - **[a8bef9](https://github.com/angular/angular.js/commit/a8bef95127775d83d80daa4617c33227c4b443d4)**: throw when trying to cancel non-$interval promise\n\n`$interval.cancel()` will throw an error if called with a promise that\nwas not generated by `$interval()`. Previously, it would silently do\nnothing.\n\nBefore:\n```js\nvar promise = $interval(doSomething, 1000, 5).then(doSomethingElse);\n$interval.cancel(promise); // No error; interval NOT canceled.\n```\n\nAfter:\n```js\nvar promise = $interval(doSomething, 1000, 5).then(doSomethingElse);\n$interval.cancel(promise); // Throws error.\n```\n\nCorrect usage:\n```js\nvar promise = $interval(doSomething, 1000, 5);\nvar newPromise = promise.then(doSomethingElse);\n$interval.cancel(promise); // Interval canceled.\n```\n\n### **$timeout** due to:\n - **[336525](https://github.com/angular/angular.js/commit/3365256502344970f86355d3ace1cb4251ae9828)**: throw when trying to cancel non-$timeout promise\n\n`$timeout.cancel()` will throw an error if called with a promise that\nwas not generated by `$timeout()`. Previously, it would silently do\nnothing.\n\nBefore:\n```js\nvar promise = $timeout(doSomething, 1000).then(doSomethingElse);\n$timeout.cancel(promise); // No error; timeout NOT canceled.\n```\n\nAfter:\n```js\nvar promise = $timeout(doSomething, 1000).then(doSomethingElse);\n$timeout.cancel(promise); // Throws error.\n```\n\nCorrect usage:\n```js\nvar promise = $timeout(doSomething, 1000);\nvar newPromise = promise.then(doSomethingElse);\n$timeout.cancel(promise); // Timeout canceled.\n```\n\n\n# 1.7.0-rc.0 maximum-overdrive (2018-04-19)\n\n## Bug Fixes\n- **input:**\n - listen on \"change\" instead of \"click\" for radio/checkbox ngModels\n ([656c8f](https://github.com/angular/angular.js/commit/656c8fa8f23b1277cc5c214c4d0237f3393afa1e),\n [#4516](https://github.com/angular/angular.js/issues/4516),\n [#14667](https://github.com/angular/angular.js/issues/14667),\n [#14685](https://github.com/angular/angular.js/issues/14685))\n- **input\\[number\\]:** validate min/max against viewValue\n ([aa3f95](https://github.com/angular/angular.js/commit/aa3f951330ec7b10b43ea884d9b5754e296770ec),\n [#12761](https://github.com/angular/angular.js/issues/12761),\n [#16325](https://github.com/angular/angular.js/issues/16325))\n- **jqLite:** make removeData() not remove event handlers\n ([b7d396](https://github.com/angular/angular.js/commit/b7d396b8b6e8f27a1f4556d58fc903321e8d532a),\n [#15869](https://github.com/angular/angular.js/issues/15869),\n [#16512](https://github.com/angular/angular.js/issues/16512))\n- **$compile:**\n - remove the preAssignBindingsEnabled flag\n ([38f8c9](https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb),\n [#15782](https://github.com/angular/angular.js/issues/15782))\n - add `base[href]` to the list of RESOURCE_URL context attributes\n ([1cf728](https://github.com/angular/angular.js/commit/1cf728e209a9e0016068fac2769827e8f747760e),\n [#15597](https://github.com/angular/angular.js/issues/15597))\n- **$interval:** throw when trying to cancel non-$interval promise\n ([a8bef9](https://github.com/angular/angular.js/commit/a8bef95127775d83d80daa4617c33227c4b443d4),\n [#16424](https://github.com/angular/angular.js/issues/16424),\n [#16476](https://github.com/angular/angular.js/issues/16476))\n- **$timeout:** throw when trying to cancel non-$timeout promise\n ([336525](https://github.com/angular/angular.js/commit/3365256502344970f86355d3ace1cb4251ae9828),\n [#16424](https://github.com/angular/angular.js/issues/16424),\n [#16476](https://github.com/angular/angular.js/issues/16476))\n- **$cookies:** remove the deprecated $cookieStore factory\n ([73c646](https://github.com/angular/angular.js/commit/73c6467f1468353215dc689c019ed83aa4993c77),\n [#16465](https://github.com/angular/angular.js/issues/16465))\n- **$resource:** fix interceptors and success/error callbacks\n ([ea0585](https://github.com/angular/angular.js/commit/ea0585773bb93fd891576e2271254a17e15f1ddd),\n [#6731](https://github.com/angular/angular.js/issues/6731),\n [#9334](https://github.com/angular/angular.js/issues/9334),\n [#6865](https://github.com/angular/angular.js/issues/6865),\n [#16446](https://github.com/angular/angular.js/issues/16446))\n- **$templateRequest:**\n - give tpload error the correct namespace\n ([c617d6](https://github.com/angular/angular.js/commit/c617d6dceee5b000bfceda44ced22fc16b48b18b))\n - always return the template that is stored in the cache\n ([fb0099](https://github.com/angular/angular.js/commit/fb00991460cf69ae8bc7f1f826363d09c73c0d5e),\n [#16225](https://github.com/angular/angular.js/issues/16225))\n- **$animate:** let cancel() reject the runner promise\n ([16b82c](https://github.com/angular/angular.js/commit/16b82c6afe0ab916fef1d6ca78053b00bf5ada83),\n [#14204](https://github.com/angular/angular.js/issues/14204),\n [#16373](https://github.com/angular/angular.js/issues/16373))\n- **ngTouch:**\n - deprecate the module and its contents\n ([67f54b](https://github.com/angular/angular.js/commit/67f54b660038de2b4346b3e76d66a8dc8ccb1f9b),\n [#16427](https://github.com/angular/angular.js/issues/16427),\n [#16431](https://github.com/angular/angular.js/issues/16431))\n - remove ngClick override, `$touchProvider`, and `$touch`\n ([11d9ad](https://github.com/angular/angular.js/commit/11d9ad1eb25eaf5967195e424108207427835d50),\n [#15761](https://github.com/angular/angular.js/issues/15761),\n [#15755](https://github.com/angular/angular.js/issues/15755))\n- **ngScenario:** completely remove the angular scenario runner\n ([0cd392](https://github.com/angular/angular.js/commit/0cd39217828b0ad53eaf731576af17d66c18ff60),\n [#9405](https://github.com/angular/angular.js/issues/9405))\n- **form:** set $submitted to true on child forms when parent is submitted\n ([223de5](https://github.com/angular/angular.js/commit/223de59e988dc0cc8b4ec3a045b7c0735eba1c77),\n [#10071](https://github.com/angular/angular.js/issues/10071))\n- **$rootScope:**\n - provide correct value of one-time bindings in watchGroup\n ([c2b8fa](https://github.com/angular/angular.js/commit/c2b8fab0a480204374d561d6b9b3d47347ac5570))\n- **ngAria:** do not set aria attributes on input[type=\"hidden\"]\n ([6d5ef3](https://github.com/angular/angular.js/commit/6d5ef34fc6a974cde73157ba94f9706723dd8f5b),\n [#15113](https://github.com/angular/angular.js/issues/15113),\n [#16367](https://github.com/angular/angular.js/issues/16367))\n- **ngModel, input:** improve handling of built-in named parsers\n ([74b04c](https://github.com/angular/angular.js/commit/74b04c9403af4fc7df5b6420f22c9f45a3e84140),\n [#14292](https://github.com/angular/angular.js/issues/14292),\n [#10076](https://github.com/angular/angular.js/issues/10076),\n [#16347](https://github.com/angular/angular.js/issues/16347))\n- **$httpParamSerializerJQLike:**\n - call functions as jQuery does\n ([a784fa](https://github.com/angular/angular.js/commit/a784fab605d825f1158c6292b3c42f8c4a502fdf),\n [#16138](https://github.com/angular/angular.js/issues/16138),\n [#16139](https://github.com/angular/angular.js/issues/16139))\n - follow jQuery for `null` and `undefined`\n ([301fdd](https://github.com/angular/angular.js/commit/301fdda648680d89ccab607c413a7ddede7b0165))\n- **$parse:**\n - do not pass scope/locals to interceptors of one-time bindings\n ([87a586](https://github.com/angular/angular.js/commit/87a586eb9a23cfd0d0bb681cc778b4b8e5c8451d))\n - always pass the intercepted value to watchers\n ([2ee503](https://github.com/angular/angular.js/commit/2ee5033967d5f87a516bad137686b0592e25d26b),\n [#16021](https://github.com/angular/angular.js/issues/16021))\n - respect the interceptor.$stateful flag\n ([de7403](https://github.com/angular/angular.js/commit/de74034ddf6f92505ccdb61be413a6df2c723f87))\n- **Angular:** remove `angular.lowercase` and `angular.uppercase`\n ([1daa4f](https://github.com/angular/angular.js/commit/1daa4f2231a89ee88345689f001805ffffa9e7de),\n [#15445](https://github.com/angular/angular.js/issues/15445))\n- **$controller:** remove instantiating controllers defined on window\n ([e269c1](https://github.com/angular/angular.js/commit/e269c14425a3209040f65c022658770e00a36f16),\n [#15349](https://github.com/angular/angular.js/issues/15349),\n [#15762](https://github.com/angular/angular.js/issues/15762))\n\n\n## New Features\n- **angular.isArray:** support Array subclasses in `angular.isArray()`\n ([e3ece2](https://github.com/angular/angular.js/commit/e3ece2fad9e1e6d47b5f06815ff186d7e6f44948),\n [#15533](https://github.com/angular/angular.js/issues/15533),\n [#15541](https://github.com/angular/angular.js/issues/15541))\n- **$sce:** handle URL sanitization through the `$sce` service\n ([1e9ead](https://github.com/angular/angular.js/commit/1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9))\n- **orderBy:** consider `null` and `undefined` greater than other values\n ([1d8046](https://github.com/angular/angular.js/commit/1d804645f7656d592c90216a0355b4948807f6b8),\n [#15294](https://github.com/angular/angular.js/issues/15294),\n [#16376](https://github.com/angular/angular.js/issues/16376))\n- **$resource:** add support for `request` and `requestError` interceptors (#15674)\n ([240a3d](https://github.com/angular/angular.js/commit/240a3ddbf12a9bb79754031be95dae4b6bd2dded),\n [#5146](https://github.com/angular/angular.js/issues/5146))\n- **ngModelOptions:** add debounce catch-all + allow debouncing 'default' only\n ([55ba44](https://github.com/angular/angular.js/commit/55ba44913e02650b56410aa9ab5eeea5d3492b68),\n [#15411](https://github.com/angular/angular.js/issues/15411),\n [#16335](https://github.com/angular/angular.js/issues/16335))\n- **$compile:** lower the `xlink:href` security context for SVG's `a` and `image` elements\n ([6ccbfa](https://github.com/angular/angular.js/commit/6ccbfa65d60a3dc396d0cf6da21b993ad74653fd),\n [#15736](https://github.com/angular/angular.js/issues/15736))\n\n\n## Performance Improvements\n- **$rootScope:** allow $watchCollection use of expression input watching\n ([97b00c](https://github.com/angular/angular.js/commit/97b00ca497676aaff8a803762a9f8c7ff4aa24dd))\n- **ngStyle:** use $watchCollection\n ([15bbd3](https://github.com/angular/angular.js/commit/15bbd3e18cd89b91f7206a06c73d40e54a8a48a0),\n [#15947](https://github.com/angular/angular.js/issues/15947))\n- **$compile:** do not use deepWatch in literal one-way bindings\n ([fd4f01](https://github.com/angular/angular.js/commit/fd4f0111188b62773b99ab6eab38b4d2b5d8d727),\n [#15301](https://github.com/angular/angular.js/issues/15301))\n\n\n\n\n## Breaking Changes\n\n### **jqLite** due to:\n - **[b7d396](https://github.com/angular/angular.js/commit/b7d396b8b6e8f27a1f4556d58fc903321e8d532a)**: make removeData() not remove event handlers\n\nBefore this commit `removeData()` invoked on an element removed its event\nhandlers as well. If you want to trigger a full cleanup of an element, change:\n\n```js\nelem.removeData();\n```\n\nto:\n\n```js\nangular.element.cleanData(elem);\n```\n\nIn most cases, though, cleaning up after an element is supposed to be done\nonly when it's removed from the DOM as well; in such cases the following:\n\n```js\nelem.remove();\n```\n\nwill remove event handlers as well.\n\n### **$cookies** due to:\n - **[73c646](https://github.com/angular/angular.js/commit/73c6467f1468353215dc689c019ed83aa4993c77)**: remove the deprecated $cookieStore factory\n\nThe $cookieStore has been removed. Migrate to the $cookies service. Note that\nfor object values you need to use the `putObject` & `getObject` methods as\n`get`/`put` will not correctly save/retrieve them.\n\nBefore:\n```js\n$cookieStore.put('name', {key: 'value'});\n$cookieStore.get('name'); // {key: 'value'}\n$cookieStore.remove('name');\n```\n\nAfter:\n```js\n$cookies.putObject('name', {key: 'value'});\n$cookies.getObject('name'); // {key: 'value'}\n$cookies.remove('name');\n```\n\n### **$resource** due to:\n - **[ea0585](https://github.com/angular/angular.js/commit/ea0585773bb93fd891576e2271254a17e15f1ddd)**: fix interceptors and success/error callbacks\n\nIf you are not using `success` or `error` callbacks with `$resource`,\nyour app should not be affected by this change.\n\nIf you are using `success` or `error` callbacks (with or without\nresponse interceptors), one (subtle) difference is that throwing an\nerror inside the callbacks will not propagate to the returned\n`$promise`. Therefore, you should try to use the promises whenever\npossible. E.g.:\n\n```js\n// Avoid\nUser.query(function onSuccess(users) { throw new Error(); }).\n $promise.\n catch(function onError() { /* Will not be called. */ });\n\n// Prefer\nUser.query().\n $promise.\n then(function onSuccess(users) { throw new Error(); }).\n catch(function onError() { /* Will be called. */ });\n```\n\nFinally, if you are using `success` or `error` callbacks with response\ninterceptors, the callbacks will now always run _after_ the interceptors\n(and wait for them to resolve in case they return a promise).\nPreviously, the `error` callback was called before the `responseError`\ninterceptor and the `success` callback was synchronously called after\nthe `response` interceptor. E.g.:\n\n```js\nvar User = $resource('/api/users/:id', {id: '@id'}, {\n get: {\n method: 'get',\n interceptor: {\n response: function(response) {\n console.log('responseInterceptor-1');\n return $timeout(1000).then(function() {\n console.log('responseInterceptor-2');\n return response.resource;\n });\n },\n responseError: function(response) {\n console.log('responseErrorInterceptor-1');\n return $timeout(1000).then(function() {\n console.log('responseErrorInterceptor-2');\n return $q.reject('Ooops!');\n });\n }\n }\n }\n});\nvar onSuccess = function(value) { console.log('successCallback', value); };\nvar onError = function(error) { console.log('errorCallback', error); };\n\n// Assuming the following call is successful...\nUser.get({id: 1}, onSuccess, onError);\n // Old behavior:\n // responseInterceptor-1\n // successCallback, {/* Promise object */}\n // responseInterceptor-2\n // New behavior:\n // responseInterceptor-1\n // responseInterceptor-2\n // successCallback, {/* User object */}\n\n// Assuming the following call returns an error...\nUser.get({id: 2}, onSuccess, onError);\n // Old behavior:\n // errorCallback, {/* Response object */}\n // responseErrorInterceptor-1\n // responseErrorInterceptor-2\n // New behavior:\n // responseErrorInterceptor-1\n // responseErrorInterceptor-2\n // errorCallback, Ooops!\n```\n\n - **[240a3d](https://github.com/angular/angular.js/commit/240a3ddbf12a9bb79754031be95dae4b6bd2dded)**: add support for `request` and `requestError` interceptors (#15674)\n\nPreviously, calling a `$resource` method would synchronously call\n`$http`. Now, it will be called asynchronously (regardless if a\n`request`/`requestError` interceptor has been defined.\n\nThis is not expected to affect applications at runtime, since the\noverall operation is asynchronous already, but may affect assertions in\ntests. For example, if you want to assert that `$http` has been called\nwith specific arguments as a result of a `$resource` call, you now need\nto run a `$digest` first, to ensure the (possibly empty) request\ninterceptor promise has been resolved.\n\nBefore:\n```js\nit('...', function() {\n $httpBackend.expectGET('/api/things').respond(...);\n var Things = $resource('/api/things');\n Things.query();\n\n expect($http).toHaveBeenCalledWith(...);\n});\n```\n\nAfter:\n```js\nit('...', function() {\n $httpBackend.expectGET('/api/things').respond(...);\n var Things = $resource('/api/things');\n Things.query();\n $rootScope.$digest();\n\n expect($http).toHaveBeenCalledWith(...);\n});\n```\n\n### **$templateRequest**:\n - due to **[c617d6](https://github.com/angular/angular.js/commit/c617d6dceee5b000bfceda44ced22fc16b48b18b)**: give tpload error the correct namespace\n\nPreviously the `tpload` error was namespaced to `$compile`. If you have\ncode that matches errors of the form `[$compile:tpload]` it will no\nlonger run. You should change the code to match\n`[$templateRequest:tpload]`.\n\n - due to **([fb0099](https://github.com/angular/angular.js/commit/fb00991460cf69ae8bc7f1f826363d09c73c0d5e)**: always return the template that is stored in the cache\n\nThe service now returns the result of `$templateCache.put()` when making a server request to the\ntemplate. Previously it would return the content of the response directly.\nThis now means if you are decorating `$templateCache.put()` to manipulate the template, you will\nnow get this manipulated result also on the first `$templateRequest` rather than only on subsequent\ncalls (when the template is retrived from the cache).\nIn practice this should not affect any apps, as it is unlikely that they rely on the template being\ndifferent in the first and subsequent calls.\n\n### **$animate** due to:\n - **[16b82c](https://github.com/angular/angular.js/commit/16b82c6afe0ab916fef1d6ca78053b00bf5ada83)**: let cancel() reject the runner promise\n\n$animate.cancel(runner) now rejects the underlying\npromise and calls the catch() handler on the runner\nreturned by $animate functions (enter, leave, move,\naddClass, removeClass, setClass, animate).\nPreviously it would resolve the promise as if the animation\nhad ended successfully.\n\nExample:\n\n```js\nvar runner = $animate.addClass('red');\nrunner.then(function() { console.log('success')});\nrunner.catch(function() { console.log('cancelled')});\n\nrunner.cancel();\n```\n\nPre-1.7.0, this logs 'success', 1.7.0 and later it logs 'cancelled'.\nTo migrate, add a catch() handler to your animation runners.\n\n### **angular.isArray** due to:\n - **[e3ece2](https://github.com/angular/angular.js/commit/e3ece2fad9e1e6d47b5f06815ff186d7e6f44948)**: support Array subclasses in `angular.isArray()`\n\nPreviously, `angular.isArray()` was an alias for `Array.isArray()`.\nTherefore, objects that prototypally inherit from `Array` where not\nconsidered arrays. Now such objects are considered arrays too.\n\nThis change affects several other methods that use `angular.isArray()`\nunder the hood, such as `angular.copy()`, `angular.equals()`,\n`angular.forEach()`, and `angular.merge()`.\n\nThis in turn affects how dirty checking treats objects that prototypally\ninherit from `Array` (e.g. MobX observable arrays). AngularJS will now\nbe able to handle these objects better when copying or watching.\n\n### **$sce** due to:\n - **[1e9ead](https://github.com/angular/angular.js/commit/1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9)**: handle URL sanitization through the `$sce` service\n\nIf you use `attrs.$set` for URL attributes (a[href] and img[src]) there will no\nlonger be any automated sanitization of the value. This is in line with other\nprogrammatic operations, such as writing to the innerHTML of an element.\n\nIf you are programmatically writing URL values to attributes from untrusted\ninput then you must sanitize it yourself. You could write your own sanitizer or copy\nthe private `$$sanitizeUri` service.\n\nNote that values that have been passed through the `$interpolate` service within the\n`URL` or `MEDIA_URL` will have already been sanitized, so you would not need to sanitize\nthese values again.\n\n### **orderBy** due to:\n - **[1d8046](https://github.com/angular/angular.js/commit/1d804645f7656d592c90216a0355b4948807f6b8)**: consider `null` and `undefined` greater than other values\n\nWhen using `orderBy` to sort arrays containing `null` values, the `null` values\nwill be considered \"greater than\" all other values, except for `undefined`.\nPreviously, they were sorted as strings. This will result in different (but more\nintuitive) sorting order.\n\nBefore:\n```js\norderByFilter(['a', undefined, 'o', null, 'z']);\n//--> 'a', null, 'o', 'z', undefined\n```\n\nAfter:\n```js\norderByFilter(['a', undefined, 'o', null, 'z']);\n//--> 'a', 'o', 'z', null, undefined\n```\n\n### **ngScenario** due to:\n - **[0cd392](https://github.com/angular/angular.js/commit/0cd39217828b0ad53eaf731576af17d66c18ff60)**: completely remove the angular scenario runner\n\nThe angular scenario runner end-to-end test framework has been\nremoved from the project and will no longer be available on npm\nor bower starting with 1.7.0.\nIt was deprecated and removed from the documentation in 2014.\nApplications that still use it should migrate to\n[Protractor](http://www.protractortest.org).\nTechnically, it should also be possible to continue using an\nolder version of the scenario runner, as the underlying APIs have\nnot changed. However, we do not guarantee future compatibility.\n\n### **form** due to:\n - **[223de5](https://github.com/angular/angular.js/commit/223de59e988dc0cc8b4ec3a045b7c0735eba1c77)**: set $submitted to true on child forms when parent is submitted\n\nForms will now set $submitted on child forms when they are submitted.\nFor example:\n```\n
\n \n \n \n \n
\n```\n\nSubmitting this form will set $submitted on \"parentform\" and \"childform\".\nPreviously, it was only set on \"parentform\".\n\nThis change was introduced because mixing form and ngForm does not create\nlogically separate forms, but rather something like input groups.\nTherefore, child forms should inherit the submission state from their parent form.\n\n### **ngAria** due to:\n - **[6d5ef3](https://github.com/angular/angular.js/commit/6d5ef34fc6a974cde73157ba94f9706723dd8f5b)**: do not set aria attributes on input[type=\"hidden\"]\n\nngAria no longer sets aria-* attributes on input[type=\"hidden\"] with ngModel.\nThis can affect apps that test for the presence of aria attributes on hidden inputs.\nTo migrate, remove these assertions.\nIn actual apps, this should not have a user-facing effect, as the previous behavior\nwas incorrect, and the new behavior is correct for accessibility.\n\n### **ngModel, input** due to:\n - **[74b04c](https://github.com/angular/angular.js/commit/74b04c9403af4fc7df5b6420f22c9f45a3e84140)**: improve handling of built-in named parsers\n\n*Custom* parsers that fail to parse on input types \"email\", \"url\", \"number\", \"date\", \"month\",\n\"time\", \"datetime-local\", \"week\", do no longer set `ngModelController.$error[inputType]`, and\nthe `ng-invalid-[inputType]` class. Also, custom parsers on input type \"range\" do no\nlonger set `ngModelController.$error.number` and the `ng-invalid-number` class.\n\nInstead, any custom parsers on these inputs set `ngModelController.$error.parse` and\n`ng-invalid-parse`. This change was made to make distinguishing errors from built-in parsers\nand custom parsers easier.\n\n### **ngModelOptions** due to:\n - **[55ba44](https://github.com/angular/angular.js/commit/55ba44913e02650b56410aa9ab5eeea5d3492b68)**: add debounce catch-all + allow debouncing 'default' only\n\nthe 'default' key in 'debounce' now only debounces the default event, i.e. the event\nthat is added as an update trigger by the different input directives automatically.\n\nPreviously, it also applied to other update triggers defined in 'updateOn' that\ndid not have a corresponding key in the 'debounce'.\n\nThis behavior is now supported via a special wildcard / catch-all key: '*'.\n\nSee the following example:\n\nPre-1.7:\n'mouseup' is also debounced by 500 milliseconds because 'default' is applied:\n```\nng-model-options=\"{\n updateOn: 'default blur mouseup',\n debounce: { 'default': 500, 'blur': 0 }\n}\n```\n\n1.7:\nThe pre-1.7 behavior can be re-created by setting '*' as a catch-all debounce value:\n```\nng-model-options=\"{\n updateOn: 'default blur mouseup',\n debounce: { '*': 500, 'blur': 0 }\n}\n```\n\nIn contrast, when only 'default' is used, 'blur' and 'mouseup' are not debounced:\n```\nng-model-options=\"{\n updateOn: 'default blur mouseup',\n debounce: { 'default': 500 }\n}\n```\n\n### **input\\[number\\]** due to:\n - **[aa3f95](https://github.com/angular/angular.js/commit/aa3f951330ec7b10b43ea884d9b5754e296770ec)**: validate min/max against viewValue\n\n`input[type=number]` with `ngModel` now validates the input for the `max`/`min` restriction against\nthe `ngModelController.$viewValue` instead of against the `ngModelController.$modelValue`.\n\nThis affects apps that use `$parsers` or `$formatters` to transform the input / model value.\n\nIf you rely on the $modelValue validation, you can overwrite the `min`/`max` validator from a custom directive, as seen in the following example directive definition object:\n\n```\n{\n restrict: 'A',\n require: 'ngModel',\n link: function(scope, element, attrs, ctrl) {\n var maxValidator = ctrl.$validators.max;\n\n ctrl.$validators.max = function(modelValue, viewValue) {\n return maxValidator(modelValue, modelValue);\n };\n }\n}\n```\n\n### **input** due to:\n - **[656c8f](https://github.com/angular/angular.js/commit/656c8fa8f23b1277cc5c214c4d0237f3393afa1e)**: listen on \"change\" instead of \"click\" for radio/checkbox ngModels\n\n`input[radio]` and `input[checkbox]` now listen to the \"change\" event instead of the \"click\" event.\nMost apps should not be affected, as \"change\" is automatically fired by browsers after \"click\"\nhappens.\n\nTwo scenarios might need migration:\n\n- Custom click events:\n\nBefore this change, custom click event listeners on radio / checkbox would be called after the\ninput element and `ngModel` had been updated, unless they were specifically registered before\nthe built-in click handlers.\nAfter this change, they are called before the input is updated, and can call event.preventDefault()\nto prevent the input from updating.\n\nIf an app uses a click event listener that expects ngModel to be updated when it is called, it now\nneeds to register a change event listener instead.\n\n- Triggering click events:\n\nConventional trigger functions:\n\nThe change event might not be fired when the input element is not attached to the document. This\ncan happen in **tests** that compile input elements and\ntrigger click events on them. Depending on the browser (Chrome and Safari) and the trigger method,\nthe change event will not be fired when the input isn't attached to the document.\n\nBefore:\n\n```js\n it('should update the model', inject(function($compile, $rootScope) {\n var inputElm = $compile('')($rootScope);\n\n inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()\n expect($rootScope.checkbox).toBe(true);\n });\n```\n\nWith this patch, `$rootScope.checkbox` might not be true, because the click event\nhasn't triggered the change event. To make the test, work append the inputElm to the app's\n`$rootElement`, and the `$rootElement` to the `$document`.\n\nAfter:\n\n```js\n it('should update the model', inject(function($compile, $rootScope, $rootElement, $document) {\n var inputElm = $compile('')($rootScope);\n\n $rootElement.append(inputElm);\n $document.append($rootElement);\n\n inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()\n expect($rootScope.checkbox).toBe(true);\n });\n```\n\n`triggerHandler()`:\n\nIf you are using this jQuery / jqLite function on the input elements, you don't have to attach\nthe elements to the document, but instead change the triggered event to \"change\". This is because\n`triggerHandler(event)` only triggers the exact event when it has been added by jQuery / jqLite.\n\n### **ngStyle** due to:\n - **[15bbd3](https://github.com/angular/angular.js/commit/15bbd3e18cd89b91f7206a06c73d40e54a8a48a0)**: use $watchCollection\n\nPreviously the use of deep watch by ng-style would trigger styles to be\nre-applied when nested state changed. Now only changes to direct\nproperties of the watched object will trigger changes.\n\n### **$compile** due to:\n - **[38f8c9](https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb)**: remove the preAssignBindingsEnabled flag\n\nPreviously, the `$compileProvider.preAssignBindingsEnabled` flag was supported.\nThe flag controlled whether bindings were available inside the controller\nconstructor or only in the `$onInit` hook. The bindings are now no longer\navailable in the constructor.\n\nTo migrate your code:\n\n1. If you haven't invoked `$compileProvider.preAssignBindingsEnabled()` you\ndon't have to do anything to migrate.\n\n2. If you specified `$compileProvider.preAssignBindingsEnabled(false)`, you\ncan remove that statement - since AngularJS 1.6.0 this is the default so your\napp should still work even in AngularJS 1.6 after such removal. Afterwards,\nmigrating to AngularJS 1.7.0 shouldn't require any further action.\n\n3. If you specified `$compileProvider.preAssignBindingsEnabled(true)` you need\nto first migrate your code so that the flag can be flipped to `false`. The\ninstructions on how to do that are available in the \"Migrating from 1.5 to 1.6\"\nguide:\nhttps://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6\nAfterwards, remove the `$compileProvider.preAssignBindingsEnabled(true)`\nstatement.\n\n - **[6ccbfa](https://github.com/angular/angular.js/commit/6ccbfa65d60a3dc396d0cf6da21b993ad74653fd)**: lower the `xlink:href` security context for SVG's `a` and `image` elements\n\nIn the unlikely case that an app relied on RESOURCE_URL whitelisting for the\npurpose of binding to the `xlink:href` property of SVG's `` or ``\nelements and if the values do not pass the regular URL sanitization, they will\nbreak.\n\nTo fix this you need to ensure that the values used for binding to the affected\n`xlink:href` contexts are considered safe URLs, e.g. by whitelisting them in\n`$compileProvider`'s `aHrefSanitizationWhitelist` (for `` elements) or\n`imgSrcSanitizationWhitelist` (for `` elements).\n\n - **[fd4f01](https://github.com/angular/angular.js/commit/fd4f0111188b62773b99ab6eab38b4d2b5d8d727)**: do not use deepWatch in literal one-way bindings\n\nPreviously when a literal value was passed into a directive/component via\none-way binding it would be watched with a deep watcher.\n\nFor example, for ``, a new instance of the array\nwould be passed into the directive/component (and trigger $onChanges) not\nonly if `a` changed but also if any sub property of `a` changed such as\n`a.b` or `a.b.c.d.e` etc.\n\nThis also means a new but equal value for `a` would NOT trigger such a\nchange.\n\nNow literal values use an input-based watch similar to other directive/component\none-way bindings. In this context inputs are the non-constant parts of the\nliteral. In the example above the input would be `a`. Changes are only\ntriggered when the inputs to the literal change.\n\n - **[1cf728](https://github.com/angular/angular.js/commit/1cf728e209a9e0016068fac2769827e8f747760e)**: add `base[href]` to the list of RESOURCE_URL context attributes\n\nPreviously, `` would not require `baseUrl` to\nbe trusted as a RESOURCE_URL. Now, `baseUrl` will be sent to `$sce`'s\nRESOURCE_URL checks. By default, it will break unless `baseUrl` is of the same\norigin as the application document.\n\nRefer to the\n[`$sce` API docs](https://code.angularjs.org/snapshot/docs/api/ng/service/$sce)\nfor more info on how to trust a value in a RESOURCE_URL context.\n\nAlso, concatenation in trusted contexts is not allowed, which means that the\nfollowing won't work: ``.\n\nEither construct complex values in a controller (recommended):\n\n```js\nthis.baseUrl = '/something/' + this.partialPath;\n```\n```html\n\n```\n\nOr use string concatenation in the interpolation expression (not recommended\nexcept for the simplest of cases):\n\n```html\n\n```\n\n### **ngTouch** due to:\n - **[11d9ad](https://github.com/angular/angular.js/commit/11d9ad1eb25eaf5967195e424108207427835d50)**: remove ngClick override, `$touchProvider`, and `$touch`\n\nThe `ngClick` directive from the ngTouch module has been removed, and with it the\ncorresponding `$touchProvider` and `$touch` service.\n\nIf you have included ngTouch v1.5.0 or higher in your application, and have not\nchanged the value of `$touchProvider.ngClickOverrideEnabled()`, or injected and used the `$touch`\nservice, then there are no migration steps for your code. Otherwise you must remove references to\nthe provider and service.\n\nThe `ngClick` override directive had been deprecated and by default disabled since v1.5.0,\nbecause of buggy behavior in edge cases, and a general trend to avoid special touch based\noverrides of click events. In modern browsers, it should not be necessary to use a touch override\nlibrary:\n\n- Chrome, Firefox, Edge, and Safari remove the 300ms delay when\n `` is set.\n- Internet Explorer 10+, Edge, Safari, and Chrome remove the delay on elements that have the\n `touch-action` css property is set to `manipulation`.\n\nYou can find out more in these articles:\nhttps://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away\nhttps://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html#//apple_ref/doc/uid/TP40014305-CH10-SW8\nhttps://blogs.msdn.microsoft.com/ie/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay/\n\n### **Angular** due to:\n - **[1daa4f](https://github.com/angular/angular.js/commit/1daa4f2231a89ee88345689f001805ffffa9e7de)**: remove `angular.lowercase` and `angular.uppercase`\n\nThe helper functions `angular.lowercase` `and angular.uppercase` have\nbeen removed.\n\nThese functions have been deprecated since 1.5.0. They are internally\nused, but should not be exposed as they contain special locale handling\n(for Turkish) to maintain internal consistency regardless of user-set locale.\n\nDevelopers should generally use the built-ins `toLowerCase` and `toUpperCase`\nor `toLocaleLowerCase` and `toLocaleUpperCase` for special cases.\n\nFurther, we generally discourage using the angular.x helpers in application code.\n\n### **$controller** due to:\n - **[e269c1](https://github.com/angular/angular.js/commit/e269c14425a3209040f65c022658770e00a36f16)**: remove instantiating controllers defined on window\n\nThe option to instantiate controllers from constructors on the global `window` object\nhas been removed. Likewise, the deprecated `$controllerProvider.allowGlobals()`\nmethod that could enable this behavior, has been removed.\n\nThis behavior had been deprecated since AngularJS v1.3.0, because polluting the global scope\nis bad. To migrate, remove the call to $controllerProvider.allowGlobals() in the config, and\nregister your controller via the Module API or the $controllerProvider, e.g.\n\n```\nangular.module('myModule', []).controller('myController', function() {...});\n\nangular.module('myModule', []).config(function($controllerProvider) {\n $controllerProvider.register('myController', function() {...});\n});\n\n```\n\n### **$rootScope** due to:\n - **[c2b8fa](https://github.com/angular/angular.js/commit/c2b8fab0a480204374d561d6b9b3d47347ac5570)**: provide correct value of one-time bindings in watchGroup\n\nPreviously when using `$watchGroup` the entries in `newValues` and\n`oldValues` represented the *most recent change of each entry*.\n\nNow the entries in `oldValues` will always equal the `newValues` of the previous\ncall of the listener. This means comparing the entries in `newValues` and\n`oldValues` can be used to determine which individual expressions changed.\n\nFor example `$scope.$watchGroup(['a', 'b'], fn)` would previously:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `a=2` | [2, undefined] | [1, undefined] |\n| `b=3` | [2, 3] | [1, undefined] |\n\n\nNow the `oldValue` will always equal the previous `newValue`:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `a=2` | [2, undefined] | [1, undefined] |\n| `b=3` | [2, 3] | [2, undefined] |\n\nNote the last call now shows `a === 2` in the `oldValues` array.\n\nThis also makes the `oldValue` of one-time watchers more clear. Previously\nthe `oldValue` of a one-time watcher would remain `undefined` forever. For\nexample `$scope.$watchGroup(['a', '::b'], fn)` would previously:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `b=2` | [1, 2] | [undefined, undefined] |\n| `a=b=3` | [3, 2] | [1, undefined] |\n\nWhere now the `oldValue` will always equal the previous `newValue`:\n\n| Action | newValue | oldValue |\n|----------|------------|------------|\n| (init) | [undefined, undefined] | [undefined, undefined] |\n| `a=1` | [1, undefined] | [undefined, undefined] |\n| `b=2` | [1, 2] | [1, undefined] |\n| `a=b=3` | [3, 2] | [1, 2] |\n\n### **$interval** due to:\n - **[a8bef9](https://github.com/angular/angular.js/commit/a8bef95127775d83d80daa4617c33227c4b443d4)**: throw when trying to cancel non-$interval promise\n\n`$interval.cancel()` will throw an error if called with a promise that\nwas not generated by `$interval()`. Previously, it would silently do\nnothing.\n\nBefore:\n```js\nvar promise = $interval(doSomething, 1000, 5).then(doSomethingElse);\n$interval.cancel(promise); // No error; interval NOT canceled.\n```\n\nAfter:\n```js\nvar promise = $interval(doSomething, 1000, 5).then(doSomethingElse);\n$interval.cancel(promise); // Throws error.\n```\n\nCorrect usage:\n```js\nvar promise = $interval(doSomething, 1000, 5);\nvar newPromise = promise.then(doSomethingElse);\n$interval.cancel(promise); // Interval canceled.\n```\n\n### **$timeout** due to:\n - **[336525](https://github.com/angular/angular.js/commit/3365256502344970f86355d3ace1cb4251ae9828)**: throw when trying to cancel non-$timeout promise\n\n`$timeout.cancel()` will throw an error if called with a promise that\nwas not generated by `$timeout()`. Previously, it would silently do\nnothing.\n\nBefore:\n```js\nvar promise = $timeout(doSomething, 1000).then(doSomethingElse);\n$timeout.cancel(promise); // No error; timeout NOT canceled.\n```\n\nAfter:\n```js\nvar promise = $timeout(doSomething, 1000).then(doSomethingElse);\n$timeout.cancel(promise); // Throws error.\n```\n\nCorrect usage:\n```js\nvar promise = $timeout(doSomething, 1000);\nvar newPromise = promise.then(doSomethingElse);\n$timeout.cancel(promise); // Timeout canceled.\n```\n\n\n\n# 1.6.10 crystalline-persuasion (2018-04-17)\n\n## Bug Fixes\n- **$compile:**\n - correctly handle `null`/`undefined` href `attrs.$set()`\n ([f04e04](https://github.com/angular/angular.js/commit/f04e04e0e63e0d30c29718abd5cae634901793b2),\n [#16520](https://github.com/angular/angular.js/issues/16520))\n - throw error in `$onChanges` immediately\n ([b7d1e0fbd](https://github.com/angular/angular.js/commit/983e27b628fd1eab653e2b3966d90a270f27cc93),\n [#15578](https://github.com/angular/angular.js/issues/15578),\n [#16492](https://github.com/angular/angular.js/issues/16492))\n- **input:**\n - allow overriding timezone for date input types\n ([4355de](https://github.com/angular/angular.js/commit/4355dee21d26667bb7f6f21bf75c081351315033),\n [#16181](https://github.com/angular/angular.js/issues/16181),\n [#13382](https://github.com/angular/angular.js/issues/13382),\n [#16336](https://github.com/angular/angular.js/issues/16336))\n - take timezone into account when validating minimum and maximum in date types\n ([2f0ac6](https://github.com/angular/angular.js/commit/2f0ac696cb09aec3e291bb8c9c8a1092cbe3a061),\n [#16342](https://github.com/angular/angular.js/issues/16342),\n [#16390](https://github.com/angular/angular.js/issues/16390))\n - fix composition mode in IE for Korean input\n ([9a1b7c](https://github.com/angular/angular.js/commit/9a1b7c9fa135d1dae3f9b4ccf48f081675796e92),\n [#6656](https://github.com/angular/angular.js/issues/6656),\n [#16273](https://github.com/angular/angular.js/issues/16273))\n- **jqLite:** use XHTML-compliant HTML as input for jqLite\n ([a0c55a](https://github.com/angular/angular.js/commit/a0c55af9858075ab268a88dd7a4464788a46f4b7),\n [#6917](https://github.com/angular/angular.js/issues/6917),\n [#16518](https://github.com/angular/angular.js/issues/16518))\n- **minErr:** update url to https\n ([52e466](https://github.com/angular/angular.js/commit/52e46683bfcc0ce0dc9a3d2ee42b389508423799))\n- **$http:** set correct xhrStatus in response when using 'timeout'\n ([1faf7e](https://github.com/angular/angular.js/commit/1faf7ec30d55bba107b18efbcf0ef07732c55b91))\n- **browserTrigger:** support CompositionEvent\n ([c33fd1](https://github.com/angular/angular.js/commit/c33fd1325417fdc6d7d6abc90cd935130653b149))\n\n\n## New Features\n- **$http:** support sending XSRF token to whitelisted origins\n ([bc7757](https://github.com/angular/angular.js/commit/bc775759c88b2221c2bb71d2335bc233c93f43b0),\n [#7862](https://github.com/angular/angular.js/issues/7862))\n- **minErr:** strip error url from error parameters\n ([980b69](https://github.com/angular/angular.js/commit/980b69dcae73dd8a3d0b9d91b63fa7711cd0ba36))\n- **$sanitize:** support enhancing elements/attributes white-lists\n ([ee8e05](https://github.com/angular/angular.js/commit/ee8e05cfafe086188fc318ed4115fb56ba335112),\n [#5900](https://github.com/angular/angular.js/issues/5900),\n [#16326](https://github.com/angular/angular.js/issues/16326))\n- **$rootScope:** allow suspending and resuming watchers on scope\n ([efb822c58](https://github.com/angular/angular.js/commit/41d5c90f170cc054b0f8f88220c22ef1ef6cc0a6),\n [#16308](https://github.com/angular/angular.js/issues/5301))\n\n\n# 1.6.9 fiery-basilisk (2018-02-02)\n\n\n## Bug Fixes\n- **input:** add `drop` event support for IE\n ([5dc076](https://github.com/angular/angular.js/commit/5dc07667de00c5e85fd69c5b7b7fe4fb5fd65a77))\n- **ngMessages:** prevent memory leak from messages that are never attached\n ([9d058d](https://github.com/angular/angular.js/commit/9d058de04bb78694b83179e9b97bc40214eca01a),\n [#16389](https://github.com/angular/angular.js/issues/16389),\n [#16404](https://github.com/angular/angular.js/issues/16404),\n [#16406](https://github.com/angular/angular.js/issues/16406))\n- **ngTransclude:** remove terminal: true\n ([1d826e](https://github.com/angular/angular.js/commit/1d826e2f1e941d14c3c56d7a0249f5796ba11f85),\n [#16411](https://github.com/angular/angular.js/issues/16411),\n [#16412](https://github.com/angular/angular.js/issues/16412))\n- **$sanitize:** sanitize `xml:base` attributes\n ([b9ef65](https://github.com/angular/angular.js/commit/b9ef6585e10477fbbf912a971fe0b390bca692a6))\n\n\n## New Features\n- **currencyFilter:** trim whitespace around an empty currency symbol\n ([367390](https://github.com/angular/angular.js/commit/3673909896efb6ff47546caf7fc61549f193e043),\n [#15018](https://github.com/angular/angular.js/issues/15018),\n [#15085](https://github.com/angular/angular.js/issues/15085),\n [#15105](https://github.com/angular/angular.js/issues/15105))\n\n\n\n# 1.6.8 beneficial-tincture (2017-12-18)\n\n\n## Bug Fixes\n- **$location:**\n - always decode special chars in `$location.url(value)`\n ([2bdf71](https://github.com/angular/angular.js/commit/2bdf7126878c87474bb7588ce093d0a3c57b0026))\n - decode non-component special chars in Hashbang URLS\n ([57b626](https://github.com/angular/angular.js/commit/57b626a673b7530399d3377dfe770165bec35f8a))\n- **ngModelController:** allow $overrideModelOptions to set updateOn\n ([55516d](https://github.com/angular/angular.js/commit/55516da2dfc7c5798dce24e9fa930c5ac90c900c),\n [#16351](https://github.com/angular/angular.js/issues/16351),\n [#16364](https://github.com/angular/angular.js/issues/16364))\n\n\n## New Features\n- **$parse:** add a hidden interface to retrieve an expression's AST\n ([f33d95](https://github.com/angular/angular.js/commit/f33d95cfcff6fd0270f92a142df8794cca2013ad),\n [#16253](https://github.com/angular/angular.js/issues/16253),\n [#16260](https://github.com/angular/angular.js/issues/16260))\n\n\n# 1.6.7 imperial-backstroke (2017-11-24)\n\n\n## Bug Fixes\n- **$compile:** sanitize special chars in directive name\n ([c4003f](https://github.com/angular/angular.js/commit/c4003fd03489f876b646f06838f4edb576bacf6f),\n [#16314](https://github.com/angular/angular.js/issues/16314),\n [#16278](https://github.com/angular/angular.js/issues/16278))\n- **$location:** do not decode forward slashes in the path in HTML5 mode\n ([e06ebf](https://github.com/angular/angular.js/commit/e06ebfdbb558544602fe9da4d7d98045a965f468),\n [#16312](https://github.com/angular/angular.js/issues/16312))\n- **sanitizeUri:** sanitize URIs that contain IDEOGRAPHIC SPACE chars\n ([ddeb1d](https://github.com/angular/angular.js/commit/ddeb1df15a23de93eb95dbe202e83e93673e1c4e),\n [#16288](https://github.com/angular/angular.js/issues/16288))\n- **$rootScope:** fix potential memory leak when removing scope listeners\n ([358a69](https://github.com/angular/angular.js/commit/358a69fa8b89b251ee44e523458d6c7f40b92b2d),\n [#16135](https://github.com/angular/angular.js/issues/16135),\n [#16161](https://github.com/angular/angular.js/issues/16161))\n- **http:** do not allow encoded callback params in jsonp requests\n ([569e90](https://github.com/angular/angular.js/commit/569e906a5818271416ad0b749be2f58dc34938bd))\n- **ngMock:** pass unexpected request failures in `$httpBackend` to the error handler\n ([1555a4](https://github.com/angular/angular.js/commit/1555a4911ad5360c145c0ddc8ec6c4bf9a381c13),\n [#16150](https://github.com/angular/angular.js/issues/16150),\n [#15855](https://github.com/angular/angular.js/issues/15855))\n- **ngAnimate:** don't close transitions when child transitions close\n ([1391e9](https://github.com/angular/angular.js/commit/1391e99c7f73795180b792af21ad4402f96e225d),\n [#16210](https://github.com/angular/angular.js/issues/16210))\n- **ngMock.browserTrigger:** add 'bubbles' to Transition/Animation Event\n ([7a5f06](https://github.com/angular/angular.js/commit/7a5f06d55d123a39bb7b030667fb1ab672939598))\n\n\n## New Features\n- **$sanitize, $compileProvider, linky:** add support for the \"sftp\" protocol in links\n ([a675ea](https://github.com/angular/angular.js/commit/a675ea034366fbb0fcf0d73fed65216aa99bce11),\n [#16102](https://github.com/angular/angular.js/issues/16102))\n- **ngModel.NgModelController:** expose $processModelValue to run model -> view pipeline\n ([145194](https://github.com/angular/angular.js/commit/14519488ce9218aa891d34e89fc3271fd4ed0f04),\n [#3407](https://github.com/angular/angular.js/issues/3407),\n [#10764](https://github.com/angular/angular.js/issues/10764),\n [#16237](https://github.com/angular/angular.js/issues/16237))\n- **$injector:** ability to load new modules after bootstrapping\n ([6e78fe](https://github.com/angular/angular.js/commit/6e78fee73258bb0ae36414f9db2e8734273e481b))\n\n\n## Performance Improvements\n- **jqLite:**\n - avoid setting class attribute when not changed\n ([9c95f6](https://github.com/angular/angular.js/commit/9c95f6d5e00ee7e054aabb3e363f5bfb3b7b4103))\n - avoid repeated add/removeAttribute in jqLiteRemoveClass\n ([cab9eb](https://github.com/angular/angular.js/commit/cab9ebfd5a02e897f802bf6321b8471e4843c5d3),\n [#16078](https://github.com/angular/angular.js/issues/16078),\n [#16131](https://github.com/angular/angular.js/issues/16131))\n\n\n\n# 1.6.6 interdimensional-cable (2017-08-18)\n\n\n## Bug Fixes\n- **$httpParamSerializer:** ignore functions\n ([b51ded](https://github.com/angular/angular.js/commit/b51ded67366865f36c5781dd5d9b801488ec95ea),\n [#16133](https://github.com/angular/angular.js/issues/16133))\n- **$resource:** do not throw when calling old `$cancelRequest()`\n ([009ebe](https://github.com/angular/angular.js/commit/009ebec64c81d11b280c635167050e8906e191c6),\n [#16037](https://github.com/angular/angular.js/issues/16037))\n- **$parse:**\n - do not shallow-watch computed property keys\n ([750465](https://github.com/angular/angular.js/commit/7504656a26202de591e4ac9674333254304edf8a))\n - support constants in computed keys\n ([9d6c3f](https://github.com/angular/angular.js/commit/9d6c3f3ec233279885e37a250d25860d5c15f716))\n- **$http:** do not throw error if `Content-Type` is not `application/json` but response is JSON-like\n ([2e1163](https://github.com/angular/angular.js/commit/2e1163ef5cb56d1933e8ecd7b74020b9df9c6693),\n [#16027](https://github.com/angular/angular.js/issues/16027),\n [#16075](https://github.com/angular/angular.js/issues/16075))\n\n\n## New Features\n- **$compile:** add `strictComponentBindingsEnabled()` method\n ([3ec181](https://github.com/angular/angular.js/commit/3ec1819b913c8edf0649e06217dbd5920f29f126),\n [#16129](https://github.com/angular/angular.js/issues/16129))\n- **$resource:** add resource to response for error interceptors\n ([9256db](https://github.com/angular/angular.js/commit/9256dbc4201343ce5cd63a9eadf98da4793f45af),\n [#16109](https://github.com/angular/angular.js/issues/16109))\n- **$http:** allow differentiation between XHR completion, error, abort, timeout\n ([5e2bc5](https://github.com/angular/angular.js/commit/5e2bc5bbf347a9dfadc08b1514b8be06fd550913),\n [#15924](https://github.com/angular/angular.js/issues/15924),\n [#15847](https://github.com/angular/angular.js/issues/15847))\n\n\n\n# 1.6.5 toffee-salinization (2017-07-03)\n\n\n## Bug Fixes\n- **core:**\n - correctly detect Error instances from different contexts\n ([6daca0](https://github.com/angular/angular.js/commit/6daca023e42098f7098b9bf153c8e53a17af84f1),\n [#15868](https://github.com/angular/angular.js/issues/15868),\n [#15872](https://github.com/angular/angular.js/issues/15872))\n - deprecate `angular.merge`\n ([dc41f4](https://github.com/angular/angular.js/commit/dc41f465baae9bc91418a61f446596157c530b6e),\n [#12653](https://github.com/angular/angular.js/issues/12653),\n [#14941](https://github.com/angular/angular.js/issues/14941),\n [#15180](https://github.com/angular/angular.js/issues/15180),\n [#15992](https://github.com/angular/angular.js/issues/15992),\n [#16036](https://github.com/angular/angular.js/issues/16036))\n- **ngOptions:**\n - re-render after empty option has been removed\n ([510d0f](https://github.com/angular/angular.js/commit/510d0f946fa1a443ad43fa31bc9337676ef31332))\n - allow empty option to be removed and re-added\n ([71b4da](https://github.com/angular/angular.js/commit/71b4daa4e10b6912891927ee2a7930c604b538f8))\n - select unknown option if unmatched model does not match empty option\n ([17d34b](https://github.com/angular/angular.js/commit/17d34b7a983a0ef63f6cf404490385c696fb0da1))\n- **orderBy:** guarantee stable sort\n ([e50ed4](https://github.com/angular/angular.js/commit/e50ed4da9e8177168f67da68bdf02f07da4e7bcf),\n [#14881](https://github.com/angular/angular.js/issues/14881),\n [#15914](https://github.com/angular/angular.js/issues/15914))\n- **$parse:**\n - do not shallow-watch inputs to one-time intercepted expressions\n ([6e3b5a](https://github.com/angular/angular.js/commit/6e3b5a57cd921823f3eca7200a79ac5c2ef0567a))\n - standardize one-time literal vs non-literal and interceptors\n ([f003d9](https://github.com/angular/angular.js/commit/f003d93a3dd052dccddef41125d9c51034ac3605))\n - do not shallow-watch inputs when wrapped in an interceptor fn\n ([aac562](https://github.com/angular/angular.js/commit/aac5623247a86681cbe0e1c8179617b816394c1d),\n [#15905](https://github.com/angular/angular.js/issues/15905))\n - always re-evaluate filters within literals when an input is an object\n ([ec9768](https://github.com/angular/angular.js/commit/ec97686f2f4a5481cc806462313a664fc7a1c893),\n [#15964](https://github.com/angular/angular.js/issues/15964),\n [#15990](https://github.com/angular/angular.js/issues/15990))\n- **$sanitize:** use appropriate inert document strategy for Firefox and Safari\n ([8f31f1](https://github.com/angular/angular.js/commit/8f31f1ff43b673a24f84422d5c13d6312b2c4d94))\n- **$timeout/$interval:** do not trigger a digest on cancel\n ([a222d0](https://github.com/angular/angular.js/commit/a222d0b452622624dc498ef0b9d3c43647fd4fbc),\n [#16057](https://github.com/angular/angular.js/issues/16057),\n [#16064](https://github.com/angular/angular.js/issues/16064))
\n This change might affect the use of `$timeout.flush()` in unit tests. See the commit message for\n more info.\n- **ngMock/$interval:** add support for zero-delay intervals in tests\n ([a1e3f8](https://github.com/angular/angular.js/commit/a1e3f8728e0a80396f980e48f8dc68dde6721b2b),\n [#15952](https://github.com/angular/angular.js/issues/15952),\n [#15953](https://github.com/angular/angular.js/issues/15953))\n- **angular-loader:** do not depend on \"closure\" globals that may not be available\n ([a3226d](https://github.com/angular/angular.js/commit/a3226d01fadaf145713518dc5b8022b581c34e81),\n [#15880](https://github.com/angular/angular.js/issues/15880),\n [#15881](https://github.com/angular/angular.js/issues/15881))\n\n\n## New Features\n- **select:** expose info about selection state in controller\n ([0b962d](https://github.com/angular/angular.js/commit/0b962d4881e98327a91c37f7317da557aa991663),\n [#13172](https://github.com/angular/angular.js/issues/13172),\n [#10127](https://github.com/angular/angular.js/issues/10127))\n- **$animate:** add support for `customFilter`\n ([ab114a](https://github.com/angular/angular.js/commit/ab114af8508bdbdb1fa5fd1e070d08818d882e28),\n [#14891](https://github.com/angular/angular.js/issues/14891))\n- **$compile:** overload `.component()` to accept object map of components\n ([210112](https://github.com/angular/angular.js/commit/2101126ce72308d8fc468ca2411bb9972e614f79),\n [#14579](https://github.com/angular/angular.js/issues/14579),\n [#16062](https://github.com/angular/angular.js/issues/16062))\n- **$log:** log all parameters in IE 9, not just the first two.\n ([3671a4](https://github.com/angular/angular.js/commit/3671a43be43d05b00c90dfb3a3f746c013139581))\n- **ngMock:** describe unflushed http requests\n ([d9128e](https://github.com/angular/angular.js/commit/d9128e7b2371ab2bb5169ba854b21c78baa784d2),\n [#10596](https://github.com/angular/angular.js/issues/10596),\n [#15928](https://github.com/angular/angular.js/issues/15928))\n\n\n## Performance Improvements\n- **ngOptions:** prevent initial options repainting\n ([ff52b1](https://github.com/angular/angular.js/commit/ff52b188a759f2cc7ee6ee78a8c646c2354a47eb),\n [#15801](https://github.com/angular/angular.js/issues/15801),\n [#15812](https://github.com/angular/angular.js/issues/15812),\n [#16071](https://github.com/angular/angular.js/issues/16071))\n- **$animate:**\n - avoid unnecessary computations if animations are globally disabled\n ([ce5ffb](https://github.com/angular/angular.js/commit/ce5ffbf667464bd58eae4c4af0917eb2685f1f6a),\n [#14914](https://github.com/angular/angular.js/issues/14914))\n - do not retrieve `className` unless `classNameFilter` is used\n ([275978](https://github.com/angular/angular.js/commit/27597887379a1904cd86832602e286894b449a75))\n\n\n\n\n# 1.6.4 phenomenal-footnote (2017-03-31)\n\n\n## Bug Fixes\n- **$parse:**\n - standardize one-time literal vs non-literal and interceptors\n ([60394a](https://github.com/angular/angular.js/commit/60394a9d91dad8932fa900af7c8529837f1d4557),\n [#15858](https://github.com/angular/angular.js/issues/15858))\n - fix infinite digest errors when watching objects with .valueOf in literals\n ([f5ddb1](https://github.com/angular/angular.js/commit/f5ddb10b56676c2ad912ce453acb87f0a7a94e01),\n [#15867](https://github.com/angular/angular.js/issues/15867))\n- **ngModel:** prevent internal scope reference from being copied\n ([e1f8a6](https://github.com/angular/angular.js/commit/e1f8a6e82bb8a70079ef3db9a891b1c08b5bae31),\n [#15833](https://github.com/angular/angular.js/issues/15833))\n- **jqLite:** make jqLite invoke jqLite.cleanData as a method\n ([9cde98](https://github.com/angular/angular.js/commit/9cde98cbc770f8d33fc074ba563b7ab6e2baaf8b),\n [#15846](https://github.com/angular/angular.js/issues/15846))\n- **$http:** throw more informative error on invalid JSON response\n ([df8887](https://github.com/angular/angular.js/commit/df88873bb79213057057adb47151b626a7ec0e5d),\n [#15695](https://github.com/angular/angular.js/issues/15695),\n [#15724](https://github.com/angular/angular.js/issues/15724))\n- **dateFilter:** correctly handle newlines in `format` string\n ([982271](https://github.com/angular/angular.js/commit/9822711ad2a401c2449239edc13d18b301714757),\n [#15794](https://github.com/angular/angular.js/issues/15794),\n [#15792](https://github.com/angular/angular.js/issues/15792))\n\n\n## New Features\n- **$resource:** add `hasBody` action configuration option\n ([a9f987](https://github.com/angular/angular.js/commit/a9f987a0c9653246ea471a89197907d94c0cea2a),\n [#10128](https://github.com/angular/angular.js/issues/10128),\n [#12181](https://github.com/angular/angular.js/issues/12181))\n\n\n\n# 1.6.3 scriptalicious-bootstrapping (2017-03-08)\n\n\n## Bug Fixes\n- **AngularJS:**\n - do not auto-bootstrap if the `src` exists but is empty\n ([3536e8](https://github.com/angular/angular.js/commit/3536e83d8a085b02bd6dcec8324800b7e6c734e4))\n - do not auto bootstrap if the currentScript has been clobbered\n ([95f964](https://github.com/angular/angular.js/commit/95f964b827b6f5b5aab10af54f7831316c7a9935))\n - do not auto-bootstrap if the script source is bad and inside SVG\n ([c8f78a](https://github.com/angular/angular.js/commit/c8f78a8ca9debc33a6deaf951f344b8d372bf210))\n- **$log:** don't parse error stacks manually outside of IE/Edge\n ([64e5af](https://github.com/angular/angular.js/commit/64e5afc4786fdfd850c6bdb488a5aa2b8b077f74),\n [#15590](https://github.com/angular/angular.js/issues/15590),\n [#15767](https://github.com/angular/angular.js/issues/15767))\n- **$sanitize:** prevent clobbered elements from freezing the browser\n ([3bb1dd](https://github.com/angular/angular.js/commit/3bb1dd5d7f7dcde6fea5a3148f8f10e92f451e9d),\n [#15699](https://github.com/angular/angular.js/issues/15699))\n- **$animate:**\n - reset `classNameFilter` to `null` when a disallowed RegExp is used\n ([a584fb](https://github.com/angular/angular.js/commit/a584fb6e1569fc1dd85e23b251a7c126edc2dd5b),\n [#14913](https://github.com/angular/angular.js/issues/14913))\n - improve detection on `ng-animate` in `classNameFilter` RegExp\n ([1f1331](https://github.com/angular/angular.js/commit/1f13313f403381581e1c31c57ebfe7a96546c6e4),\n [#14806](https://github.com/angular/angular.js/issues/14806))\n- **filterFilter:** don't throw if `key.charAt` is not a function\n ([f27d19](https://github.com/angular/angular.js/commit/f27d19ed606bf05ba41698159ebbc5fbc195033e),\n [#15644](https://github.com/angular/angular.js/issues/15644),\n [#15660](https://github.com/angular/angular.js/issues/15660))\n- **select:**\n - add attribute \"selected\" for `select[multiple]`\n ([851367](https://github.com/angular/angular.js/commit/8513674911300b27d518383a905fde9b3f25f7ae))\n - keep original selection when using shift to add options in IE/Edge\n ([97b74a](https://github.com/angular/angular.js/commit/97b74ad6fbcbc4b63e37e9eb44962d6f8de83e8b),\n [#15675](https://github.com/angular/angular.js/issues/15675),\n [#15676](https://github.com/angular/angular.js/issues/15676))\n- **$jsonpCallbacks:** allow `$window` to be mocked in unit tests\n ([5ca0de](https://github.com/angular/angular.js/commit/5ca0de64873c32ab2f540a3226e73c4175a15c50),\n [#15685](https://github.com/angular/angular.js/issues/15685),\n [#15686](https://github.com/angular/angular.js/issues/15686))\n\n\n## New Features\n- **info:** add `angularVersion` info to each module\n ([1e582e](https://github.com/angular/angular.js/commit/1e582e4fa486f340150bba95927f1b26d9142de2))\n- **$injector:** add new `modules` property\n ([742123](https://github.com/angular/angular.js/commit/7421235f247e5b7113345401bc5727cfbf81ddc2))\n- **Module:** add `info()` method\n ([09ba69](https://github.com/angular/angular.js/commit/09ba69078de6ba52c70571b82b6205929f6facc5),\n [#15225](https://github.com/angular/angular.js/issues/15225))\n- **errorHandlingConfig:** make the depth for object stringification in errors configurable\n ([4a5eaf](https://github.com/angular/angular.js/commit/4a5eaf7bec85ceca8b934ebaff4d1834a1a09f57),\n [#15402](https://github.com/angular/angular.js/issues/15402),\n [#15433](https://github.com/angular/angular.js/issues/15433))\n\n\n\n# 1.6.2 llamacorn-lovehug (2017-02-07)\n\n\n## Bug Fixes\n- **$compile:**\n - do not swallow thrown errors in testsg\n ([0377c6](https://github.com/angular/angular.js/commit/0377c6f0e890cb4ed3eb020b96720b4b34f75df3),\n [#15629](https://github.com/angular/angular.js/issues/15629),\n [#15631](https://github.com/angular/angular.js/issues/15631))\n - allow the usage of \"$\" in isolate scope property alias\n ([7f2af3](https://github.com/angular/angular.js/commit/7f2af3f923e7a3f85c8862d0ed57d21c72eae904),\n [#15594](https://github.com/angular/angular.js/issues/15594))\n- **$location:** correctly handle external URL change during `$digest`\n ([b60761](https://github.com/angular/angular.js/commit/b607618342d6c4fab364966fe05f152be6bd4d5f),\n [#11075](https://github.com/angular/angular.js/issues/11075),\n [#12571](https://github.com/angular/angular.js/issues/12571),\n [#15556](https://github.com/angular/angular.js/issues/15556),\n [#15561](https://github.com/angular/angular.js/issues/15561))\n- **$browser:** detect external changes in `history.state`\n ([fa50fb](https://github.com/angular/angular.js/commit/fa50fbaf57b3437be7a410ecaba7008dbe0ef239))\n- **$resource:**\n - do not swallow errors in `success` callback\n ([27146e](https://github.com/angular/angular.js/commit/27146e8a7fad54c1342179b6d291b1b5c2ebe816),\n [#15624](https://github.com/angular/angular.js/issues/15624),\n [#15628](https://github.com/angular/angular.js/issues/15628))\n - correctly unescape `/\\.` even if `\\.` comes from a param value\n ([419a48](https://github.com/angular/angular.js/commit/419a4813e354496bdf0df44e3f8afaa198df1ab1),\n [#15627](https://github.com/angular/angular.js/issues/15627))\n - delete `$cancelRequest()` in `toJSON()`\n ([086c5d](https://github.com/angular/angular.js/commit/086c5d0354db8cb3d106b9ff966fb48d6fb46ef8),\n [#15244](https://github.com/angular/angular.js/issues/15244))\n- **$animate:** correctly animate transcluded clones with `templateUrl`\n ([f01212](https://github.com/angular/angular.js/commit/f01212ab5287ac7a154da7d75037ed444e81eb34),\n [#15510](https://github.com/angular/angular.js/issues/15510),\n [#15514](https://github.com/angular/angular.js/issues/15514))\n- **$route:** make asynchronous tasks count as pending requests\n ([eb968c](https://github.com/angular/angular.js/commit/eb968c4a6884838db05369a04459066424c5bba8),\n [#14159](https://github.com/angular/angular.js/issues/14159))\n- **$parse:** make sure ES6 object computed properties are watched\n ([5e418b](https://github.com/angular/angular.js/commit/5e418b1145a1045da598c7863e785d647ea83850),\n [#15678](https://github.com/angular/angular.js/issues/15678))\n- **$sniffer:** allow `history` for NW.js apps\n ([4a593d](https://github.com/angular/angular.js/commit/4a593db79ba1e21a6aa600a82cf6d757cad94d01),\n [#15474](https://github.com/angular/angular.js/issues/15474),\n [#15633](https://github.com/angular/angular.js/issues/15633))\n- **input:** fix `step` validation for `input[type=number/range]`\n ([c95a67](https://github.com/angular/angular.js/commit/c95a6737fbd277e40c064bd9f68f383bf119505c),\n [#15504](https://github.com/angular/angular.js/issues/15504),\n [#15506](https://github.com/angular/angular.js/issues/15506))\n- **select:** keep `ngModel` when selected option is recreated by `ngRepeat`\n ([131af8](https://github.com/angular/angular.js/commit/131af8272d269a541d04cb522c264a91e0ec8b6a),\n [#15630](https://github.com/angular/angular.js/issues/15630),\n [#15632](https://github.com/angular/angular.js/issues/15632))\n- **ngValue:** correctly update the `value` property when `value` is undefined\n ([05aab6](https://github.com/angular/angular.js/commit/05aab660ce74f526f2110d3b5faf9a5b4f4e664b)\n [#15603](https://github.com/angular/angular.js/issues/15603),\n [#15605](https://github.com/angular/angular.js/issues/15605))\n- **angularInit:** allow auto-bootstrapping from inline script\n ([bb464d](https://github.com/angular/angular.js/commit/bb464d16b434b9e2de2fecf80c192d4741cba879),\n [#15567](https://github.com/angular/angular.js/issues/15567),\n [#15571](https://github.com/angular/angular.js/issues/15571))\n- **ngMockE2E:** ensure that mocked `$httpBackend` uses correct `$browser`\n ([bd63b2](https://github.com/angular/angular.js/commit/bd63b2235cd410251cb83eebd9a47d3102830b6b),\n [#15593](https://github.com/angular/angular.js/issues/15593))\n\n\n## New Features\n- **ngModel:** add `$overrideModelOptions` support\n ([2546c2](https://github.com/angular/angular.js/commit/2546c29f811b68eea4d68be7fa1c8f7bb562dc11),\n [#15415](https://github.com/angular/angular.js/issues/15415))\n- **$parse:** allow watching array/object literals with non-primitive values\n ([25f008](https://github.com/angular/angular.js/commit/25f008f541d68b09efd7b428b648c6d4899e6972),\n [#15301](https://github.com/angular/angular.js/issues/15301))\n\n\n\n\n# 1.5.11 princely-quest (2017-01-13)\n\n\n## Bug Fixes\n- **$compile:** allow the usage of \"$\" in isolate scope property alias\n ([e75fbc](https://github.com/angular/angular.js/commit/e75fbc494e6a0da6a9231b40bb0382431b62be07),\n [#15586](https://github.com/angular/angular.js/issues/15586),\n [#15594](https://github.com/angular/angular.js/issues/15594))\n- **angularInit:** allow auto-bootstrapping from inline script\n ([41aa91](https://github.com/angular/angular.js/commit/41aa9125b9aaf771addb250642f524a4e6f9d8d3),\n [#15567](https://github.com/angular/angular.js/issues/15567),\n [#15571](https://github.com/angular/angular.js/issues/15571))\n- **$resource:** delete `$cancelRequest()` in `toJSON()`\n ([4f3858](https://github.com/angular/angular.js/commit/4f3858e7c371f87534397f45b9d002add33b00cc),\n [#15244](https://github.com/angular/angular.js/issues/15244))\n- **$$cookieReader:** correctly handle forbidden access to `document.cookie`\n ([6933cf](https://github.com/angular/angular.js/commit/6933cf64fe51f54b10d1639f2b95bab3c1178df9),\n [#15523](https://github.com/angular/angular.js/issues/15523),\n [#15532](https://github.com/angular/angular.js/issues/15532))\n\n\n\n\n# 1.6.1 promise-rectification (2016-12-23)\n\n\n## Bug Fixes\n- **$q:** Add traceback to unhandled promise rejections\n ([174cb4](https://github.com/angular/angular.js/commit/174cb4a8c81e25581da5b452c2bb43b0fa377a9b),\n [#14631](https://github.com/angular/angular.js/issues/14631))\n- **$$cookieReader:** correctly handle forbidden access to `document.cookie`\n ([33f769](https://github.com/angular/angular.js/commit/33f769b0a1214055c16fb59adad4897bf53d62bf),\n [#15523](https://github.com/angular/angular.js/issues/15523))\n- **ngOptions:** do not unset the `selected` property unless necessary\n ([bc4844](https://github.com/angular/angular.js/commit/bc4844d3b297d80aecef89aa1b32615024decedc),\n [#15477](https://github.com/angular/angular.js/issues/15477))\n- **ngModelOptions:** work correctly when on the template of `replace` directives\n ([5f8ed6](https://github.com/angular/angular.js/commit/5f8ed63f2ab02ffb9c21bf9c29d27c851d162e26),\n [#15492](https://github.com/angular/angular.js/issues/15492))\n- **ngClassOdd/Even:** add/remove the correct classes when expression/`$index` change simultaneously\n ([d52864](https://github.com/angular/angular.js/commit/d528644fe3e9ffd43999e7fc67806059f9e1083e))\n- **jqLite:** silently ignore `after()` if element has no parent\n ([3d68b9](https://github.com/angular/angular.js/commit/3d68b9502848ff6714ef89bfb95b8e70ae34eff6),\n [#15331](https://github.com/angular/angular.js/issues/15331),\n [#15475](https://github.com/angular/angular.js/issues/15475))\n- **$rootScope:** when adding/removing watchers during $digest\n ([163aca](https://github.com/angular/angular.js/commit/163aca336d7586a45255787af41b14b2a12361dd),\n [#15422](https://github.com/angular/angular.js/issues/15422))\n\n\n## Performance Improvements\n- **ngClass:** avoid unnecessary `.data()` accesses, deep-watching and copies\n ([1d3b65](https://github.com/angular/angular.js/commit/1d3b65adc2c22ff662159ef910089cf10d1edb7b),\n [#14404](https://github.com/angular/angular.js/issues/14404))\n\n\n\n\n# 1.5.10 asynchronous-synchronization (2016-12-15)\n\n\n## Bug Fixes\n- **$compile:**\n - don't throw tplrt error when there is whitespace around a top-level comment\n ([12752f](https://github.com/angular/angular.js/commit/12752f66ac425ab38a5ee574a4bfbf3516adc42c),\n [#15108](https://github.com/angular/angular.js/issues/15108))\n - clean up `@`-binding observers when re-assigning bindings\n ([f3cb6e](https://github.com/angular/angular.js/commit/f3cb6e309aa1f676e5951ac745fa886d3581c2f4),\n [#15268](https://github.com/angular/angular.js/issues/15268))\n - set attribute value even if `ngAttr*` contains no interpolation\n ([229799](https://github.com/angular/angular.js/commit/22979904fb754c59e9f6ee5d8763e3b8de0e18c2),\n [#15133](https://github.com/angular/angular.js/issues/15133))\n - `bindToController` should work without `controllerAs`\n ([944989](https://github.com/angular/angular.js/commit/9449893763a4fd95ee8ff78b53c6966a874ec9ae),\n [#15088](https://github.com/angular/angular.js/issues/15088))\n - do not overwrite values set in `$onInit()` for `<`-bound literals\n ([07e1ba](https://github.com/angular/angular.js/commit/07e1ba365fb5e8a049be732bd7b62f71e0aa1672),\n [#15118](https://github.com/angular/angular.js/issues/15118))\n - avoid calling `$onChanges()` twice for `NaN` initial values\n ([0cf5be](https://github.com/angular/angular.js/commit/0cf5be52642f7e9d81a708b3005042eac6492572))\n- **$location:** prevent infinite digest with IDN urls in Edge\n ([4bf892](https://github.com/angular/angular.js/commit/4bf89218130d434771089fdfe643490b8d2ee259),\n [#15217](https://github.com/angular/angular.js/issues/15217))\n- **$rootScope:** correctly handle adding/removing watchers during `$digest`\n ([a9708d](https://github.com/angular/angular.js/commit/a9708de84b50f06eacda33834d5bbdfc97c97f37),\n [#15422](https://github.com/angular/angular.js/issues/15422))\n- **$sce:** fix `adjustMatcher` to replace multiple `*` and `**`\n ([78eecb](https://github.com/angular/angular.js/commit/78eecb43dbb0500358d333aea8955bd0646a7790))\n- **jqLite:** silently ignore `after()` if element has no parent\n ([77ed85](https://github.com/angular/angular.js/commit/77ed85bcd3be057a5a79231565ac7accc6d644c6),\n [#15331](https://github.com/angular/angular.js/issues/15331))\n- **input[radio]:** use non-strict comparison for checkedness\n ([593a50](https://github.com/angular/angular.js/commit/593a5034841b3b7661d3bcbdd06b7a9d0876fd34))\n- **select, ngOptions:**\n - let `ngValue` take precedence over option text with multiple interpolations\n ([5b7ec8](https://github.com/angular/angular.js/commit/5b7ec8c84e88ee08aacaf9404853eda0016093f5),\n [#15413](https://github.com/angular/angular.js/issues/15413))\n - don't add comment nodes as empty options\n ([1d29c9](https://github.com/angular/angular.js/commit/1d29c91c3429de96e4103533752700d1266741be),\n [#15454](https://github.com/angular/angular.js/issues/15454))\n- **ngClassOdd/Even:** add/remove the correct classes when expression/`$index` change simultaneously\n ([e3d020](https://github.com/angular/angular.js/commit/e3d02070ab8a02c818dcc5114db6fba9d3f385d6))\n- **$sanitize:** reduce stack height in IE <= 11\n ([862dc2](https://github.com/angular/angular.js/commit/862dc2532f8126a4a71fd3d957884ba6f11f591c),\n [#14928](https://github.com/angular/angular.js/issues/14928))\n- **ngMock/$controller:** respect `$compileProvider.preAssignBindingsEnabled()`\n ([75c83f](https://github.com/angular/angular.js/commit/75c83ff3195931859a099f7a95bf81d32abf2eb3))\n\n\n## New Features\n- **bootstrap:** do not bootstrap from unknown schemes with a different origin\n ([bdeb33](https://github.com/angular/angular.js/commit/bdeb3392a8719131ab2b993f2a881c43a2860f92),\n [#15428](https://github.com/angular/angular.js/issues/15428))\n- **$anchorScroll:** convert numeric hash targets to string\n ([a52640](https://github.com/angular/angular.js/commit/a5264090b66ad0cf9a93de84bb7b307868c0edef),\n [#14680](https://github.com/angular/angular.js/issues/14680))\n- **$compile:**\n - add `preAssignBindingsEnabled` option\n ([f86576](https://github.com/angular/angular.js/commit/f86576def44005f180a66e3aa12d6cc73c1ac72c))\n - throw error when directive name or factory function is invalid\n ([5c9399](https://github.com/angular/angular.js/commit/5c9399d18ae5cd79e6cf6fc4377d66df00f6fcc7),\n [#15056](https://github.com/angular/angular.js/issues/15056))\n- **$controller:** throw when requested controller is not registered\n ([9ae793](https://github.com/angular/angular.js/commit/9ae793d8a69afe84370b601e07fc375fc18a576a),\n [#14980](https://github.com/angular/angular.js/issues/14980))\n- **$location:** add support for selectively rewriting links based on attribute\n ([a4a222](https://github.com/angular/angular.js/commit/a4a22266f127d3b9a6818e6f4754f048e253f693))\n- **$resource:** pass `status`/`statusText` to success callbacks\n ([a8da25](https://github.com/angular/angular.js/commit/a8da25c74d2c1f6265f0fafd95bf72c981d9d678),\n [#8341](https://github.com/angular/angular.js/issues/8841),\n [#8841](https://github.com/angular/angular.js/issues/8841))\n- **ngSwitch:** allow multiple case matches via optional attribute `ngSwitchWhenSeparator`\n ([0e1651](https://github.com/angular/angular.js/commit/0e1651bfd28ba73ebd0e4943d85af48c4506e02c),\n [#3410](https://github.com/angular/angular.js/issues/3410),\n [#3516](https://github.com/angular/angular.js/issues/3516))\n\n\n## Performance Improvements\n- **all:** don't trigger digests after enter/leave of structural directives\n ([c57779](https://github.com/angular/angular.js/commit/c57779d8725493c5853dceda0105dafd5c0e3a7c),\n [#15322](https://github.com/angular/angular.js/issues/15322))\n- **$compile:** validate `directive.restrict` property on directive init\n ([31d464](https://github.com/angular/angular.js/commit/31d464feef38b1cc950da6c8dccd0f194ebfc68b))\n- **ngOptions:** avoid calls to `element.value`\n ([e269ad](https://github.com/angular/angular.js/commit/e269ad1244bc50fee9218f7c18fab3e9ab063aab))\n- **jqLite:** move bind/unbind definitions out of the loop\n ([7717b9](https://github.com/angular/angular.js/commit/7717b96e950a5916a5f12fd611c73d3b06a8d717))\n\n\n\n# 1.6.0 rainbow-tsunami (2016-12-08)\n\n**Here are the full changes for the release of 1.6.0 that are not already released in the 1.5.x branch,\nconsolidating all the changes shown in the previous 1.6.0 release candidates.**\n\n## New Features\n- **ngModelOptions:** allow options to be inherited from ancestor `ngModelOptions`\n ([296cfc](https://github.com/angular/angular.js/commit/296cfce40c25e9438bfa46a0eb27240707a10ffa),\n [#10922](https://github.com/angular/angular.js/issues/10922))\n- **$compile:**\n - add `preAssignBindingsEnabled` option\n ([dfb8cf](https://github.com/angular/angular.js/commit/dfb8cf6402678206132e5bc603764d21e0f986ef))\n - set `preAssignBindingsEnabled` to false by default\n ([bcd0d4](https://github.com/angular/angular.js/commit/bcd0d4d896d0dfdd988ff4f849c1d40366125858),\n [#15352](https://github.com/angular/angular.js/issues/15352))\n - throw error when directive name or factory function is invalid\n ([53a3bf](https://github.com/angular/angular.js/commit/53a3bf6634600c3aeff092eacc35edf399b27aec)\n [#15056](https://github.com/angular/angular.js/issues/15056))\n- **jqLite:**\n - implement `jqLite(f)` as an alias to `jqLite(document).ready(f)`\n ([369fb7](https://github.com/angular/angular.js/commit/369fb7f4f73664bcdab0350701552d8bef6f605e))\n - don't throw for elements with missing `getAttribute`\n ([4e6c14](https://github.com/angular/angular.js/commit/4e6c14dcae4a9a30b3610a288ef8d20db47c4417))\n - don't get/set properties when getting/setting boolean attributes\n ([7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304),\n [#14126](https://github.com/angular/angular.js/issues/14126))\n - don't remove a boolean attribute for `.attr(attrName, '')`\n ([3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a))\n - remove the attribute for `.attr(attribute, null)`\n ([4e3624](https://github.com/angular/angular.js/commit/4e3624552284d0e725bf6262b2e468cd2c7682fa))\n - return `[]` for `.val()` on `\n\n \n \n```\n\nThe migration strategy is to convert values that matched with non-strict\nconversion so that they will match with strict conversion.\n\n\n- **feat(ngModelOptions): allow options to be inherited from ancestor `ngModelOptions`\n ([296cfc](https://github.com/angular/angular.js/commit/296cfce40c25e9438bfa46a0eb27240707a10ffa))**:\n\nThe programmatic API for `ngModelOptions` has changed. You must now read options\nvia the `ngModelController.$options.getOption(name)` method, rather than accessing the\noption directly as a property of the `ngModelContoller.$options` object. This does not\naffect the usage in templates and only affects custom directives that might have been\nreading options for their own purposes.\n\nOne benefit of these changes, though, is that the `ngModelControler.$options` property\nis now guaranteed to be defined so there is no need to check before accessing.\n\nSo, previously:\n\n```\nvar myOption = ngModelController.$options && ngModelController.$options['my-option'];\n```\n\nand now:\n\n```\nvar myOption = ngModelController.$options.getOption('my-option');\n```\n\n### **jqLite** due to:\n- **[fc0c11](https://github.com/angular/angular.js/commit/fc0c11db845d53061430b7f05e773dcb3fb5b860)**:\n camelCase keys in `jqLite#data`\n\nPreviously, keys passed to the data method were left untouched.\nNow they are internally camelCased similarly to how jQuery handles it, i.e.\nonly single (!) hyphens followed by a lowercase letter get converted to an\nuppercase letter. This means keys `a-b` and `aB` represent the same data piece;\nwriting to one of them will also be reflected if you ask for the other one.\n\nIf you use Angular with jQuery, it already behaved in this way so no changes\nare required on your part.\n\nTo migrate the code follow the examples below:\n\nBEFORE:\n\n```js\n/* 1 */\nelem.data('my-key', 2);\nelem.data('myKey', 3);\n\n/* 2 */\nelem.data('foo-bar', 42);\nelem.data()['foo-bar']; // 42\nelem.data()['fooBar']; // undefined\n\n/* 3 */\nelem.data()['foo-bar'] = 1;\nelem.data()['fooBar'] = 2;\nelem.data('foo-bar'); // 1\n```\n\nAFTER:\n\n```js\n/* 1 */\n// Rename one of the keys as they would now map to the same data slot.\nelem.data('my-key', 2);\nelem.data('my-key2', 3);\n\n/* 2 */\nelem.data('foo-bar', 42);\nelem.data()['foo-bar']; // undefined\nelem.data()['fooBar']; // 42\n\n/* 3 */\nelem.data()['foo-bar'] = 1;\nelem.data()['fooBar'] = 2;\nelem.data('foo-bar'); // 2\n```\n\n- **[73050c](https://github.com/angular/angular.js/commit/73050cdda04675bfa6705dc841ddbbb6919eb048)**:\n align jqLite camelCasing logic with JQuery\n\nBefore, when Angular was used without jQuery, the key passed\nto the css method was more heavily camelCased; now only a single (!) hyphen\nfollowed by a lowercase letter is getting transformed. This also affects APIs\nthat rely on the css method, like ngStyle.\n\nIf you use Angular with jQuery, it already behaved in this way so no changes\nare needed on your part.\n\nTo migrate the code follow the example below:\n\nBefore:\n\nHTML:\n\n```html\n// All five versions used to be equivalent.\n
\n
\n
\n
\n
\n```\n\nJS:\n\n```js\n// All five versions used to be equivalent.\nelem.css('background_color', 'blue');\nelem.css('background:color', 'blue');\nelem.css('background-color', 'blue');\nelem.css('background--color', 'blue');\nelem.css('backgroundColor', 'blue');\n\n// All five versions used to be equivalent.\nvar bgColor = elem.css('background_color');\nvar bgColor = elem.css('background:color');\nvar bgColor = elem.css('background-color');\nvar bgColor = elem.css('background--color');\nvar bgColor = elem.css('backgroundColor');\n```\n\nAfter:\n\nHTML:\n\n```html\n// Previous five versions are no longer equivalent but these two still are.\n
\n
\n```\n\nJS:\n\n```js\n// Previous five versions are no longer equivalent but these two still are.\nelem.css('background-color', 'blue');\nelem.css('backgroundColor', 'blue');\n\n// Previous five versions are no longer equivalent but these two still are.\nvar bgColor = elem.css('background-color');\nvar bgColor = elem.css('backgroundColor');\n```\n\n- **[7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304)**: don't get/set properties when getting/setting boolean attributes\n\nPreviously, all boolean attributes were reflected into the corresponding property when calling a\nsetter and from the corresponding property when calling a getter, even on elements that don't treat\nthose attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to\nknow when to reflect the property. Note that this browser-level conversion differs between browsers;\nif you need to dynamically change the state of an element, you should modify the property, not the\nattribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed\ndescription about a related change in jQuery 1.9.\n\nThis change aligns jqLite with jQuery 3. To migrate the code follow the example below:\n\nBefore:\n\nCSS:\n\n```css\ninput[checked=\"checked\"] { ... }\n```\n\nJS:\n\n```js\nelem1.attr('checked', 'checked');\nelem2.attr('checked', false);\n```\n\nAfter:\n\nCSS:\n\n```css\ninput:checked { ... }\n```\n\nJS:\n\n```js\nelem1.prop('checked', true);\nelem2.prop('checked', false);\n```\n\n- **[3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a)**:\n don't remove a boolean attribute for `.attr(attrName, '')`\n\nBefore, using the `attr` method with an empty string as a value\nwould remove the boolean attribute. Now it sets it to its lowercase name as\nwas happening for every non-empty string so far. The only two values that remove\nthe boolean attribute are now null & false, just like in jQuery.\n\nTo migrate the code follow the example below:\n\nBefore:\n\n```js\nelem.attr(booleanAttrName, '');\n```\n\nAfter:\n\n```js\nelem.attr(booleanAttrName, false);\n```\n\nor:\n\n```js\nelem.attr(booleanAttrName, null);\n```\n\n- **[4e3624](https://github.com/angular/angular.js/commit/4e3624552284d0e725bf6262b2e468cd2c7682fa)**:\n remove the attribute for `.attr(attribute, null)`\n\nInvoking `elem.attr(attributeName, null)` would set the\n`attributeName` attribute value to a string `\"null\"`, now it removes the\nattribute instead.\n\nTo migrate the code follow the example below:\n\nBefore:\n\n```js\nelem.attr(attributeName, null);\n```\n\nAfter:\n\n```js\nelem.attr(attributeName, \"null\");\n```\n\n- **[d882fd](https://github.com/angular/angular.js/commit/d882fde2e532216e7cf424495db1ccb5be1789f8)**:\n return [] for .val() on `\n \n \n \n```\n\nJavaScript:\n\n```js\n var value = $element.val();\n if (value) {\n /* do something */\n }\n```\n\nAfter:\n\nHTML:\n\n```html\n \n```\n\nJavaScript:\n\n```js\n var value = $element.val();\n if (value.length > 0) {\n /* do something */\n }\n```\n\n\n### `ngModel` due to:\n\n- **[7bc71a](https://github.com/angular/angular.js/commit/7bc71adc63bb6bb609b44dd2d3ea8fb0cd3f300b)**:\n treat synchronous validators as boolean always\n\nPreviously, only a literal `false` return would resolve as the\nsynchronous validator failing. Now, all falsy JavaScript values\nare treated as failing the validator, as one would naturally expect.\n\nSpecifically, the values `0` (the number zero), `null`, `NaN` and `''` (the\nempty string) used to be considered valid (passing) and they are now considered\ninvalid (failing). The value `undefined` was treated similarly to a pending\nasynchronous validator, causing the validation to be pending. `undefined` is\nalso now considered invalid.\n\nTo migrate, make sure your synchronous validators are returning either a\nliteral `true` or a literal `false` value. For most code, we expect this to\nalready be the case. Only a very small subset of projects will be affected.\n\nNamely, anyone using `undefined` or any falsy value as a return will now see\ntheir validation failing, whereas previously falsy values other than `undefined`\nwould have been seen as passing and `undefined` would have been seen as pending.\n\n- **[9e24e7](https://github.com/angular/angular.js/commit/9e24e774a558143b3478536911a3a4c1714564ba)**:\n change controllers to use prototype methods\n\nThe use of prototype methods instead of new methods per instance removes the ability to pass\nNgModelController and FormController methods without context.\n\nFor example\n\n```js\n$scope.$watch('something', myNgModelCtrl.$render)\n```\n\nwill no longer work because the `$render` method is passed without any context.\nThis must now be replaced with\n\n```js\n$scope.$watch('something', function() {\n myNgModelCtrl.$render();\n})\n```\n\nor possibly by using `Function.prototype.bind` or `angular.bind`.\n\n\n### `aria/ngModel` due to:\n\n- **[975a61](https://github.com/angular/angular.js/commit/975a6170efceb2a5e6377c57329731c0636eb8c8)**:\n do not overwrite the default `$isEmpty()` method for checkboxes\n\nCustom `checkbox`-shaped controls (e.g. checkboxes, menuitemcheckboxes), no longer have a custom\n`$isEmpty()` method on their `NgModelController` that checks for `value === false`. Unless\noverwritten, the default `$isEmpty()` method will be used, which treats `undefined`, `null`, `NaN`\nand `''` as \"empty\".\n\n**Note:** The `$isEmpty()` method is used to determine if the checkbox is checked (\"not empty\" means\n \"checked\") and thus it can indirectly affect other things, such as the control's validity\n with respect to the `required` validator (e.g. \"empty\" + \"required\" --> \"invalid\").\n\nBefore:\n\n```js\nvar template = '';\nvar customCheckbox = $compile(template)(scope);\nvar ctrl = customCheckbox.controller('ngModel');\n\nscope.$apply('value = false');\nconsole.log(ctrl.$isEmpty()); //--> true\n\nscope.$apply('value = true');\nconsole.log(ctrl.$isEmpty()); //--> false\n\nscope.$apply('value = undefined'/* or null or NaN or '' */);\nconsole.log(ctrl.$isEmpty()); //--> false\n```\n\nAfter:\n\n```js\nvar template = '';\nvar customCheckbox = $compile(template)(scope);\nvar ctrl = customCheckbox.controller('ngModel');\n\nscope.$apply('value = false');\nconsole.log(ctrl.$isEmpty()); //--> false\n\nscope.$apply('value = true');\nconsole.log(ctrl.$isEmpty()); //--> false\n\nscope.$apply('value = undefined'/* or null or NaN or '' */);\nconsole.log(ctrl.$isEmpty()); //--> true\n```\n\n--\nIf you want to have a custom `$isEmpty()` method, you need to overwrite the default. For example:\n\n```js\n.directive('myCheckbox', function myCheckboxDirective() {\n return {\n require: 'ngModel',\n link: function myCheckboxPostLink(scope, elem, attrs, ngModelCtrl) {\n ngModelCtrl.$isEmpty = function myCheckboxIsEmpty(value) {\n return !value; // Any falsy value means \"empty\"\n\n // Or to restore the previous behavior:\n // return value === false;\n };\n }\n };\n})\n```\n\n### `$http` due to:\n- **[b54a39](https://github.com/angular/angular.js/commit/b54a39e2029005e0572fbd2ac0e8f6a4e5d69014)**:\n remove deprecated callback methods: `success()/error()`\n\n`$http`'s deprecated custom callback methods - `success()` and `error()` - have been removed.\nYou can use the standard `then()`/`catch()` promise methods instead, but note that the method\nsignatures and return values are different.\n\n`success(fn)` can be replaced with `then(fn)`, and `error(fn)` can be replaced with either\n`then(null, fn)` or `catch(fn)`.\n\nBefore:\n\n```js\n$http(...).\n success(function onSuccess(data, status, headers, config) {\n // Handle success\n ...\n }).\n error(function onError(data, status, headers, config) {\n // Handle error\n ...\n });\n```\n\nAfter:\n\n```js\n$http(...).\n then(function onSuccess(response) {\n // Handle success\n var data = response.data;\n var status = response.status;\n var statusText = response.statusText;\n var headers = response.headers;\n var config = response.config;\n ...\n }, function onError(response) {\n // Handle error\n var data = response.data;\n var status = response.status;\n var statusText = response.statusText;\n var headers = response.headers;\n var config = response.config;\n ...\n });\n\n// or\n\n$http(...).\n then(function onSuccess(response) {\n // Handle success\n var data = response.data;\n var status = response.status;\n var statusText = response.statusText;\n var headers = response.headers;\n var config = response.config;\n ...\n }).\n catch(function onError(response) {\n // Handle error\n var data = response.data;\n var status = response.status;\n var statusText = response.statusText;\n var headers = response.headers;\n var config = response.config;\n ...\n });\n```\n\n**Note:**\nThere is a subtle difference between the variations showed above. When using\n`$http(...).success(onSuccess).error(onError)` or `$http(...).then(onSuccess, onError)`, the\n`onError()` callback will only handle errors/rejections produced by the `$http()` call. If the\n`onSuccess()` callback produces an error/rejection, it won't be handled by `onError()` and might go\nunnoticed. In contrast, when using `$http(...).then(onSuccess).catch(onError)`, `onError()` will\nhandle errors/rejections produced by both `$http()` _and_ `onSuccess()`.\n\n- **[fb6634](https://github.com/angular/angular.js/commit/fb663418710736161a6b5da49c345e92edf58dcb)**:\n JSONP callback must be specified by `jsonpCallbackParam` config\n\nYou can no longer use the `JSON_CALLBACK` placeholder in your JSONP requests.\nInstead you must provide the name of the query parameter that will pass the\ncallback via the `jsonpCallbackParam` property of the config object, or app-wide via\nthe `$http.defaults.jsonpCallbackParam` property, which is `\"callback\"` by default.\n\nBefore this change:\n\n```js\n$http.json('trusted/url?callback=JSON_CALLBACK');\n$http.json('other/trusted/url', {params: {cb:'JSON_CALLBACK'}});\n```\n\nAfter this change:\n\n```js\n$http.json('trusted/url');\n$http.json('other/trusted/url', {jsonpCallbackParam:'cb'});\n```\n\n- **[6476af](https://github.com/angular/angular.js/commit/6476af83cd0418c84e034a955b12a842794385c4)**:\n JSONP requests now require a trusted resource URL\n\nAll JSONP requests now require the URL to be trusted as resource URLs.\nThere are two approaches to trust a URL:\n\n**Whitelisting with the `$sceDelegateProvider.resourceUrlWhitelist()`\nmethod.**\n\nYou configure this list in a module configuration block:\n\n```js\nappModule.config(['$sceDelegateProvider', function($sceDelegateProvider) {\n $sceDelegateProvider.resourceUrlWhitelist([\n // Allow same origin resource loads.\n 'self',\n // Allow JSONP calls that match this pattern\n 'https://some.dataserver.com/**.jsonp?**'\n ]);\n}]);\n```\n\n**Explicitly trusting the URL via the `$sce.trustAsResourceUrl(url)`\nmethod.**\n\nYou can pass a trusted object instead of a string as a URL to the `$http`\nservice:\n\n```js\nvar promise = $http.jsonp($sce.trustAsResourceUrl(url));\n```\n\n- **[4f6f2b](https://github.com/angular/angular.js/commit/4f6f2bce4ac93b85320e42e5023c09d099779b7d)**:\n properly increment/decrement `$browser.outstandingRequestCount`\n\nHTTP requests now update the outstanding request count synchronously.\nPreviously the request count would not have been updated until the\nrequest to the server is actually in flight. Now the request count is\nupdated before the async interceptor is called.\n\nThe new behaviour is correct but it may change the expected behaviour in\na small number of e2e test cases where an async request interceptor is\nbeing used.\n\n\n### `$q` due to:\n\n- **[e13eea](https://github.com/angular/angular.js/commit/e13eeabd7e34a78becec06cfbe72c23f2dcb85f9)**:\n treat thrown errors as regular rejections\n\nPreviously, throwing an error from a promise's `onFulfilled` or `onRejection` handlers, would result\nin passing the error to the `$exceptionHandler()` (in addition to rejecting the promise with the\nerror as reason).\n\nNow, a thrown error is treated exactly the same as a regular rejection. This applies to all\nservices/controllers/filters etc that rely on `$q` (including built-in services, such as `$http` and\n`$route`). For example, `$http`'s `transformRequest/Response` functions or a route's `redirectTo`\nfunction as well as functions specified in a route's `resolve` object, will no longer result in a\ncall to `$exceptionHandler()` if they throw an error. Other than that, everything will continue to\nbehave in the same way; i.e. the promises will be rejected, route transition will be cancelled,\n`$routeChangeError` events will be broadcasted etc.\n\n- **[c9dffd](https://github.com/angular/angular.js/commit/c9dffde1cb167660120753181cb6d01dc1d1b3d0)**:\n report promises with non rejection callback\n\nUnhandled rejected promises will be logged to $exceptionHandler.\n\nTests that depend on specific order or number of messages in $exceptionHandler\nwill need to handle rejected promises report.\n\n\n### `ngTransclude` due to:\n\n- **[32aa7e](https://github.com/angular/angular.js/commit/32aa7e7395527624119e3917c54ee43b4d219301)**:\n use fallback content if only whitespace is provided\n\nPreviously whitespace only transclusion would be treated as the transclusion\nbeing \"not empty\", which meant that fallback content was not used in that\ncase.\n\nNow if you only provide whitespace as the transclusion content, it will be\nassumed to be empty and the fallback content will be used instead.\n\nIf you really do want whitespace then you can force it to be used by adding\na comment to the whitespace.\n\nPreviously this would not fallback to default content:\n\n```html\n\n\n```\n\nNow the whitespace between the opening and closing tags is treated as empty. To force the\nprevious behaviour simply add a comment:\n\n```html\n\n\n```\n\n\n### `$compile` due to:\n\n- **[13c252](https://github.com/angular/angular.js/commit/13c2522baf7c8f616b2efcaab4bffd54c8736591)**:\n correctly merge consecutive text nodes on IE11\n\n**Note:** Everything described below affects **IE11 only**.\n\nPreviously, consecutive text nodes would not get merged if they had no parent. They will now, which\nmight have unexpected side effects in the following cases:\n\n1. Passing an array or jqLite/jQuery collection of parent-less text nodes to `$compile` directly:\n\n ```js\n // Assuming:\n var textNodes = [\n document.createTextNode('{{'),\n document.createTextNode('\"foo:\"'),\n document.createTextNode('}}')\n ];\n var compiledNodes = $compile(textNodes)($rootScope);\n\n // Before:\n console.log(compiledNodes.length); // 3\n console.log(compiledNodes.text()); // {{'foo'}}\n\n // After:\n console.log(compiledNodes.length); // 1\n console.log(compiledNodes.text()); // foo\n\n // To get the old behavior, compile each node separately:\n var textNodes = [\n document.createTextNode('{{'),\n document.createTextNode('\"foo\"'),\n document.createTextNode('}}')\n ];\n var compiledNodes = angular.element(textNodes.map(function (node) {\n return $compile(node)($rootScope)[0];\n }));\n ```\n\n2. Using multi-slot transclusion with non-consecutive, default-content text nodes (that form\n interpolated expressions when merged):\n\n ```js\n // Assuming the following component:\n .component('someThing', {\n template: ''\n transclude: {\n ignored: 'veryImportantContent'\n }\n })\n ```\n\n ```html\n \n \n {{\n Nooot\n 'foo'}}\n \n\n \n \n \n {{ <-- Two separate\n 'foo'}} <-- text nodes\n \n \n\n \n \n \n foo <-- The text nodes were merged into `{{'foo'}}`, which was then interpolated\n \n \n\n \n \n \n {{\n Nooot\n 'foo'}}\n \n\n \n \n \n {{ <-- Two separate\n 'foo'}} <-- nodes\n \n \n ```\n\n- **[b89c21](https://github.com/angular/angular.js/commit/b89c2181a9a165e06c027390164e08635ec449f4)**:\n move check for interpolation of `on-\"event\"` attributes to compile time\n\nUsing interpolation in any on* event attributes (e.g. `
\n\n\n{# Be aware that we need these extra new lines here or marked will not realize that the
\n above is HTML and wrap each line in a

- thus breaking the HTML #}\n" }, { "path": "docs/config/templates/examples/template.css", "content": "{$ doc.fileContents $}" }, { "path": "docs/config/templates/examples/template.html", "content": "{$ doc.fileContents $}" }, { "path": "docs/config/templates/examples/template.js", "content": "(function(angular) {\n 'use strict';\n{$ doc.fileContents $}\n})(window.angular);" }, { "path": "docs/config/templates/examples/template.json", "content": "{$ doc.fileContents $}" }, { "path": "docs/config/templates/examples/template.protractor", "content": "{$ doc.fileContents $}" }, { "path": "docs/config/templates/examples/template.scenario", "content": "{$ doc.fileContents $}" }, { "path": "docs/config/templates/examples/template.spec", "content": "{$ doc.fileContents $}" }, { "path": "docs/config/templates/ngdoc/api/api.template.html", "content": "{% extends \"base.template.html\" %}\n{% import \"lib/deprecated.html\" as x -%}\n\n{% block content %}\n\n\n  View Source\n\n\n{% block header %}\n

\n

{$ doc.name $}

\n
    \n {% block related_components %}{% endblock %}\n
  1. \n - {$ doc.docType $} in module {$ doc.moduleDoc.name $}\n
    2. \n
\n
\n{% endblock %}\n\n{$ x.deprecatedBlock(doc) $}\n\n{% block description %}\n
\n

Overview

\n {$ doc.description | marked $}\n
\n{% endblock %}\n\n{% if doc.knownIssues %}\n

Known Issues

\n{% for issue in doc.knownIssues -%}\n
\n {$ issue | marked $}\n
\n{% endfor -%}\n{% endif %}\n\n
\n {% block dependencies %}\n {%- if doc.requires %}\n

Dependencies

\n
    \n {% for require in doc.requires %}
  • {$ require | link $}
    • {% endfor %}\n
\n {% endif -%}\n {% endblock %}\n\n {% block additional %}\n {% endblock %}\n\n {% block examples %}\n {%- if doc.examples %}\n

{$ \"Examples\" if doc.examples | length > 1 else \"Example\" $}

\n {%- for example in doc.examples -%}\n {$ example | marked $}\n {%- endfor -%}\n {% endif -%}\n {% endblock %}\n
\n\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/componentGroup.template.html", "content": "{% block content %}\n

\n {%- if doc.title -%}\n {$ doc.title $}\n {%- elif doc.moduleName -%}\n {$ doc.groupType | title $} components in {$ doc.moduleName | code $}\n {%- else -%}\n Pages\n {%- endif -%}\n

\n\n{$ doc.description | marked $}\n\n
\n
\n \n \n \n \n \n {% for page in doc.components %}\n \n \n \n \n {% endfor %}\n
NameDescription
{$ page.id | link(page.name, page) $}{$ page.description | firstParagraph | marked $}
\n
\n
\n\n{% endblock %}" }, { "path": "docs/config/templates/ngdoc/api/directive.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% extends \"api/api.template.html\" %}\n\n{% block additional %}\n

Directive Info

\n
    \n {% if doc.scope %}
  • This directive creates new scope.
    • {% endif %}\n
  • This directive executes at priority level {$ doc.priority $}.
    • \n {% if doc.multiElement %}
  • This directive can be used as {@link $compile#-multielement- multiElement}
    • {% endif %}\n
\n\n {% block usage %}\n

Usage

\n
\n {% if doc.usage %}\n {$ doc.usage | marked $}\n {% else %}\n
    \n {% if doc.restrict.element %}\n
  • as element:\n {% code %}\n <{$ doc.name | dashCase $}\n {%- for param in doc.params %}\n {$ lib.directiveParam(param.alias or param.name, param.type, '=\"', '\"') $}\n {%- endfor %}>\n ...\n \n {% endcode %}\n
    • \n {% endif -%}\n\n\n {% set hasNameAsParam = false %}\n\n {# when a directive's name is not a parameter (i.e. doesn't take a value),\n add the directive name to the list of attributes and/or css classes #}\n\n {%- for param in doc.params %}\n {% set hasNameAsParam = true if param.name === doc.name else hasNameAsParam %}\n {%- endfor %}\n\n {%- if doc.restrict.attribute -%}\n
  • as attribute:\n {% code %}\n <{$ doc.element $}\n {%- if not hasNameAsParam %}\n {$ lib.directiveParam(doc.name, {}, '', '') $}\n {%- endif -%}\n {%- for param in doc.params %}\n {$ lib.directiveParam(param.name, param.type, '=\"', '\"') $}\n {%- endfor %}>\n ...\n \n {% endcode %}\n
    • \n {% endif -%}\n\n {%- if doc.restrict.cssClass -%}\n\n
  • as CSS class:\n {% code %}\n {% set sep = joiner(' ') %}\n <{$ doc.element $} class=\"\n {%- if not hasNameAsParam -%}\n {$ sep() $}{$ lib.directiveParam(doc.name, {}, '', '') $}\n {%- endif -%}\n {%- for param in doc.params -%}\n {$ sep() $}{$ lib.directiveParam(param.name, param.type, ': ', ';') $}\n {%- endfor %}\"> ... \n {% endcode %}\n
    • \n {% endif -%}\n\n {%- endif %}\n
\n {% endblock -%}\n\n {% include \"lib/params.template.html\" %}\n {% include \"lib/events.template.html\" %}\n\n {%- if doc.animations %}\n

Animations

\n {$ doc.animations | marked $}\n {$ 'module:ngAnimate.$animate' | link('Click here', doc) $} to learn more about the steps involved in the animation.\n {%- endif -%}\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/filter.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% extends \"api/api.template.html\" %}\n\n{% block additional %}\n

Usage

\n

In HTML Template Binding

\n {% if doc.usage %}\n {$ doc.usage | code $}\n {% else %}\n {% code -%}\n {{ {$ doc.name $}_expression | {$ doc.name $}\n {%- for param in doc.params %}{% if not loop.first %} : {$ param.name $}{% endif %}{% endfor -%}\n }}\n {%- endcode %}\n {% endif %}\n\n

In JavaScript

\n {% code -%}\n {%- set sep = joiner(', ') -%}\n $filter('{$ doc.name $}')({% for param in doc.params %}{$ sep() $}{$ param.name $}{% endfor -%})\n {%- endcode %}\n\n {% include \"lib/params.template.html\" %}\n {% include \"lib/this.template.html\" %}\n {% include \"lib/returns.template.html\" %}\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/function.template.html", "content": "{% extends \"api/object.template.html\" %}\n" }, { "path": "docs/config/templates/ngdoc/api/input.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% extends \"api/directive.template.html\" %}\n\n{% block usage %}\n

Usage

\n {% code %}\n \n {% endcode %}\n{% endblock %}" }, { "path": "docs/config/templates/ngdoc/api/module.template.html", "content": "{% extends \"base.template.html\" %}\n{% import \"lib/deprecated.html\" as x %}\n\n{% block content %}\n

\n {% if doc.title %}{$ doc.title | marked $}{% else %}{$ doc.name | code $}{% endif %}\n

\n\n{$ x.deprecatedBlock(doc) $}\n\n

Installation

\n{% if doc.installation or doc.installation == '' %}\n {$ doc.installation | marked $}\n{% else %}\n\n

First, get the file:

\n
    \n
  • \n Google CDN e.g.\n {% code %}\"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/{$ doc.packageFile $}\"{% endcode %}\n
    • \n
  • \n NPM e.g.\n {% code %}npm install --save {$ doc.packageName $}@X.Y.Z{% endcode %}\n or\n {% code %}yarn add {$ doc.packageName $}@X.Y.Z{% endcode %}\n
    • \n
  • \n Bower e.g.\n {% code %}bower install {$ doc.packageName $}#X.Y.Z{% endcode %}\n
    • \n
  • \n code.angularjs.org\n (discouraged for production use) e.g.\n {% code %}\"//code.angularjs.org/X.Y.Z/{$ doc.packageFile $}\"{% endcode %}\n
    • \n
\n

where X.Y.Z is the AngularJS version you are running.

\n\n

Then, include {$ doc.packageFile | code $} in your HTML:

\n\n {% code %}\n \n \n {% endcode %}\n\n

Finally, load the module in your application by adding it as a dependent module:

\n {% code %}\n angular.module('app', ['{$ doc.name $}']);\n {% endcode %}\n\n

With that you're ready to get started!

\n{% endif %}\n\n{$ doc.description | marked $}\n\n{% if doc.knownIssueDocs %}\n
\n

Known Issues

\n \n \n {% for issueDoc in doc.knownIssueDocs -%}\n \n \n \n \n {% endfor -%}\n
NameDescription
{$ issueDoc.id | link(issueDoc.name, issueDoc) $}\n {% for issue in issueDoc.knownIssues -%}\n {$ issue | marked $} {% if not loop.last %}
{% endif %}\n {% endfor -%}\n
\n
\n{% endif %}\n\n\n{% if doc.componentGroups.length %}\n
\n

Module Components

\n {% for componentGroup in doc.componentGroups %}\n
\n

{$ componentGroup.groupType | title $}

\n \n \n \n \n \n {% for component in componentGroup.components %}\n \n \n \n \n {% endfor %}\n
NameDescription
{$ component.id | link(component.name, component) $}{$ component.description | firstParagraph | marked $}
\n
\n {% endfor %}\n
\n{% endif %}\n\n{% if doc.usage %}\n

Usage

\n {$ doc.usage | marked $}\n{% endif %}\n\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/object.template.html", "content": "{% import \"lib/macros.html\" as lib %}\n{% extends \"api/api.template.html\" %}\n\n{% block additional %}\n\n {% if doc.params or doc.returns or doc.this or doc.kind == 'function' -%}\n

Usage

\n {% if doc.usage %}\n {$ doc.usage | code $}\n {% else %}\n {$ lib.functionSyntax(doc) $}\n {% endif %}\n\n {% include \"lib/params.template.html\" %}\n {% include \"lib/this.template.html\" %}\n {% include \"lib/returns.template.html\" %}\n {%- endif %}\n\n {% include \"lib/methods.template.html\" %}\n {% include \"lib/events.template.html\" %}\n {% include \"lib/properties.template.html\" %}\n\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/provider.template.html", "content": "{% extends \"api/object.template.html\" %}\n\n{% block related_components %}\n {% if doc.serviceDoc -%}\n
  • \n - {$ doc.serviceDoc.name $}\n
    • \n {%- endif %}\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/service.template.html", "content": "{% extends \"api/object.template.html\" %}\n\n{% block related_components %}\n {% if doc.providerDoc -%}\n
  • \n - {$ doc.providerDoc.name $}\n
    • \n {%- endif %}\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/api/type.template.html", "content": "{% extends \"api/object.template.html\" %}\n" }, { "path": "docs/config/templates/ngdoc/base.template.html", "content": " Improve this Doc\n\n{% block content %}\n{% endblock %}\n" }, { "path": "docs/config/templates/ngdoc/lib/deprecated.html", "content": "{% macro deprecatedBlock(doc) %}{% if doc.deprecated %}\n
    \n
    Deprecated:\n {% if doc.deprecated.sinceVersion %}(since {$ doc.deprecated.sinceVersion $}) {% endif %}\n {% if doc.deprecated.removeVersion %}(to be removed in {$ doc.deprecated.removeVersion $}) {% endif %}\n
    \n {$ doc.deprecated.description | marked $}\n
    \n{% endif %}{% endmacro %}" }, { "path": "docs/config/templates/ngdoc/lib/events.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% import \"lib/deprecated.html\" as x -%}\n\n{%- if doc.events %}\n

    Events

    \n
      \n {%- for event in doc.events %}\n
    • \n

      {$ event.name $}

      \n
      {$ event.description | marked $}
      \n\n {$ x.deprecatedBlock(event) $}\n\n {%- if event.eventType == 'listen' %}\n
      \n

      Listen on: {$ event.eventTarget $}

      \n
      \n {%- else %}\n
      \n

      Type:

      \n
      {$ event.eventType $}
      \n
      \n
      \n

      Target:

      \n
      {$ event.eventTarget $}
      \n
      \n {% endif -%}\n {%- if event.params %}\n
      \n

      Parameters

      \n {$ lib.paramTable(event.params) $}\n
      \n {%- endif -%}\n
      • \n {% endfor -%}\n
    \n{% endif -%}\n" }, { "path": "docs/config/templates/ngdoc/lib/macros.html", "content": "{% macro typeList(types) -%}\n{% for typeName in types %}{$ typeName | escape $}{% endfor %}\n{%- endmacro -%}\n\n{%- macro paramTable(params) %}\n\n \n \n \n \n \n \n \n \n {% for param in params %}\n \n \n \n \n \n {% endfor %}\n \n
    ParamTypeDetails
    \n {$ param.name $}\n {% if param.alias %}| {$ param.alias $}{% endif %}\n {% if param.optional %}
    (optional)
    {% endif %}\n     		\n {$ typeList(param.typeList) $}\n \n {$ param.description | marked $}\n {% if param.defaultValue %}

    (default: {$ param.defaultValue $})

    {% endif %}\n
    \n{% endmacro -%}\n\n\n{%- macro directiveParam(name, type, join, sep) %}\n {%- if type.optional %}[{% endif -%}\n {$ name | dashCase $}{$ join $}{$ type.name $}{$ sep $}\n {%- if type.optional %}]{% endif -%}\n{% endmacro -%}\n\n{%- macro functionSyntax(fn) %}\n {%- set sep = joiner(', ') -%}\n {% marked -%}\n `{$ fn.name $}({%- for param in fn.params %}{$ sep() $}\n {%- if param.type.optional %}[{% endif -%}\n {$ param.name $}\n {%- if param.type.optional %}]{% endif -%}\n {% endfor %});`\n {%- endmarked %}\n{% endmacro -%}\n\n{%- macro typeInfo(fn) -%}\n\n \n \n \n \n
    {$ typeList(fn.typeList) $}{$ fn.description | marked $}
    \n{%- endmacro -%}\n" }, { "path": "docs/config/templates/ngdoc/lib/methods.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% import \"lib/deprecated.html\" as x -%}\n\n{%- if doc.methods %}\n

    Methods

    \n
      \n {%- for method in doc.methods %}\n
    • \n

      {$ lib.functionSyntax(method) $}

      \n
      {$ method.description | marked $}
      \n\n {$ x.deprecatedBlock(method) $}\n\n {% if method.params %}\n

      Parameters

      \n {$ lib.paramTable(method.params) $}\n {% endif %}\n\n {% if method.this %}\n

      Method's `this`

      \n {$ method.this | marked $}\n {% endif %}\n\n {% if method.returns %}\n

      Returns

      \n {$ lib.typeInfo(method.returns) $}\n {% endif %}\n\n {%- if method.examples %}\n

      {$ \"Examples\" if method.examples | length > 1 else \"Example\" $}

      \n {%- for example in method.examples -%}\n {$ example | marked $}\n {%- endfor -%}\n {% endif -%}\n\n
      • \n {% endfor -%}\n
    \n{%- endif -%}\n" }, { "path": "docs/config/templates/ngdoc/lib/params.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{%- if doc.params %}\n
    \n

    Arguments

    \n{$ lib.paramTable(doc.params) $}\n
    \n{%- endif -%}\n" }, { "path": "docs/config/templates/ngdoc/lib/properties.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% import \"lib/deprecated.html\" as x -%}\n\n{%- if doc.properties %}\n

    Properties

    \n
      \n {%- for property in doc.properties %}\n
    • \n

      {$ property.name | code $}

      \n {$ lib.typeInfo(property) $}\n {$ x.deprecatedBlock(property) $}\n
      • \n {% endfor -%}\n
    \n{%- endif -%}\n" }, { "path": "docs/config/templates/ngdoc/lib/returns.template.html", "content": "{% import \"lib/macros.html\" as lib -%}\n{% if doc.returns -%}\n

    Returns

    \n{$ lib.typeInfo(doc.returns) $}\n{%- endif %}" }, { "path": "docs/config/templates/ngdoc/lib/this.template.html", "content": "{% if doc.this %}\n

    Method's `this`

    \n{$ doc.this | marked $}\n{% endif %}\n" }, { "path": "docs/config/templates/ngdoc/overview.template.html", "content": "{% extends \"base.template.html\" %}\n\n{% block content %}\n{$ doc.description | marked $}\n{% endblock %}" }, { "path": "docs/content/api/index.ngdoc", "content": "@ngdoc overview\n@name API Reference\n@description\n\n# AngularJS API Docs\n
    \nAngularJS support has officially ended as of January 2022.\n[See what ending support means](https://docs.angularjs.org/misc/version-support-status)\nand [read the end of life announcement](https://goo.gle/angularjs-end-of-life).\n\nVisit [angular.io](https://angular.io) for the actively supported Angular.\n
    \n\n## Welcome to the AngularJS API docs page.\n\nThese pages contain the AngularJS reference materials for version .\n\n\nThe documentation is organized into **{@link guide/module modules}** which contain various components of an AngularJS application.\nThese components are {@link guide/directive directives}, {@link guide/services services}, {@link guide/filter filters}, {@link guide/providers providers}, {@link guide/templates templates}, global APIs, and testing mocks.\n\nThere is also a {@link guide/index guide} with articles on various topics, and a list of external resources.\n\n
    \n**AngularJS Prefixes `$` and `$$`**:\n\nTo prevent accidental name collisions with your code,\nAngularJS prefixes names of public objects with `$` and names of private objects with `$$`.\nPlease do not use the `$` or `$$` prefix in your code.\n
    \n\n## AngularJS Modules\n\n\n## {@link ng ng (core module)}\nThis module is provided by default and contains the core components of AngularJS.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    {@link ng#directive Directives}\n

    \n This is the core collection of directives you would use in your template code to build an AngularJS application.\n

    \n\n

    \n Some examples include:\n {@link ng.directive:ngClick ngClick},\n {@link directive:ngInclude ngInclude},\n {@link directive:ngRepeat ngRepeat},\n etc…
    \n

    \n
    \n {@link ng#service Services / Factories}\n \n

    \n This is the core collection of services which are used within the DI of your application.\n

    \n

    \n Some examples include:\n {@link ng.$compile $compile},\n {@link ng.$http $http},\n {@link ng.$location $location},\n etc…\n

    \n

    \n {@link ng#filter Filters}\n \n

    \n The core filters available in the ng module are used to transform template data before it is rendered within directives and expressions.\n

    \n

    \n Some examples include:\n {@link ng.filter:filter filter},\n {@link ng.filter:date date},\n {@link ng.filter:currency currency},\n {@link ng.filter:lowercase lowercase},\n {@link ng.filter:uppercase uppercase},\n etc...\n

    \n
    \n {@link ng#function Global APIs}\n \n

    \n The core global API functions are attached to the `angular` object. These core functions are useful for low level JavaScript operations within your application.\n

    \n

    \n Some examples include:\n {@link angular.copy angular.copy()},\n {@link angular.equals angular.equals()},\n {@link angular.element angular.element()},\n etc...\n

    \n
    \n\n\n## {@link ngRoute ngRoute}\n\nUse ngRoute to enable URL routing to your application. The ngRoute module supports URL management via both hashbang and HTML5 pushState.\n\n
    Include the **angular-route.js** file and set **ngRoute** as a dependency for this to work in your application.
    \n\n\n \n \n \n \n \n \n \n \n
    \n {@link ngRoute#service Services / Factories}\n \n The following services are used for route management:\n
      \n
    • {@link ngRoute.$routeParams $routeParams} is used to access the querystring values present in the URL.
      • \n
    • {@link ngRoute.$route $route} is used to access the details of the route that is currently being accessed.
      • \n
    • {@link ngRoute.$routeProvider $routeProvider} is used to register routes for the application.
      • \n
    \n
    \n {@link ngRoute#directive Directives}\n \n The {@link ngRoute.directive:ngView ngView} directive will display the template of the current route within the page.\n
    \n\n\n## {@link ngAnimate ngAnimate}\n\nUse ngAnimate to enable animation features within your application. Various core AngularJS directives will provide\nanimation hooks into your application when ngAnimate is included. Animations are defined by using CSS transitions/animations\nor JavaScript callbacks.\n\n
    Include the **angular-animate.js** file and set **ngAnimate** as a dependency for this to work in your application.
    \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n
    \n {@link ngAnimate#service Services / Factories}\n \n Use {@link ng.$animate $animate} to trigger animation operations within your directive code.\n
    \n {@link ngAnimate CSS-based animations}\n \n Follow ngAnimate’s CSS naming structure to reference CSS transitions / keyframe animations in AngularJS. Once defined, the animation can be triggered by referencing the CSS class within the HTML template code.\n
    \n {@link ngAnimate JS-based animations}\n \n Use {@link angular.Module#animation module.animation()} to register a JavaScript animation. Once registered, the animation can be triggered by referencing the CSS class within the HTML template code.\n
    \n\n## {@link ngAria ngAria}\n\nUse ngAria to inject common accessibility attributes into directives and improve the experience for users with disabilities.\n\n
    Include the **angular-aria.js** file and set ngAria as a dependency for this to work in your application.
    \n\n\n \n \n \n \n
    \n {@link ngAria#service Services}\n \n

    \n The {@link ngAria.$aria $aria} service contains helper methods for applying ARIA attributes to HTML.\n

    \n

    \n {@link ngAria.$ariaProvider $ariaProvider} is used for configuring ARIA attributes.\n

    \n
    \n\n## {@link ngResource ngResource}\n\nUse the ngResource module when querying and posting data to a REST API.\n\n
    Include the **angular-resource.js** file and set **ngResource** as a dependency for this to work in your application.
    \n\n\n \n \n \n \n
    \n {@link ngResource#service Services / Factories}\n \n The {@link ngResource.$resource $resource} service is used to define RESTful objects which communicate with a REST API.\n
    \n\n## {@link ngCookies ngCookies}\n\nUse the ngCookies module to handle cookie management within your application.\n\n
    Include the **angular-cookies.js** file and set **ngCookies** as a dependency for this to work in your application.
    \n\n\n \n \n \n \n
    \n {@link ngCookies#service Services / Factories}\n \n The {@link ngCookies.$cookies $cookies} service is a convenient wrapper to store simple data within browser cookies.\n
    \n\n## {@link ngTouch ngTouch}\n\nUse ngTouch when developing for mobile browsers/devices.\n\n
    Include the **angular-touch.js** file and set **ngTouch** as a dependency for this to work in your application.
    \n\n\n \n \n \n \n \n \n \n \n
    \n {@link ngTouch#service Services / Factories}\n \n The {@link ngTouch.$swipe $swipe} service is used to register and manage mobile DOM events.\n
    \n {@link ngTouch#directive Directives}\n \n Various directives are available in ngTouch to emulate mobile DOM events.\n
    \n\n## {@link ngSanitize ngSanitize}\n\nUse ngSanitize to securely parse and manipulate HTML data in your application.\n\n
    Include the **angular-sanitize.js** file and set **ngSanitize** as a dependency for this to work in your application.
    \n\n\n \n \n \n \n \n \n \n \n
    \n {@link ngSanitize#service Services / Factories}\n \n The {@link ngSanitize.$sanitize $sanitize} service is used to clean up dangerous HTML code in a quick and convenient way.\n
    \n {@link ngSanitize#filter Filters}\n \n The {@link ngSanitize.filter:linky linky filter} is used to turn URLs into HTML links within the provided string.\n
    \n\n## {@link ngMock ngMock}\n\nUse ngMock to inject and mock modules, factories, services and providers within your unit tests.\n\n
    Include the **angular-mocks.js** file into your test runner for this to work.
    \n\n\n \n \n \n \n \n \n \n \n
    \n {@link ngMock#service Services / Factories}\n \n

    \n ngMock will extend the behavior of various core services to become testing aware and manageable in a synchronous manner.\n

    \n\n

    \n Some examples include:\n {@link ngMock.$timeout $timeout},\n {@link ngMock.$interval $interval},\n {@link ngMock.$log $log},\n {@link ngMock.$httpBackend $httpBackend},\n etc...\n

    \n

    \n {@link ngMock#function Global APIs}\n \n

    \n Various helper functions are available to inject and mock modules within unit test code.\n

    \n\n

    \n Some examples\n {@link angular.mock.inject inject()},\n {@link angular.mock.module module()},\n {@link angular.mock.dump dump()},\n etc...\n

    \n

    \n" }, { "path": "docs/content/error/$animate/nongcls.ngdoc", "content": "@ngdoc error\n@name $animate:nongcls\n@fullName `ng-animate` class not allowed\n@description\n\nThis error occurs, when trying to set `$animateProvider.classNameFilter()` to a RegExp containing\nthe reserved `ng-animate` class. Since `.ng-animate` will be added/removed by `$animate` itself,\nusing it as part of the `classNameFilter` RegExp is not allowed.\n" }, { "path": "docs/content/error/$animate/notcsel.ngdoc", "content": "@ngdoc error\n@name $animate:notcsel\n@fullName Not class CSS selector\n@description\n\nExpecting a CSS selector for class. Class selectors must start with `.`, for example: `.my-class-name`.\n" }, { "path": "docs/content/error/$cacheFactory/iid.ngdoc", "content": "@ngdoc error\n@name $cacheFactory:iid\n@fullName Invalid ID\n@description\n\nThis error occurs when trying to create a new `cache` object via {@link ng.$cacheFactory} with an ID that was already used to create another cache object.\n\nTo resolve the error please use a different cache ID when calling `$cacheFactory`.\n" }, { "path": "docs/content/error/$compile/baddir.ngdoc", "content": "@ngdoc error\n@name $compile:baddir\n@fullName Invalid Directive/Component Name\n@description\n\nThis error occurs when the name of a directive or component is not valid.\n\nDirectives and Components must start with a lowercase character and must not contain leading or trailing whitespaces.\n" }, { "path": "docs/content/error/$compile/badrestrict.ngdoc", "content": "@ngdoc error\n@name $compile:badrestrict\n@fullName Invalid Directive Restrict\n@description\n\nThis error occurs when the restrict property of a directive is not valid.\n\nThe directive restrict property must be a string including one or more of the following characters:\n* E (element)\n* A (attribute)\n* C (class)\n* M (comment)\n\nFor example:\n```javascript\nrestrict: 'E'\nrestrict: 'EAC'\n```\n" }, { "path": "docs/content/error/$compile/ctreq.ngdoc", "content": "@ngdoc error\n@name $compile:ctreq\n@fullName Missing Required Controller\n@description\n\nThis error occurs when {@link ng.$compile HTML compiler} tries to process a directive that specifies the {@link ng.$compile#directive-definition-object `require` option} in a {@link ng.$compile#comprehensive-directive-api directive definition},\nbut the required directive controller is not present on the current DOM element (or its ancestor element, if `^` was specified).\n\nTo resolve this error ensure that there is no typo in the required controller name and that the required directive controller is present on the current element.\n\nIf the required controller is expected to be on an ancestor element, make sure that you prefix the controller name in the `require` definition with `^`.\n\nIf the required controller is optionally requested, use `?` or `^?` to specify that.\n\n\nExample of a directive that requires {@link ng.directive:ngModel ngModel} controller:\n```\nmyApp.directive('myDirective', function() {\n return {\n require: 'ngModel',\n ...\n }\n}\n```\n\nThis directive can then be used as:\n```\n\n```\n\n\nExample of a directive that optionally requires a {@link ng.directive:form form} controller from an ancestor:\n```\nmyApp.directive('myDirective', function() {\n return {\n require: '^?form',\n ...\n }\n}\n```\n\nThis directive can then be used as:\n```\n
    \n
    \n \n
    \n
    \n```\n" }, { "path": "docs/content/error/$compile/ctxoverride.ngdoc", "content": "@ngdoc error\n@name $compile:ctxoverride\n@fullName DOM Property Security Context Override\n@description\n\nThis error occurs when the security context for a property is defined via {@link ng.$compileProvider#addPropertySecurityContext addPropertySecurityContext()} multiple times under different security contexts.\n\nFor example:\n\n```js\n$compileProvider.addPropertySecurityContext(\"my-element\", \"src\", $sce.MEDIA_URL);\n$compileProvider.addPropertySecurityContext(\"my-element\", \"src\", $sce.RESOURCE_URL); //throws\n```\n" }, { "path": "docs/content/error/$compile/infchng.ngdoc", "content": "@ngdoc error\n@name $compile:infchng\n@fullName Unstable `$onChanges` hooks\n@description\n\nThis error occurs when the application's model becomes unstable because some `$onChanges` hooks are causing updates which then trigger\nfurther calls to `$onChanges` that can never complete.\nAngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.\n\nFor example, the situation can occur by setting up a `$onChanges()` hook which triggers an event on the component, which subsequently\ntriggers the component's bound inputs to be updated:\n\n```html\n\n```\n\n```js\nfunction Controller1() {}\nController1.$onChanges = function() {\n this.onChange();\n};\n\nmod.component('c1', {\n controller: Controller1,\n bindings: {'prop': '<', onChange: '&'}\n}\n```\n\nThe maximum number of allowed iterations of the `$onChanges` hooks is controlled via TTL setting which can be configured via\n{@link ng.$compileProvider#onChangesTtl `$compileProvider.onChangesTtl`}.\n" }, { "path": "docs/content/error/$compile/iscp.ngdoc", "content": "@ngdoc error\n@name $compile:iscp\n@fullName Invalid Isolate Scope Definition\n@description\n\nWhen declaring isolate scope the scope definition object must be in specific format which starts with mode character (`@&=<`), after which comes an optional `?`, and it ends with an optional local name.\n\n```\nmyModule.directive('directiveName', function factory() {\n return {\n ...\n scope: {\n 'localName': '@', // OK\n 'localName2': '&attr', // OK\n 'localName3': '\n```\n\n" }, { "path": "docs/content/error/$compile/multidir.ngdoc", "content": "@ngdoc error\n@name $compile:multidir\n@fullName Multiple Directive Resource Contention\n@description\n\nThis error occurs when multiple directives are applied to the same DOM element, and\nprocessing them would result in a collision or an unsupported configuration.\n\n\nTo resolve this issue remove one of the directives which is causing the collision.\n\nExample scenarios of multiple incompatible directives applied to the same element include:\n\n* Multiple directives requesting `isolated scope`.\n* Multiple directives publishing a controller under the same name.\n* Multiple directives declared with the `transclusion` option.\n* Multiple directives attempting to define a `template` or `templateURL`.\n" }, { "path": "docs/content/error/$compile/multilink.ngdoc", "content": "@ngdoc error\n@name $compile:multilink\n@fullName Linking Element Multiple Times\n@description\n\nThis error occurs when a single element is linked more then once.\n\nFor example, if an element is compiled and linked twice without cloning:\n```\n var linker = $compile(template);\n linker($scope); //=> ok\n linker($scope); //=> multilink error\n```\n\nLinking an element as a clone multiple times is ok:\n```\n var linker = $compile(template);\n linker($scope, function() { ... }); //=> ok\n linker($scope, function() { ... }); //=> ok\n```\n\nHowever once an element has been linked it can not be re-linked as a clone:\n```\n var linker = $compile(template);\n linker($scope); //=> ok\n linker($scope, function() { ... }); //=> multilink error\n```" }, { "path": "docs/content/error/$compile/noctrl.ngdoc", "content": "@ngdoc error\n@name $compile:noctrl\n@fullName Controller is required.\n@description\n\nWhen using the `bindToController` feature of AngularJS, a directive is required\nto have a Controller. A controller may be specified by adding a \"controller\"\nproperty to the directive definition object. Its value should be either a\nstring, or an invokable object (a function, or an array whose last element is a\nfunction).\n\nFor more information, see the {@link guide/directive directives guide}.\n" }, { "path": "docs/content/error/$compile/nodomevents.ngdoc", "content": "@ngdoc error\n@name $compile:nodomevents\n@fullName Event Attribute/Property Binding\n@description\n\nThis error occurs when one tries to create a binding for event handler attributes or properties like `onclick`, `onload`, `onsubmit`, etc.\n\nThere is no practical value in binding to these attributes/properties and doing so only exposes your application to security vulnerabilities like XSS.\nFor these reasons binding to event handler attributes and properties (`formaction` and all starting with `on`) is not supported.\n\n\nAn example code that would allow XSS vulnerability by evaluating user input in the window context could look like this:\n```\n\n
    click me
    \n```\n\nSince the `onclick` evaluates the value as JavaScript code in the window context, setting the `username` model to a value like `javascript:alert('PWND')` would result in script injection when the `div` is clicked.\n\nPlease use the `ng-*` or `ng-on-*` versions instead (such as `ng-click` or `ng-on-click` rather than `onclick`).\n" }, { "path": "docs/content/error/$compile/nonassign.ngdoc", "content": "@ngdoc error\n@name $compile:nonassign\n@fullName Non-Assignable Expression\n@description\n\nThis error occurs when a directive defines an isolate scope property\n(using the `=` mode in the {@link ng.$compile#directive-definition-object\n`scope` option} of a directive definition) but the directive is used with an expression that is not-assignable.\n\nIn order for the two-way data-binding to work, it must be possible to write new values back into the path defined with the expression.\n\nFor example, given a directive:\n\n```\nmyModule.directive('myDirective', function factory() {\n return {\n ...\n scope: {\n localValue: '=bind'\n }\n ...\n }\n});\n```\n\nFollowing are invalid uses of this directive:\n```\n\n\n\n\n\n\n\n\n```\n\n\nTo resolve this error, do one of the following options:\n\n- use path expressions with scope properties that are two-way data-bound like so:\n\n```\n\n\n```\n\n- Make the binding optional\n\n```\nmyModule.directive('myDirective', function factory() {\n return {\n ...\n scope: {\n localValue: '=?bind' // <-- the '?' makes it optional\n }\n ...\n }\n});\n```\n" }, { "path": "docs/content/error/$compile/noslot.ngdoc", "content": "@ngdoc error\n@name $compile:noslot\n@fullName No matching slot in parent directive\n@description\n\nThis error occurs when declaring a specific slot in a {@link ng.ngTransclude `ngTransclude`} \nwhich does not map to a specific slot defined in the transclude property of the directive.\n\nIn this example the template has declared a slot missing from the transclude definition.\nThis example will generate a noslot error.\n```js\nvar componentConfig = {\n template: '
    ' +\n '
    ' +\n '
    ' +\n '
    ',\n transclude: {\n \t// The key value pairs here are considered \"slots\" that are provided for components to slot into.\n slotProvided: 'slottedComponent', // mandatory transclusion\n // There is no slot provided here for the transclude 'noSlotProvided' declared in the above template.\n }\n};\n```\n\nIf we make the following change we will no longer get the noslot error.\n```js\nvar componentConfig = {\n template: '
    ' +\n '
    ' +\n '
    ' +\n '
    ',\n transclude: {\n slotProvided: 'slottedComponent',\n noSlotProvided: 'otherComponent' // now it is declared and the error should cease\n }\n};\n\n```\n" }, { "path": "docs/content/error/$compile/reqslot.ngdoc", "content": "@ngdoc error\n@name $compile:reqslot\n@fullName Required transclusion slot\n@description\n\nThis error occurs when a directive or component try to transclude a slot that is not provided.\n\nTranscluded elements must contain something. This error could happen when you try to transclude a self closing tag element.\nAlso you can make a transclusion slot optional with a `?` prefix.\n\n```js\n// In this example the must have an inside to transclude it.\n// If not, a reqslot error will be generated.\n\nvar componentConfig = {\n template: 'path/to/template.html',\n transclude: {\n importantSlot: 'importantComponent', // mandatory transclusion\n optionalSlot: '?optionalComponent', // optional transclusion\n }\n};\n\nangular\n .module('doc')\n .component('myComponent', componentConfig)\n\n```\n\n```html\n\n\n\n\n\n \n\n\n\n\n \n\n\n\n \n \n\n```\n" }, { "path": "docs/content/error/$compile/selmulti.ngdoc", "content": "@ngdoc error\n@name $compile:selmulti\n@fullName Binding to Multiple Attribute\n@description\n\nBinding to the `multiple` attribute of `select` element is not supported since switching between multiple and single mode changes the {@link ng.directive:ngModel `ngModel`} object type from instance to array of instances which breaks the model semantics.\n\nIf you need to use different types of `select` elements in your template based on some variable, please use {@link ng.directive:ngIf ngIf} or {@link ng.directive:ngSwitch ngSwitch} directives to select one of them to be used at runtime.\n\n\nExample with invalid usage:\n```\n\n```\n\nExample that uses ngIf to pick one of the `select` elements based on a variable:\n```\n\n\n```\n" }, { "path": "docs/content/error/$compile/srcset.ngdoc", "content": "@ngdoc error\n@name $compile:srcset\n@fullName Invalid value passed to `attr.$set('srcset', value)`\n@description\n\nThis error occurs if you try to programmatically set the `srcset` attribute with a non-string value.\n\nThis can be the case if you tried to avoid the automatic sanitization of the `srcset` value by\npassing a \"trusted\" value provided by calls to `$sce.trustAsMediaUrl(value)`.\n\nIf you want to programmatically set explicitly trusted unsafe URLs, you should use `$sce.trustAsHtml`\non the whole `img` tag and inject it into the DOM using the `ng-bind-html` directive.\n" }, { "path": "docs/content/error/$compile/tplrt.ngdoc", "content": "@ngdoc error\n@name $compile:tplrt\n@fullName Invalid Template Root\n@description\n\nWhen a directive is declared with `template` (or `templateUrl`) and `replace` mode on, the template\nmust have exactly one root element. That is, the text of the template property or the content\nreferenced by the templateUrl must be contained within a single html element.\nFor example, `

    blah blah blah

    ` instead of simply `blah blah blah`.\nOtherwise, the replacement operation would result in a single element (the directive) being replaced\nwith multiple elements or nodes, which is unsupported and not commonly needed in practice.\n\n\nFor example a directive with definition:\n\n```\nmyModule.directive('myDirective', function factory() {\n return {\n ...\n replace: true,\n templateUrl: 'someUrl'\n ...\n }\n});\n```\n\nAnd a template provided at URL `someUrl`. The template must be an html fragment that has only a\nsingle root element, like the `div` element in this template:\n\n```\n
    Hello World!
    \n```\n\nAn invalid template to be used with this directive is one that defines multiple root nodes or\nelements. For example:\n\n```\nHello World!\n```\n\nWatch out for html comments at the beginning or end of templates, as these can cause this error as\nwell. Consider the following template:\n\n```\n
    \n
    \n ...\n
    \n
    \n```\n\nThe `` comment is interpreted as a second root element and causes the template to\nbe invalid.\n" }, { "path": "docs/content/error/$compile/uterdir.ngdoc", "content": "@ngdoc error\n@name $compile:uterdir\n@fullName Unterminated Directive\n@description\n\nThis error occurs when using multi-element directives and a `directive-start` attribute fails to form a matching pair with a corresponding `directive-end` attribute.\nA `directive-start` should have a matching `directive-end` on a sibling node in the DOM. For instance,\n\n```\n\n I get repeated\n I also get repeated\n
    \n```\n\nis a valid example.\n\nThis error can occur in several different ways. One is by leaving out the `directive-end` attribute, like so:\n\n```\n
    \n \n
    \n```\n\nAnother is by nesting a `directive-end` inside of `directive-start`, or vice versa:\n\n```\n
    \n \n
    \n```\n\nTo avoid this error, make sure each `directive-start` you use has a matching `directive-end` on a sibling node in the DOM.\n" }, { "path": "docs/content/error/$controller/ctrlfmt.ngdoc", "content": "@ngdoc error\n@name $controller:ctrlfmt\n@fullName Badly formed controller string\n@description\n\nThis error occurs when {@link ng.$controller $controller} service is called\nwith a string that does not match the supported controller string formats.\n\nSupported formats:\n\n1. `__name__`\n2. `__name__ as __identifier__`\n\nNeither `__name__` or `__identifier__` may contain spaces.\n\nExample of incorrect usage that leads to this error:\n```html\n\n
    \n```\n\nor\n\n```js\n// does not match `__name__` or `__name__ as __identifier__`\nvar myCtrl = $controller(\"mY contRoller\", { $scope: newScope });\n```\n\nor\n\n```js\ndirective(\"myDirective\", function() {\n return {\n // does not match `__name__` or `__name__ as __identifier__`\n controller: \"mY contRoller\",\n link: function() {}\n };\n});\n```\n\nTo fix the examples above, ensure that the controller string matches the supported\nformats, and that any html attributes which are used as controller expressions are\nclosed.\n\n\nPlease consult the {@link ng.$controller $controller} service api docs to learn more.\n" }, { "path": "docs/content/error/$controller/ctrlreg.ngdoc", "content": "@ngdoc error\n@name $controller:ctrlreg\n@fullName A controller with this name is not registered.\n@description\n\nThis error occurs when the {@link ng.$controller `$controller()`} service is called\nwith a string that does not match any of the registered controllers. The controller service may have\nbeen invoked directly, or indirectly, for example through the {@link ng.ngController `ngController`} directive,\nor inside a {@link angular.Module#component component} / {@link angular.Module#directive directive} /\n{@link ngRoute.$routeProvider#when route} definition (when using a string for the controller property).\nThird-party modules can also instantiate controllers with the {@link ng.$controller `$controller()`} service.\n\nCauses for this error can be:\n\n1. Your reference to the controller has a typo. For example, in\nthe {@link ng.ngController `ngController`} directive attribute, in a {@link angular.Module#component component}\ndefinition's controller property, or in the call to {@link ng.$controller `$controller()`}.\n2. You have not registered the controller (neither via {@link angular.Module#controller `Module.controller`}\nnor {@link ng.$controllerProvider#register `$controllerProvider.register()`}.\n3. You have a typo in the *registered* controller name.\n\n\nPlease consult the {@link ng.$controller $controller} service api docs to learn more.\n" }, { "path": "docs/content/error/$controller/noscp.ngdoc", "content": "@ngdoc error\n@name $controller:noscp\n@fullName Missing $scope object\n@description\n\nThis error occurs when {@link ng.$controller $controller} service is called in order to instantiate a new controller but no scope is provided via `$scope` property of the locals map.\n\nExample of incorrect usage that leads to this error:\n```\n$controller(MyController);\n//or\n$controller(MyController, {scope: newScope});\n```\n\nTo fix the example above please provide a scope (using the `$scope` property in the locals object) to the $controller call:\n\n```\n$controller(MyController, {$scope: newScope});\n```\n\nPlease consult the {@link ng.$controller $controller} service api docs to learn more.\n" }, { "path": "docs/content/error/$http/baddata.ngdoc", "content": "@ngdoc error\n@name $http:baddata\n@fullName Bad JSON Data\n@description\n\nThe default {@link ng.$http#default-transformations `transformResponse`} will try to parse the\nresponse as JSON if the `Content-Type` header is `application/json`, or the response looks like a\nvalid JSON-stringified object or array.\nThis error occurs when that data is not a valid JSON object.\n\nTo resolve this error, make sure you pass valid JSON data to `transformResponse`. If the response\ndata looks like JSON, but has a different `Content-Type` header, you must\n{@link ng.$http#overriding-the-default-transformations-per-request implement your own response\ntransformer on a per request basis}, or {@link ng.$http#default-transformations modify the default `$http` responseTransform}.\n" }, { "path": "docs/content/error/$http/badjsonp.ngdoc", "content": "@ngdoc error\n@name $http:badjsonp\n@fullName Bad JSONP Request Configuration\n@description\n\nThis error occurs when the URL generated from the configuration object contains a parameter with the\nsame name as the configured `jsonpCallbackParam` property; or when it contains a parameter whose\nvalue is `JSON_CALLBACK`.\n\n`$http` JSONP requests need to attach a callback query parameter to the URL. The name of this\nparameter is specified in the configuration object (or in the defaults) via the `jsonpCallbackParam`\nproperty. You must not provide your own parameter with this name in the configuration of the request.\n\nIn previous versions of AngularJS, you specified where to add the callback parameter value via the\n`JSON_CALLBACK` placeholder. This is no longer allowed.\n\nTo resolve this error, remove any parameters that have the same name as the `jsonpCallbackParam`;\nand/or remove any parameters that have a value of `JSON_CALLBACK`.\n\nFor more information, see the {@link ng.$http#jsonp `$http.jsonp()`} method API documentation.\n" }, { "path": "docs/content/error/$http/badreq.ngdoc", "content": "@ngdoc error\n@name $http:badreq\n@fullName Bad Request Configuration\n@description\n\nThis error occurs when the request configuration parameter passed to the {@link ng.$http `$http`} service is not a valid object.\n`$http` expects a single parameter, the request configuration object, but received a parameter that was not an object or did not contain valid properties.\n\nThe error message should provide additional context such as the actual value of the parameter that was received.\nIf you passed a string parameter, perhaps you meant to call one of the shorthand methods on `$http` such as `$http.get(…)`, etc.\n\nTo resolve this error, make sure you pass a valid request configuration object to `$http`.\n\nFor more information, see the {@link ng.$http `$http`} service API documentation.\n" }, { "path": "docs/content/error/$injector/cdep.ngdoc", "content": "@ngdoc error\n@name $injector:cdep\n@fullName Circular Dependency\n@description\n\nThis error occurs when the {@link angular.injector $injector} tries to get\na service that depends on itself, either directly or indirectly. To fix this,\nconstruct your dependency chain such that there are no circular dependencies.\n\nFor example:\n\n```\nangular.module('myApp', [])\n .factory('myService', function (myService) {\n // ...\n })\n .controller('MyCtrl', function ($scope, myService) {\n // ...\n });\n```\n\nWhen an instance of `MyCtrl` is created, the service `myService` will be created\nby the `$injector`. `myService` depends on itself, which causes the `$injector`\nto detect a circular dependency and throw the error.\n\nFor more information, see the {@link guide/di Dependency Injection Guide}.\n" }, { "path": "docs/content/error/$injector/itkn.ngdoc", "content": "@ngdoc error\n@name $injector:itkn\n@fullName Bad Injection Token\n@description\n\nThis error occurs when using a bad token as a dependency injection annotation.\nDependency injection annotation tokens should always be strings. Using any other\ntype will cause this error to be thrown.\n\nExamples of code with bad injection tokens include:\n\n```\nvar myCtrl = function ($scope, $http) { /* ... */ };\nmyCtrl.$inject = ['$scope', 42];\n\nmyAppModule.controller('MyCtrl', ['$scope', {}, function ($scope, $timeout) {\n // ...\n}]);\n```\n\nThe bad injection tokens are `42` in the first example and `{}` in the second.\nTo avoid the error, always use string literals for dependency injection annotation\ntokens.\n\nFor an explanation of what injection annotations are and how to use them, refer\nto the {@link guide/di Dependency Injection Guide}.\n" }, { "path": "docs/content/error/$injector/modulerr.ngdoc", "content": "@ngdoc error\n@name $injector:modulerr\n@fullName Module Error\n@description\n\nThis error occurs when a module fails to load due to some exception. The error\nmessage above should provide additional context.\n\nA common reason why the module fails to load is that you've forgotten to\ninclude the file with the defined module or that the file couldn't be loaded.\n\n### Using `ngRoute`\n\nIn AngularJS `1.2.0` and later, `ngRoute` has been moved to its own module.\nIf you are getting this error after upgrading to `1.2.x` or later, be sure that you've\ninstalled {@link ngRoute `ngRoute`}.\n\n### Monkey-patching AngularJS's `ng` module\n\nThis error can also occur if you have tried to add your own components to the `ng` module.\nThis has never been supported and from `1.3.0` it will actually trigger this error.\nFor instance the following code could trigger this error.\n\n```js\nangular.module('ng').filter('tel', function (){});\n```\n\nInstead create your own module and add it as a dependency to your application's top-level module.\nSee [#9692](https://github.com/angular/angular.js/issues/9692) and\n[#7709](https://github.com/angular/angular.js/issues/7709) for more information\n" }, { "path": "docs/content/error/$injector/nomod.ngdoc", "content": "@ngdoc error\n@name $injector:nomod\n@fullName Module Unavailable\n@description\n\nThis error occurs when you declare a dependency on a module that isn't defined anywhere or hasn't\nbeen loaded in the current browser context.\n\nWhen you receive this error, check that the name of the module in question is correct and that the\nfile in which this module is defined has been loaded (either via `\n \n\n```\n\nNote that for bootstrapping purposes, the `` element is the same as `document`, so the following\nwill also throw an error.\n\n```\n\n...\n\n\n```\n\nYou can also get this error if you accidentally load AngularJS itself more than once.\n\n```\n\n \n \n\n ...\n\n \n \n\n ...\n\n \n \n\n```\n" }, { "path": "docs/content/error/ng/cpi.ngdoc", "content": "@ngdoc error\n@name ng:cpi\n@fullName Bad Copy\n@description\n\nThis error occurs when attempting to copy an object to itself. Calling {@link\nangular.copy angular.copy} with a `destination` object deletes\nall of the elements or properties on `destination` before copying to it. Copying\nan object to itself is not supported. Make sure to check your calls to\n`angular.copy` and avoid copying objects or arrays to themselves.\n" }, { "path": "docs/content/error/ng/cpta.ngdoc", "content": "@ngdoc error\n@name ng:cpta\n@fullName Copying TypedArray\n@description\n\nCopying TypedArray's with a destination is not supported because TypedArray\nobjects can not be mutated, they are fixed length.\n" }, { "path": "docs/content/error/ng/cpws.ngdoc", "content": "@ngdoc error\n@name ng:cpws\n@fullName Copying Window or Scope\n@description\n\nCopying Window or Scope instances is not supported because of cyclical and self\nreferences. Avoid copying windows and scopes, as well as any other cyclical or\nself-referential structures. Note that trying to deep copy an object containing\ncyclical references that is neither a window nor a scope will cause infinite\nrecursion and a stack overflow.\n" }, { "path": "docs/content/error/ng/test.ngdoc", "content": "@ngdoc error\n@name ng:test\n@fullName Testability Not Found\n@description\n\nAngularJS's testability helper, getTestability, requires a root element to be\npassed in. This helps differentiate between different AngularJS apps on the same\npage. This error is thrown when no injector is found for root element. It is\noften because the root element is outside of the ng-app.\n" }, { "path": "docs/content/error/ngModel/constexpr.ngdoc", "content": "@ngdoc error\n@name ngModel:constexpr\n@fullName Non-Constant Expression\n@description\n\nSome attributes used in conjunction with ngModel (such as ngTrueValue or ngFalseValue) will only\naccept constant expressions.\n\nExamples using constant expressions include:\n\n```\n\n\n```\n\nExamples of non-constant expressions include:\n\n```\n\n\n```\n" }, { "path": "docs/content/error/ngModel/datefmt.ngdoc", "content": "@ngdoc error\n@name ngModel:datefmt\n@fullName Model is not a date object\n@description\n\nAll date-related inputs like `` require the model to be a `Date` object.\nIf the model is something else, this error will be thrown.\nAngularJS does not set validation errors on the `` in this case\nas those errors are shown to the user, but the erroneous state was\ncaused by incorrect application logic and not by the user.\n\n" }, { "path": "docs/content/error/ngModel/nonassign.ngdoc", "content": "@ngdoc error\n@name ngModel:nonassign\n@fullName Non-Assignable Expression\n@description\n\nThis error occurs when expression the {@link ng.directive:ngModel ngModel} directive is bound to is a non-assignable expression.\n\nExamples using assignable expressions include:\n\n```\n\n\n\n```\n\nExamples of non-assignable expressions include:\n\n```\n\n\n\n\n```\n\nAlways make sure that the expression bound via `ngModel` directive can be assigned to.\n\nFor more information, see the {@link ng.directive:ngModel ngModel API doc}.\n" }, { "path": "docs/content/error/ngModel/nopromise.ngdoc", "content": "@ngdoc error\n@name ngModel:nopromise\n@fullName No promise\n@description\n\nThe return value of an async validator, must always be a promise. If you want to return a\nnon-promise value, you can convert it to a promise using {@link ng.$q#resolve `$q.resolve()`} or\n{@link ng.$q#reject `$q.reject()`}.\n\nExample:\n\n```\n.directive('asyncValidator', function($q) {\n return {\n require: 'ngModel',\n link: function(scope, elem, attrs, ngModel) {\n ngModel.$asyncValidators.myAsyncValidation = function(modelValue, viewValue) {\n if (/* I don't need to hit the backend API */) {\n return $q.resolve(); // to mark as valid or\n // return $q.reject(); // to mark as invalid\n } else {\n // ...send a request to the backend and return a promise\n }\n };\n }\n };\n})\n```\n" }, { "path": "docs/content/error/ngModel/numfmt.ngdoc", "content": "@ngdoc error\n@name ngModel:numfmt\n@fullName Model is not of type `number`\n@description\n\nThe `input[number]` and `input[range]` directives require the model to be a `number`.\n\nIf the model is something else, this error will be thrown.\n\nAngularJS does not set validation errors on the `` in this case\nas this error is caused by incorrect application logic and not by bad input from the user.\n\nIf your model does not contain actual numbers then it is up to the application developer\nto use a directive that will do the conversion in the `ngModel` `$formatters` and `$parsers`\npipeline.\n\n## Example\n\nIn this example, our model stores the number as a string, so we provide the `stringToNumber`\ndirective to convert it into the format the `input[number]` directive expects.\n\n\n\n \n \n \n \n \n
    \n {{ x }} : {{ typeOf(x) }}\n
    \n     \n \n angular.module('numfmt-error-module', [])\n\n .run(function($rootScope) {\n $rootScope.typeOf = function(value) {\n return typeof value;\n };\n })\n\n .directive('stringToNumber', function() {\n return {\n require: 'ngModel',\n link: function(scope, element, attrs, ngModel) {\n ngModel.$parsers.push(function(value) {\n return '' + value;\n });\n ngModel.$formatters.push(function(value) {\n return parseFloat(value);\n });\n }\n };\n });\n \n    \n" }, { "path": "docs/content/error/ngOptions/iexp.ngdoc", "content": "@ngdoc error\n@name ngOptions:iexp\n@fullName Invalid Expression\n@description\nThis error occurs when 'ngOptions' is passed an expression that isn't in an expected form.\n\nHere's an example of correct syntax:\n\n```\n\n\n
    \n [{{ item.id }}] {{ item.name }}\n
    \n```\n\nYou could as well convert the object to an array using a filter such as\n[toArrayFilter](https://github.com/petebacondarwin/angular-toArrayFilter):\n```html\n\n
    \n [{{ item.id }}] {{ item.name }}\n
    \n```\n" }, { "path": "docs/content/guide/$location.ngdoc", "content": "@ngdoc overview\n@name Using $location\n@sortOrder 500\n@description\n\n# Using the `$location` service\n\nThe `$location` service parses the URL in the browser address bar (based on [`window.location`](https://developer.mozilla.org/en/window.location)) and makes the URL available to\nyour application. Changes to the URL in the address bar are reflected into the `$location` service and\nchanges to `$location` are reflected into the browser address bar.\n\n**The $location service:**\n\n- Exposes the current URL in the browser address bar, so you can\n - Watch and observe the URL.\n - Change the URL.\n- Maintains synchronization between itself and the browser's URL when the user\n - Changes the address in the browser's address bar.\n - Clicks the back or forward button in the browser (or clicks a History link).\n - Clicks on a link in the page.\n- Represents the URL object as a set of methods (protocol, host, port, path, search, hash).\n\n\n## Comparing `$location` to `window.location`\n\n\n\n\n \n \n \n \n \n\n\n\n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n\n
    window.location$location service
    purposeallow read/write access to the current browser locationsame
    APIexposes \"raw\" object with properties that can be directly modifiedexposes jQuery-style getters and setters
    integration with AngularJS application life-cyclenoneknows about all internal life-cycle phases, integrates with {@link ng.$rootScope.Scope#$watch $watch}, ...
    seamless integration with HTML5 APInoyes (with a fallback for legacy browsers)
    aware of docroot/context from which the application is loadedno - window.location.pathname returns \"/docroot/actual/path\"yes - $location.path() returns \"/actual/path\"
    \n\n## When should I use `$location`?\nAny time your application needs to react to a change in the current URL or if you want to change\nthe current URL in the browser.\n\n## What does it not do?\nIt does not cause a full page reload when the browser URL is changed. To reload the page after\nchanging the URL, use the lower-level API, `$window.location.href`.\n\n## General overview of the API\n\nThe `$location` service can behave differently, depending on the configuration that was provided to\nit when it was instantiated. The default configuration is suitable for many applications, for\nothers customizing the configuration can enable new features.\n\nOnce the `$location` service is instantiated, you can interact with it via jQuery-style getter and\nsetter methods that allow you to get or change the current URL in the browser.\n\n### `$location` service configuration\n\nTo configure the `$location` service, retrieve the\n{@link ng.$locationProvider $locationProvider} and set the parameters as follows:\n\n\n- **html5Mode(mode)**: `{boolean|Object}`
    \n `false` or `{enabled: false}` (default) -\n see [Hashbang mode](guide/$location#hashbang-mode-default-mode-)
    \n `true` or `{enabled: true}` -\n see [HTML5 mode](guide/$location#html5-mode)
    \n `{..., requireBase: true/false}` (only affects HTML5 mode) -\n see [Relative links](guide/$location#relative-links)
    \n `{..., rewriteLinks: true/false/'string'}` (only affects HTML5 mode) -\n see [HTML link rewriting](guide/$location#html-link-rewriting)
    \n Default:\n ```j\n {\n enabled: false,\n requireBase: true,\n rewriteLinks: true\n }\n ```\n\n- **hashPrefix(prefix)**: `{string}`
    \n Prefix used for Hashbang URLs (used in Hashbang mode or in legacy browsers in HTML5 mode).
    \n Default: `'!'`\n\n#### Example configuration\n```js\n$locationProvider.html5Mode(true).hashPrefix('*');\n```\n\n### Getter and setter methods\n\n`$location` service provides getter methods for read-only parts of the URL (absUrl, protocol, host,\nport) and getter / setter methods for url, path, search, hash:\n```js\n// get the current path\n$location.path();\n\n// change the path\n$location.path('/newValue')\n```\n\nAll of the setter methods return the same `$location` object to allow chaining. For example, to\nchange multiple segments in one go, chain setters like this:\n\n```js\n$location.path('/newValue').search({key: value});\n```\n\n### Replace method\n\nThere is a special `replace` method which can be used to tell the $location service that the next\ntime the $location service is synced with the browser, the last history record should be replaced\ninstead of creating a new one. This is useful when you want to implement redirection, which would\notherwise break the back button (navigating back would retrigger the redirection). To change the\ncurrent URL without creating a new browser history record you can call:\n\n```js\n $location.path('/someNewPath');\n $location.replace();\n // or you can chain these as: $location.path('/someNewPath').replace();\n```\n\nNote that the setters don't update `window.location` immediately. Instead, the `$location` service is\naware of the {@link ng.$rootScope.Scope scope} life-cycle and coalesces multiple `$location`\nmutations into one \"commit\" to the `window.location` object during the scope `$digest` phase. Since\nmultiple changes to the $location's state will be pushed to the browser as a single change, it's\nenough to call the `replace()` method just once to make the entire \"commit\" a replace operation\nrather than an addition to the browser history. Once the browser is updated, the $location service\nresets the flag set by `replace()` method and future mutations will create new history records,\nunless `replace()` is called again.\n\n### Setters and character encoding\nYou can pass special characters to `$location` service and it will encode them according to rules\nspecified in [RFC 3986](http://www.ietf.org/rfc/rfc3986.txt). When you access the methods:\n\n- All values that are passed to `$location` setter methods, `path()`, `search()`, `hash()`, are\nencoded.\n- Getters (calls to methods without parameters) return decoded values for the following methods\n`path()`, `search()`, `hash()`.\n- When you call the `absUrl()` method, the returned value is a full url with its segments encoded.\n- When you call the `url()` method, the returned value is path, search and hash, in the form\n`/path?search=a&b=c#hash`. The segments are encoded as well.\n\n\n## Hashbang and HTML5 Modes\n\n`$location` service has two configuration modes which control the format of the URL in the browser\naddress bar: **Hashbang mode** (the default) and the **HTML5 mode** which is based on using the\n[HTML5 History API](https://html.spec.whatwg.org/multipage/browsers.html#the-history-interface). Applications use the same API in\nboth modes and the `$location` service will work with appropriate URL segments and browser APIs to\nfacilitate the browser URL change and history management.\n\n\n\n\n\n\n \n \n \n \n \n\n\n\n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n
    Hashbang modeHTML5 mode
    configurationthe default{ html5Mode: true }
    URL formathashbang URLs in all browsersregular URLs in modern browser, hashbang URLs in old browser
    <a href=\"\"> link rewritingnoyes
    requires server-side configurationnoyes
    \n\n### Hashbang mode (default mode)\n\nIn this mode, `$location` uses Hashbang URLs in all browsers.\nAngularJS also does not intercept and rewrite links in this mode. I.e. links work\nas expected and also perform full page reloads when other parts of the url\nthan the hash fragment was changed.\n\n\n#### Example\n\n```js\nit('should show example', function() {\n module(function($locationProvider) {\n $locationProvider.html5Mode(false);\n $locationProvider.hashPrefix('!');\n });\n inject(function($location) {\n // open http://example.com/base/index.html#!/a\n expect($location.absUrl()).toBe('http://example.com/base/index.html#!/a');\n expect($location.path()).toBe('/a');\n\n $location.path('/foo');\n expect($location.absUrl()).toBe('http://example.com/base/index.html#!/foo');\n\n expect($location.search()).toEqual({});\n $location.search({a: 'b', c: true});\n expect($location.absUrl()).toBe('http://example.com/base/index.html#!/foo?a=b&c');\n\n $location.path('/new').search('x=y');\n expect($location.absUrl()).toBe('http://example.com/base/index.html#!/new?x=y');\n });\n});\n```\n\n### HTML5 mode\n\nIn HTML5 mode, the `$location` service getters and setters interact with the browser URL address\nthrough the HTML5 history API. This allows for use of regular URL path and search segments,\ninstead of their hashbang equivalents. If the HTML5 History API is not supported by a browser, the\n`$location` service will fall back to using the hashbang URLs automatically. This frees you from\nhaving to worry about whether the browser displaying your app supports the history API or not; the\n`$location` service transparently uses the best available option.\n\n- Opening a regular URL in a legacy browser -> redirects to a hashbang URL\n- Opening hashbang URL in a modern browser -> rewrites to a regular URL\n\nNote that in this mode, AngularJS intercepts all links (subject to the \"Html link rewriting\" rules below)\nand updates the url in a way that never performs a full page reload.\n\n\n#### Example\n\n```js\nit('should show example', function() {\n module(function($locationProvider) {\n $locationProvider.html5Mode(true);\n $locationProvider.hashPrefix('!');\n });\n inject(function($location) {\n // in browser with HTML5 history support:\n // open http://example.com/#!/a -> rewrite to http://example.com/a\n // (replacing the http://example.com/#!/a history record)\n expect($location.path()).toBe('/a');\n\n $location.path('/foo');\n expect($location.absUrl()).toBe('http://example.com/foo');\n\n expect($location.search()).toEqual({});\n $location.search({a: 'b', c: true});\n expect($location.absUrl()).toBe('http://example.com/foo?a=b&c');\n\n $location.path('/new').search('x=y');\n expect($location.url()).toBe('/new?x=y');\n expect($location.absUrl()).toBe('http://example.com/new?x=y');\n });\n});\n\nit('should show example (when browser doesn\\'t support HTML5 mode', function() {\n module(function($provide, $locationProvider) {\n $locationProvider.html5Mode(true);\n $locationProvider.hashPrefix('!');\n $provide.value('$sniffer', {history: false});\n });\n inject(initBrowser({ url: 'http://example.com/new?x=y', basePath: '/' }),\n function($location) {\n // in browser without html5 history support:\n // open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y\n // (again replacing the http://example.com/new?x=y history item)\n expect($location.path()).toBe('/new');\n expect($location.search()).toEqual({x: 'y'});\n\n $location.path('/foo/bar');\n expect($location.path()).toBe('/foo/bar');\n expect($location.url()).toBe('/foo/bar?x=y');\n expect($location.absUrl()).toBe('http://example.com/#!/foo/bar?x=y');\n });\n});\n```\n\n#### Fallback for legacy browsers\n\nFor browsers that support the HTML5 history API, `$location` uses the HTML5 history API to write\npath and search. If the history API is not supported by a browser, `$location` supplies a Hashbang\nURL. This frees you from having to worry about whether the browser viewing your app supports the\nhistory API or not; the `$location` service makes this transparent to you.\n\n#### HTML link rewriting\n\nWhen you use HTML5 history API mode, you will not need special hashbang links. All you have to do\nis specify regular URL links, such as: `link`\n\nWhen a user clicks on this link,\n\n- In a legacy browser, the URL changes to `/index.html#!/some?foo=bar`\n- In a modern browser, the URL changes to `/some?foo=bar`\n\n\nIn cases like the following, links are not rewritten; instead, the browser will perform a full page\nreload to the original link.\n\n- Links that contain `target` element
    \n Example: `link`\n- Absolute links that go to a different domain
    \n Example: `link`\n- Links starting with '/' that lead to a different base path
    \n Example: `link`\n\nIf `mode.rewriteLinks` is set to `false` in the `mode` configuration object passed to\n`$locationProvider.html5Mode()`, the browser will perform a full page reload for every link.\n`mode.rewriteLinks` can also be set to a string, which will enable link rewriting only on anchor\nelements that have the given attribute.\n\nFor example, if `mode.rewriteLinks` is set to `'internal-link'`:\n- `link` will be rewritten\n- `link` will perform a full page reload\n\nNote that [attribute name normalization](guide/directive#normalization) does not apply here, so\n`'internalLink'` will **not** match `'internal-link'`.\n\n\n#### Relative links\n\nBe sure to check all relative links, images, scripts etc. AngularJS requires you to specify the url\nbase in the head of your main html file (``) unless `html5Mode.requireBase`\nis set to `false` in the html5Mode definition object passed to `$locationProvider.html5Mode()`. With\nthat, relative urls will always be resolved to this base url, even if the initial url of the\ndocument was different.\n\nThere is one exception: Links that only contain a hash fragment (e.g. ``)\nwill only change `$location.hash()` and not modify the url otherwise. This is useful for scrolling\nto anchors on the same page without needing to know on which page the user currently is.\n\n\n#### Server side\n\nUsing this mode requires URL rewriting on server side, basically you have to rewrite all your links\nto entry point of your application (e.g. index.html). Requiring a `` tag is also important for\nthis case, as it allows AngularJS to differentiate between the part of the url that is the application\nbase and the path that should be handled by the application.\n\n#### Base href constraints\n\nThe `$location` service is not able to function properly if the current URL is outside the URL given\nas the base href. This can have subtle confusing consequences...\n\nConsider a base href set as follows: `` (i.e. the application exists in the \"folder\"\ncalled `/base`). The URL `/base` is actually outside the application (it refers to the `base` file found\nin the root `/` folder).\n\nIf you wish to be able to navigate to the application via a URL such as `/base` then you should ensure that\nyour server is setup to redirect such requests to `/base/`.\n\nSee https://github.com/angular/angular.js/issues/14018 for more information.\n\n### Sending links among different browsers\n\nBecause of rewriting capability in HTML5 mode, your users will be able to open regular url links in\nlegacy browsers and hashbang links in modern browser:\n\n- Modern browser will rewrite hashbang URLs to regular URLs.\n- Older browsers will redirect regular URLs to hashbang URLs.\n\n#### Example\n\nHere you can see two `$location` instances that show the difference between **Html5 mode** and **Html5 Fallback mode**.\nNote that to simulate different levels of browser support, the `$location` instances are connected to\na fakeBrowser service, which you don't have to set up in actual projects.\n\nNote that when you type hashbang url into the first browser (or vice versa) it doesn't rewrite /\nredirect to regular / hashbang url, as this conversion happens only during parsing the initial URL\n= on page reload.\n\nIn these examples we use ``. The inputs represent the address bar of the browser.\n\n##### Browser in HTML5 mode\n\n \n \n \n \n angular.module('html5-mode', ['fake-browser', 'address-bar'])\n\n // Configure the fakeBrowser. Do not set these values in actual projects.\n .constant('initUrl', 'http://www.example.com/base/path?a=b#h')\n .constant('baseHref', '/base/index.html')\n .value('$sniffer', { history: true })\n\n .controller('LocationController', function($scope, $location) {\n $scope.$location = {};\n angular.forEach('protocol host port path search hash'.split(' '), function(method) {\n $scope.$location[method] = function() {\n var result = $location[method]();\n return angular.isObject(result) ? angular.toJson(result) : result;\n };\n });\n })\n\n .config(function($locationProvider) {\n $locationProvider.html5Mode(true).hashPrefix('!');\n })\n\n .run(function($rootElement) {\n $rootElement.on('click', function(e) { e.stopPropagation(); });\n });\n \n\n \n angular.module('fake-browser', [])\n\n .config(function($provide) {\n $provide.decorator('$browser', function($delegate, baseHref, initUrl) {\n\n $delegate.onUrlChange = function(fn) {\n this.urlChange = fn;\n };\n\n $delegate.url = function() {\n return initUrl;\n };\n\n $delegate.defer = function(fn, delay) {\n setTimeout(function() { fn(); }, delay || 0);\n };\n\n $delegate.baseHref = function() {\n return baseHref;\n };\n\n return $delegate;\n });\n });\n \n\n \n angular.module('address-bar', [])\n .directive('ngAddressBar', function($browser, $timeout) {\n return {\n template: 'Address: ',\n link: function(scope, element, attrs) {\n var input = element.children('input'), delay;\n\n input.on('keypress keyup keydown', function(event) {\n delay = (!delay ? $timeout(fireUrlChange, 250) : null);\n event.stopPropagation();\n })\n .val($browser.url());\n\n $browser.url = function(url) {\n return url ? input.val(url) : input.val();\n };\n\n function fireUrlChange() {\n delay = null;\n $browser.urlChange(input.val());\n }\n }\n };\n });\n \n\n \n\n var addressBar = element(by.css(\"#addressBar\")),\n url = 'http://www.example.com/base/path?a=b#h';\n\n\n it(\"should show fake browser info on load\", function() {\n expect(addressBar.getAttribute('value')).toBe(url);\n\n expect(element(by.binding('$location.protocol()')).getText()).toBe('http');\n expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');\n expect(element(by.binding('$location.port()')).getText()).toBe('80');\n expect(element(by.binding('$location.path()')).getText()).toBe('/path');\n expect(element(by.binding('$location.search()')).getText()).toBe('{\"a\":\"b\"}');\n expect(element(by.binding('$location.hash()')).getText()).toBe('h');\n\n });\n\n it(\"should change $location accordingly\", function() {\n var navigation = element.all(by.css(\"#navigation a\"));\n\n navigation.get(0).click();\n\n expect(addressBar.getAttribute('value')).toBe(\"http://www.example.com/base/first?a=b\");\n\n expect(element(by.binding('$location.protocol()')).getText()).toBe('http');\n expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');\n expect(element(by.binding('$location.port()')).getText()).toBe('80');\n expect(element(by.binding('$location.path()')).getText()).toBe('/first');\n expect(element(by.binding('$location.search()')).getText()).toBe('{\"a\":\"b\"}');\n expect(element(by.binding('$location.hash()')).getText()).toBe('');\n\n\n navigation.get(1).click();\n\n expect(addressBar.getAttribute('value')).toBe(\"http://www.example.com/base/sec/ond?flag#hash\");\n\n expect(element(by.binding('$location.protocol()')).getText()).toBe('http');\n expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');\n expect(element(by.binding('$location.port()')).getText()).toBe('80');\n expect(element(by.binding('$location.path()')).getText()).toBe('/sec/ond');\n expect(element(by.binding('$location.search()')).getText()).toBe('{\"flag\":true}');\n expect(element(by.binding('$location.hash()')).getText()).toBe('hash');\n });\n\n \n\n\n\n##### Browser in HTML5 Fallback mode (Hashbang mode)\n\n \n
    \n


    \n
    \n $location.protocol() =
    \n $location.host() =
    \n $location.port() =
    \n $location.path() =
    \n $location.search() =
    \n $location.hash() =
    \n
    \n \n
    \n     \n \n angular.module('hashbang-mode', ['fake-browser', 'address-bar'])\n\n // Configure the fakeBrowser. Do not set these values in actual projects.\n .constant('initUrl', 'http://www.example.com/base/index.html#!/path?a=b#h')\n .constant('baseHref', '/base/index.html')\n .value('$sniffer', { history: false })\n\n .config(function($locationProvider) {\n $locationProvider.html5Mode(true).hashPrefix('!');\n })\n\n .controller('LocationController', function($scope, $location) {\n $scope.$location = {};\n angular.forEach('protocol host port path search hash'.split(' '), function(method) {\n $scope.$location[method] = function() {\n var result = $location[method]();\n return angular.isObject(result) ? angular.toJson(result) : result;\n };\n });\n })\n\n .run(function($rootElement) {\n $rootElement.on('click', function(e) {\n e.stopPropagation();\n });\n });\n\n \n\n \n angular.module('fake-browser', [])\n\n .config(function($provide) {\n $provide.decorator('$browser', function($delegate, baseHref, initUrl) {\n\n $delegate.onUrlChange = function(fn) {\n this.urlChange = fn;\n };\n\n $delegate.url = function() {\n return initUrl;\n };\n\n $delegate.defer = function(fn, delay) {\n setTimeout(function() { fn(); }, delay || 0);\n };\n\n $delegate.baseHref = function() {\n return baseHref;\n };\n\n return $delegate;\n });\n });\n \n\n\n \n angular.module('address-bar', [])\n .directive('ngAddressBar', function($browser, $timeout) {\n return {\n template: 'Address: ',\n link: function(scope, element, attrs) {\n var input = element.children('input'), delay;\n\n input.on('keypress keyup keydown', function(event) {\n delay = (!delay ? $timeout(fireUrlChange, 250) : null);\n event.stopPropagation();\n })\n .val($browser.url());\n\n $browser.url = function(url) {\n return url ? input.val(url) : input.val();\n };\n\n function fireUrlChange() {\n delay = null;\n $browser.urlChange(input.val());\n }\n }\n };\n });\n \n\n \n\n var addressBar = element(by.css(\"#addressBar\")),\n url = 'http://www.example.com/base/index.html#!/path?a=b#h';\n\n it(\"should show fake browser info on load\", function() {\n expect(addressBar.getAttribute('value')).toBe(url);\n\n expect(element(by.binding('$location.protocol()')).getText()).toBe('http');\n expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');\n expect(element(by.binding('$location.port()')).getText()).toBe('80');\n expect(element(by.binding('$location.path()')).getText()).toBe('/path');\n expect(element(by.binding('$location.search()')).getText()).toBe('{\"a\":\"b\"}');\n expect(element(by.binding('$location.hash()')).getText()).toBe('h');\n\n });\n\n it(\"should change $location accordingly\", function() {\n var navigation = element.all(by.css(\"#navigation a\"));\n\n navigation.get(0).click();\n\n expect(addressBar.getAttribute('value')).toBe(\"http://www.example.com/base/index.html#!/first?a=b\");\n\n expect(element(by.binding('$location.protocol()')).getText()).toBe('http');\n expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');\n expect(element(by.binding('$location.port()')).getText()).toBe('80');\n expect(element(by.binding('$location.path()')).getText()).toBe('/first');\n expect(element(by.binding('$location.search()')).getText()).toBe('{\"a\":\"b\"}');\n expect(element(by.binding('$location.hash()')).getText()).toBe('');\n\n\n navigation.get(1).click();\n\n expect(addressBar.getAttribute('value')).toBe(\"http://www.example.com/base/index.html#!/sec/ond?flag#hash\");\n\n expect(element(by.binding('$location.protocol()')).getText()).toBe('http');\n expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');\n expect(element(by.binding('$location.port()')).getText()).toBe('80');\n expect(element(by.binding('$location.path()')).getText()).toBe('/sec/ond');\n expect(element(by.binding('$location.search()')).getText()).toBe('{\"flag\":true}');\n expect(element(by.binding('$location.hash()')).getText()).toBe('hash');\n\n });\n \n\n    \n\n## Caveats\n\n### Page reload navigation\n\nThe `$location` service allows you to change only the URL; it does not allow you to reload the\npage. When you need to change the URL and reload the page or navigate to a different page, please\nuse a lower level API, {@link ng.$window $window.location.href}.\n\n### Using $location outside of the scope life-cycle\n\n`$location` knows about AngularJS's {@link ng.$rootScope.Scope scope} life-cycle. When a URL changes in\nthe browser it updates the `$location` and calls `$apply` so that all\n{@link ng.$rootScope.Scope#$watch $watchers} /\n{@link ng.$compile.directive.Attributes#$observe $observers} are notified.\nWhen you change the `$location` inside the `$digest` phase everything is ok; `$location` will\npropagate this change into browser and will notify all the {@link ng.$rootScope.Scope#$watch $watchers} /\n{@link ng.$compile.directive.Attributes#$observe $observers}.\nWhen you want to change the `$location` from outside AngularJS (for example, through a DOM Event or\nduring testing) - you must call `$apply` to propagate the changes.\n\n### $location.path() and ! or / prefixes\n\nA path should always begin with forward slash (`/`); the `$location.path()` setter will add the\nforward slash if it is missing.\n\nNote that the `!` prefix in the hashbang mode is not part of `$location.path()`; it is actually\n`hashPrefix`.\n\n### Crawling your app\n\nMost modern search engines are able to crawl AJAX applications with dynamic content, provided all\nincluded resources are available to the crawler bots.\n\nThere also exists a special\n[AJAX crawling scheme](http://code.google.com/web/ajaxcrawling/docs/specification.html) developed by\nGoogle that allows bots to crawl the static equivalent of a dynamically generated page,\nbut this schema has been deprecated, and support for it may vary by search engine.\n\n## Testing with the $location service\n\nWhen using `$location` service during testing, you are outside of the angular's {@link\nng.$rootScope.Scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`.\n\n```js\ndescribe('serviceUnderTest', function() {\n beforeEach(module(function($provide) {\n $provide.factory('serviceUnderTest', function($location) {\n // whatever it does...\n });\n });\n\n it('should...', inject(function($location, $rootScope, serviceUnderTest) {\n $location.path('/new/path');\n $rootScope.$apply();\n\n // test whatever the service should do...\n\n }));\n});\n```\n\n## Two-way binding to $location\n\nBecause `$location` uses getters/setters, you can use `ng-model-options=\"{ getterSetter: true }\"`\nto bind it to `ngModel`:\n\n\n\n
    \n \n
    \n    \n\nangular.module('locationExample', [])\n .controller('LocationController', ['$scope', '$location', function($scope, $location) {\n $scope.locationPath = function(newLocation) {\n return $location.path(newLocation);\n };\n }]);\n\n    \n\n## Related API\n\n* {@link ng.$location `$location` API}\n" }, { "path": "docs/content/guide/accessibility.ngdoc", "content": "@ngdoc overview\n@name Accessibility\n@sortOrder 530\n@description\n\n\n# Accessibility with ngAria\n\nThe goal of ngAria is to improve AngularJS's default accessibility by enabling common\n[ARIA](http://www.w3.org/TR/wai-aria/) attributes that convey state or semantic information for\nassistive technologies used by persons with disabilities.\n\n## Including ngAria\n\nUsing {@link ngAria ngAria} is as simple as requiring the ngAria module in your application. ngAria hooks into\nstandard AngularJS directives and quietly injects accessibility support into your application\nat runtime.\n\n```js\nangular.module('myApp', ['ngAria'])...\n```\n\n### Using ngAria\nMost of what ngAria does is only visible \"under the hood\". To see the module in action, once you've\nadded it as a dependency, you can test a few things:\n * Using your favorite element inspector, look for attributes added by ngAria in your own code.\n * Test using your keyboard to ensure `tabindex` is used correctly.\n * Fire up a screen reader such as VoiceOver or NVDA to check for ARIA support.\n[Helpful screen reader tips.](http://webaim.org/articles/screenreader_testing/)\n\n## Supported directives\nCurrently, ngAria interfaces with the following directives:\n\n * {@link guide/accessibility#ngmodel ngModel}\n * {@link guide/accessibility#ngdisabled ngDisabled}\n * {@link guide/accessibility#ngrequired ngRequired}\n * {@link guide/accessibility#ngreadonly ngReadonly}\n * {@link guide/accessibility#ngvaluechecked ngChecked}\n * {@link guide/accessibility#ngvaluechecked ngValue}\n * {@link guide/accessibility#ngshow ngShow}\n * {@link guide/accessibility#nghide ngHide}\n * {@link guide/accessibility#ngclick ngClick}\n * {@link guide/accessibility#ngdblclick ngDblClick}\n * {@link guide/accessibility#ngmessages ngMessages}\n\n

    ngModel

    \n\nMuch of ngAria's heavy lifting happens in the {@link ng.ngModel ngModel}\ndirective. For elements using ngModel, special attention is paid by ngAria if that element also\nhas a role or type of `checkbox`, `radio`, `range` or `textbox`.\n\nFor those elements using ngModel, ngAria will dynamically bind and update the following ARIA\nattributes (if they have not been explicitly specified by the developer):\n\n * aria-checked\n * aria-valuemin\n * aria-valuemax\n * aria-valuenow\n * aria-invalid\n * aria-required\n * aria-readonly\n * aria-disabled\n\n### Example\n\n\n \n
    \n \n Custom checkbox\n \n
    \n
    \n Is checked: {{ !!checked }}\n     \n \n angular.\n module('ngAria_ngModelExample', ['ngAria']).\n directive('customCheckbox', customCheckboxDirective).\n directive('showAttrs', showAttrsDirective);\n\n function customCheckboxDirective() {\n return {\n restrict: 'E',\n require: 'ngModel',\n transclude: true,\n template:\n ' ' +\n '',\n link: function(scope, elem, attrs, ctrl) {\n // Overwrite necessary `NgModelController` methods\n ctrl.$isEmpty = isEmpty;\n ctrl.$render = render;\n\n // Bind to events\n elem.on('click', function(event) {\n event.preventDefault();\n scope.$apply(toggleCheckbox);\n });\n elem.on('keypress', function(event) {\n event.preventDefault();\n if (event.keyCode === 32 || event.keyCode === 13) {\n scope.$apply(toggleCheckbox);\n }\n });\n\n // Helpers\n function isEmpty(value) {\n return !value;\n }\n\n function render() {\n elem[ctrl.$viewValue ? 'addClass' : 'removeClass']('checked');\n }\n\n function toggleCheckbox() {\n ctrl.$setViewValue(!ctrl.$viewValue);\n ctrl.$render();\n }\n }\n };\n }\n\n function showAttrsDirective($timeout) {\n return function(scope, elem, attrs) {\n var pre = document.createElement('pre');\n elem.after(pre);\n\n scope.$watchCollection(function() {\n return Array.prototype.slice.call(elem[0].attributes).reduce(function(aggr, attr) {\n if (attr.name !== attrs.$attr.showAttrs) aggr[attr.name] = attr.value;\n return aggr;\n }, {});\n }, function(newValues) {\n $timeout(function() {\n pre.textContent = angular.toJson(newValues, 2);\n });\n });\n };\n }\n \n \n custom-checkbox {\n cursor: pointer;\n display: inline-block;\n }\n\n custom-checkbox .icon:before {\n content: '\\2610';\n display: inline-block;\n font-size: 2em;\n line-height: 1;\n speak: none;\n vertical-align: middle;\n }\n\n custom-checkbox.checked .icon:before {\n content: '\\2611';\n }\n \n \n var checkbox = element(by.css('custom-checkbox'));\n var checkedCheckbox = element(by.css('custom-checkbox.checked'));\n\n it('should have the `checked` class only when checked', function() {\n expect(checkbox.isPresent()).toBe(true);\n expect(checkedCheckbox.isPresent()).toBe(false);\n\n checkbox.click();\n expect(checkedCheckbox.isPresent()).toBe(true);\n\n checkbox.click();\n expect(checkedCheckbox.isPresent()).toBe(false);\n });\n\n it('should have the `aria-checked` attribute set to the appropriate value', function() {\n expect(checkedCheckbox.isPresent()).toBe(false);\n expect(checkbox.getAttribute('aria-checked')).toBe('false');\n\n checkbox.click();\n expect(checkedCheckbox.isPresent()).toBe(true);\n expect(checkbox.getAttribute('aria-checked')).toBe('true');\n\n checkbox.click();\n expect(checkedCheckbox.isPresent()).toBe(false);\n expect(checkbox.getAttribute('aria-checked')).toBe('false');\n });\n \n    \n\nngAria will also add `tabIndex`, ensuring custom elements with these roles will be reachable from\nthe keyboard. It is still up to **you** as a developer to **ensure custom controls will be\naccessible**. As a rule, any time you create a widget involving user interaction, be sure to test\nit with your keyboard and at least one mobile and desktop screen reader.\n\n

    ngValue and ngChecked

    \n\nTo ease the transition between native inputs and custom controls, ngAria now supports\n{@link ng.ngValue ngValue} and {@link ng.ngChecked ngChecked}.\nThe original directives were created for native inputs only, so ngAria extends\nsupport to custom elements by managing `aria-checked` for accessibility.\n\n### Example\n\n```html\n\n\n```\n\nBecomes:\n\n```html\n\n\n```\n\n

    ngDisabled

    \n\nThe `disabled` attribute is only valid for certain elements such as `button`, `input` and\n`textarea`. To properly disable custom element directives such as `` or ``,\nusing ngAria with {@link ng.ngDisabled ngDisabled} will also\nadd `aria-disabled`. This tells assistive technologies when a non-native input is disabled, helping\ncustom controls to be more accessible.\n\n### Example\n\n```html\n\n```\n\nBecomes:\n\n```html\n\n```\n\n
    \nYou can check whether a control is legitimately disabled for a screen reader by visiting\n[chrome://accessibility](chrome://accessibility) and inspecting [the accessibility tree](http://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/).\n
    \n\n

    ngRequired

    \n\nThe boolean `required` attribute is only valid for native form controls such as `input` and\n`textarea`. To properly indicate custom element directives such as `` or ``\nas required, using ngAria with {@link ng.ngRequired ngRequired} will also add\n`aria-required`. This tells accessibility APIs when a custom control is required.\n\n### Example\n\n```html\n\n```\n\nBecomes:\n\n```html\n\n```\n\n

    ngReadonly

    \n\nThe boolean `readonly` attribute is only valid for native form controls such as `input` and\n`textarea`. To properly indicate custom element directives such as `` or ``\nas required, using ngAria with {@link ng.ngReadonly ngReadonly} will also add\n`aria-readonly`. This tells accessibility APIs when a custom control is read-only.\n\n### Example\n\n```html\n\n```\n\nBecomes:\n\n```html\n\n```\n\n

    ngShow

    \n\nThe {@link ng.ngShow ngShow} directive shows or hides the\ngiven HTML element based on the expression provided to the `ngShow` attribute. The element is\nshown or hidden by removing or adding the `.ng-hide` CSS class onto the element.\n\nIn its default setup, ngAria for `ngShow` is actually redundant. It toggles `aria-hidden` on the\ndirective when it is hidden or shown. However, the default CSS of `display: none !important`,\nalready hides child elements from a screen reader. It becomes more useful when the default\nCSS is overridden with properties that don’t affect assistive technologies, such as `opacity`\nor `transform`. By toggling `aria-hidden` dynamically with ngAria, we can ensure content visually\nhidden with this technique will not be read aloud in a screen reader.\n\nOne caveat with this combination of CSS and `aria-hidden`: you must also remove links and other\ninteractive child elements from the tab order using `tabIndex=“-1”` on each control. This ensures\nscreen reader users won't accidentally focus on \"mystery elements\". Managing tab index on every\nchild control can be complex and affect performance, so it’s best to just stick with the default\n`display: none` CSS. See the [fourth rule of ARIA use](http://www.w3.org/TR/aria-in-html/#fourth-rule-of-aria-use).\n\n### Example\n```css\n.ng-hide {\n display: block;\n opacity: 0;\n}\n```\n```html\n
    \n```\n\nBecomes:\n\n```html\n
    \n```\n*Note: Child links, buttons or other interactive controls must also be removed from the tab order.*\n\n

    ngHide

    \n\nThe {@link ng.ngHide ngHide} directive shows or hides the\ngiven HTML element based on the expression provided to the `ngHide` attribute. The element is\nshown or hidden by removing or adding the `.ng-hide` CSS class onto the element.\n\nThe default CSS for `ngHide`, the inverse method to `ngShow`, makes ngAria redundant. It toggles\n`aria-hidden` on the directive when it is hidden or shown, but the content is already hidden with\n`display: none`. See explanation for {@link guide/accessibility#ngshow ngShow} when overriding the default CSS.\n\n

    ngClick and ngDblclick

    \nIf `ng-click` or `ng-dblclick` is encountered, ngAria will add `tabindex=\"0\"` to any element not in\nthe list of built in aria nodes:\n\n * Button\n * Anchor\n * Input\n * Textarea\n * Select\n * Details/Summary\n\nTo fix widespread accessibility problems with `ng-click` on `div` elements, ngAria will\ndynamically bind a keypress event by default as long as the element isn't in a node from the list of\nbuilt in aria nodes.\nYou can turn this functionality on or off with the `bindKeypress` configuration option.\n\nngAria will also add the `button` role to communicate to users of assistive technologies. This can\nbe disabled with the `bindRoleForClick` configuration option.\n\nFor `ng-dblclick`, you must still manually add `ng-keypress` and a role to non-interactive elements\nsuch as `div` or `taco-button` to enable keyboard access.\n\n

    Example

    \n```html\n
    \n```\n\nBecomes:\n```html\n
    \n```\n\n

    ngMessages

    \n\nThe ngMessages module makes it easy to display form validation or other messages with priority\nsequencing and animation. To expose these visual messages to screen readers,\nngAria injects `aria-live=\"assertive\"`, causing them to be read aloud any time a message is shown,\nregardless of the user's focus location.\n### Example\n\n```html\n
    \n
    You did not enter a field
    \n
    Your field is too long
    \n
    \n```\n\nBecomes:\n\n```html\n
    \n
    You did not enter a field
    \n
    Your field is too long
    \n
    \n```\n\n## Disabling attributes\nThe attribute magic of ngAria may not work for every scenario. To disable individual attributes,\nyou can use the {@link ngAria.$ariaProvider#config config} method. Just keep in mind this will\ntell ngAria to ignore the attribute globally.\n\n\n \n
    \n <div> with ng-click and bindRoleForClick, tabindex set to false\n
    \n \n     \n    \n\n## Common Accessibility Patterns\n\nAccessibility best practices that apply to web apps in general also apply to AngularJS.\n\n * **Text alternatives**: Add alternate text content to make visual information accessible using\n [these W3C guidelines](http://www.w3.org/TR/html-alt-techniques/). The appropriate technique\n depends on the specific markup but can be accomplished using offscreen spans, `aria-label` or\n label elements, image `alt` attributes, `figure`/`figcaption` elements and more.\n * **HTML Semantics**: If you're creating custom element directives, Web Components or HTML in\n general, use native elements wherever possible to utilize built-in events and properties.\n Alternatively, use ARIA to communicate semantic meaning. See [notes on ARIA use](http://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html).\n * **Focus management**: Guide the user around the app as views are appended/removed.\n Focus should *never* be lost, as this causes unexpected behavior and much confusion (referred to\n as \"freak-out mode\").\n * **Announcing changes**: When filtering or other UI messaging happens away from the user's focus,\n notify with [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).\n * **Color contrast and scale**: Make sure content is legible and interactive controls are usable\n at all screen sizes. Consider configurable UI themes for people with color blindness, low vision\n or other visual impairments.\n * **Progressive enhancement**: Some users do not browse with JavaScript enabled or do not have\n the latest browser. An accessible message about site requirements can inform users and improve\n the experience.\n\n## Additional Resources\n\n * [Using ARIA in HTML](http://www.w3.org/TR/aria-in-html/)\n * [AngularJS Accessibility at ngEurope](https://www.youtube.com/watch?v=dmYDggEgU-s&list=UUEGUP3TJJfMsEM_1y8iviSQ)\n * [Testing with Screen Readers](http://webaim.org/articles/screenreader_testing/)\n * [Chrome Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en)\n * [W3C Accessibility Testing](http://www.w3.org/wiki/Accessibility_testing)\n * [WebAIM](http://webaim.org)\n * [A11y Project](http://a11yproject.com)\n" }, { "path": "docs/content/guide/animations.ngdoc", "content": "@ngdoc overview\n@name Animations\n@sortOrder 310\n@description\n\n\n# Animations\n\nAngularJS provides animation hooks for common directives such as\n{@link ng.directive:ngRepeat ngRepeat}, {@link ng.directive:ngSwitch ngSwitch}, and\n{@link ngRoute.directive:ngView ngView}, as well as custom directives via the `$animate` service.\nThese animation hooks are set in place to trigger animations during the life cycle of various\ndirectives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a\nJavaScript callback Animation (depending on whether an animation is placed on the given directive).\nAnimations can be placed using vanilla CSS by following the naming conventions set in place by\nAngularJS or with JavaScript code, defined as a factory.\n\n
    \n Note that we have used non-prefixed CSS transition properties in our examples as the major\n browsers now support non-prefixed properties. If you intend to support older browsers or certain\n mobile browsers then you will need to include prefixed versions of the transition properties. Take\n a look at http://caniuse.com/#feat=css-transitions for what browsers require prefixes, and\n https://github.com/postcss/autoprefixer for a tool that can automatically generate the prefixes\n for you.\n
    \n\nAnimations are not available unless you include the {@link ngAnimate `ngAnimate` module} as a\ndependency of your application.\n\nBelow is a quick example of animations being enabled for `ngShow` and `ngHide`:\n\n\n \n
    \n \n
    \n Content...\n
    \n
    \n     \n \n .content-area {\n border: 1px solid black;\n margin-top: 10px;\n padding: 10px;\n }\n\n .sample-show-hide {\n transition: all linear 0.5s;\n }\n .sample-show-hide.ng-hide {\n opacity: 0;\n }\n \n    \n\n## Installation\n\nSee the {@link ngAnimate API docs for `ngAnimate`} for instructions on installing the module.\n\nYou may also want to setup a separate CSS file for defining CSS-based animations.\n\n## How they work\n\nAnimations in AngularJS are completely based on CSS classes. As long as you have a CSS class\nattached to an HTML element within your application, you can apply animations to it. Let's say for\nexample that we have an HTML template with a repeater like so:\n\n```html\n
    \n {{ item.id }}\n
    \n```\n\nAs you can see, the `repeated-item` class is present on the element that will be repeated and this\nclass will be used as a reference within our application's CSS and/or JavaScript animation code to\ntell AngularJS to perform an animation.\n\nAs `ngRepeat` does its thing, each time a new item is added into the list, `ngRepeat` will add an\n`ng-enter` class to the element that is being added. When removed it will apply an `ng-leave` class\nand when moved around it will apply an `ng-move` class.\n\nTaking a look at the following CSS code, we can see some transition and keyframe animation code set\nup for each of those events that occur when `ngRepeat` triggers them:\n\n```css\n/*\n We are using CSS transitions for when the enter and move events\n are triggered for the element that has the `repeated-item` class\n*/\n.repeated-item.ng-enter, .repeated-item.ng-move {\n transition: all 0.5s linear;\n opacity: 0;\n}\n\n/*\n `.ng-enter-active` and `.ng-move-active` are where the transition destination\n properties are set so that the animation knows what to animate\n*/\n.repeated-item.ng-enter.ng-enter-active,\n.repeated-item.ng-move.ng-move-active {\n opacity: 1;\n}\n\n/*\n We are using CSS keyframe animations for when the `leave` event\n is triggered for the element that has the `repeated-item` class\n*/\n.repeated-item.ng-leave {\n animation: 0.5s my_animation;\n}\n\n@keyframes my_animation {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n```\n\nThe same approach to animation can be used using JavaScript code\n(**for simplicity, we rely on jQuery to perform animations here**):\n\n```js\nmyModule.animation('.repeated-item', function() {\n return {\n enter: function(element, done) {\n // Initialize the element's opacity\n element.css('opacity', 0);\n\n // Animate the element's opacity\n // (`element.animate()` is provided by jQuery)\n element.animate({opacity: 1}, done);\n\n // Optional `onDone`/`onCancel` callback function\n // to handle any post-animation cleanup operations\n return function(isCancelled) {\n if (isCancelled) {\n // Abort the animation if cancelled\n // (`element.stop()` is provided by jQuery)\n element.stop();\n }\n };\n },\n leave: function(element, done) {\n // Initialize the element's opacity\n element.css('opacity', 1);\n\n // Animate the element's opacity\n // (`element.animate()` is provided by jQuery)\n element.animate({opacity: 0}, done);\n\n // Optional `onDone`/`onCancel` callback function\n // to handle any post-animation cleanup operations\n return function(isCancelled) {\n if (isCancelled) {\n // Abort the animation if cancelled\n // (`element.stop()` is provided by jQuery)\n element.stop();\n }\n };\n },\n\n // We can also capture the following animation events:\n move: function(element, done) {},\n addClass: function(element, className, done) {},\n removeClass: function(element, className, done) {}\n }\n});\n```\n\nWith these generated CSS class names present on the element at the time, AngularJS automatically\nfigures out whether to perform a CSS and/or JavaScript animation. Note that you can't have both CSS\nand JavaScript animations based on the same CSS class. See\n{@link ngAnimate#css-js-animations-together here} for more details.\n\n## Class and `ngClass` animation hooks\n\nAngularJS also pays attention to CSS class changes on elements by triggering the **add** and\n**remove** hooks. This means that if a CSS class is added to or removed from an element then an\nanimation can be executed in between, before the CSS class addition or removal is finalized.\n(Keep in mind that AngularJS will only be able to capture class changes if an\n**interpolated expression** or the **ng-class** directive is used on the element.)\n\nThe example below shows how to perform animations during class changes:\n\n\n \n

    \n \n \n
    \n CSS-Animated Text\n

    \n     \n \n .css-class-add, .css-class-remove {\n transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n }\n\n .css-class,\n .css-class-add.css-class-add-active {\n color: red;\n font-size: 3em;\n }\n\n .css-class-remove.css-class-remove-active {\n font-size: 1em;\n color: black;\n }\n \n    \n\nAlthough the CSS is a little different than what we saw before, the idea is the same.\n\n## Which directives support animations?\n\nA handful of common AngularJS directives support and trigger animation hooks whenever any major\nevent occurs during their life cycle. The table below explains in detail which animation events are\ntriggered:\n\n| Directive | Supported Animations |\n|-------------------------------------------------------------------------------|---------------------------------------------------------------------------|\n| {@link ng.directive:form#animations form / ngForm} | add and remove ({@link ng.directive:form#css-classes various classes}) |\n| {@link ngAnimate.directive:ngAnimateSwap#animations ngAnimateSwap} | enter and leave |\n| {@link ng.directive:ngClass#animations ngClass / {{class}​}} | add and remove |\n| {@link ng.directive:ngClassEven#animations ngClassEven} | add and remove |\n| {@link ng.directive:ngClassOdd#animations ngClassOdd} | add and remove |\n| {@link ng.directive:ngHide#animations ngHide} | add and remove (the `ng-hide` class) |\n| {@link ng.directive:ngIf#animations ngIf} | enter and leave |\n| {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |\n| {@link module:ngMessages#animations ngMessage / ngMessageExp} | enter and leave |\n| {@link module:ngMessages#animations ngMessages} | add and remove (the `ng-active`/`ng-inactive` classes) |\n| {@link ng.directive:ngModel#animations ngModel} | add and remove ({@link ng.directive:ngModel#css-classes various classes}) |\n| {@link ng.directive:ngRepeat#animations ngRepeat} | enter, leave, and move |\n| {@link ng.directive:ngShow#animations ngShow} | add and remove (the `ng-hide` class) |\n| {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |\n| {@link ngRoute.directive:ngView#animations ngView} | enter and leave |\n\n(More information can be found by visiting the documentation associated with each directive.)\n\nFor a full breakdown of the steps involved during each animation event, refer to the\n{@link ng.$animate `$animate` API docs}.\n\n## How do I use animations in my own directives?\n\nAnimations within custom directives can also be established by injecting `$animate` directly into\nyour directive and making calls to it when needed.\n\n```js\nmyModule.directive('my-directive', ['$animate', function($animate) {\n return function(scope, element) {\n element.on('click', function() {\n if (element.hasClass('clicked')) {\n $animate.removeClass(element, 'clicked');\n } else {\n $animate.addClass(element, 'clicked');\n }\n });\n };\n}]);\n```\n\n## Animations on app bootstrap / page load\n\nBy default, animations are disabled when the AngularJS app {@link guide/bootstrap bootstraps}. If you\nare using the {@link ngApp} directive, this happens in the `DOMContentLoaded` event, so immediately\nafter the page has been loaded. Animations are disabled, so that UI and content are instantly\nvisible. Otherwise, with many animations on the page, the loading process may become too visually\noverwhelming, and the performance may suffer.\n\nInternally, `ngAnimate` waits until all template downloads that are started right after bootstrap\nhave finished. Then, it waits for the currently running {@link ng.$rootScope.Scope#$digest $digest}\nand one more after that, to finish. This ensures that the whole app has been compiled fully before\nanimations are attempted.\n\nIf you do want your animations to play when the app bootstraps, you can enable animations globally\nin your main module's {@link angular.Module#run run} function:\n\n```js\nmyModule.run(function($animate) {\n $animate.enabled(true);\n});\n```\n\n## How to (selectively) enable, disable and skip animations\n\nThere are several different ways to disable animations, both globally and for specific animations.\nDisabling specific animations can help to speed up the render performance, for example for large\n`ngRepeat` lists that don't actually have animations. Because `ngAnimate` checks at runtime if\nanimations are present, performance will take a hit even if an element has no animation.\n\n### During the config: {@link $animateProvider#customFilter $animateProvider.customFilter()}\n\nThis function can be called during the {@link angular.Module#config config} phase of an app. It\ntakes a filter function as the only argument, which will then be used to \"filter\" animations (based\non the animated element, the event type, and the animation options). Only when the filter function\nreturns `true`, will the animation be performed. This allows great flexibility - you can easily\ncreate complex rules, such as allowing specific events only or enabling animations on specific\nsubtrees of the DOM, and dynamically modify them, for example disabling animations at certain points\nin time or under certain circumstances.\n\n```js\napp.config(function($animateProvider) {\n $animateProvider.customFilter(function(node, event, options) {\n // Example: Only animate `enter` and `leave` operations.\n return event === 'enter' || event === 'leave';\n });\n});\n```\n\nThe `customFilter` approach generally gives a big speed boost compared to other strategies, because\nthe matching is done before other animation disabling strategies are checked.\n\n
    \n **Best Practice:**\n Keep the filtering function as lean as possible, because it will be called for each DOM\n action (e.g. insertion, removal, class change) performed by \"animation-aware\" directives.\n See {@link guide/animations#which-directives-support-animations- here} for a list of built-in\n directives that support animations.\n Performing computationally expensive or time-consuming operations on each call of the\n filtering function can make your animations sluggish.\n
    \n\n### During the config: {@link $animateProvider#classNameFilter $animateProvider.classNameFilter()}\n\nThis function too can be called during the {@link angular.Module#config config} phase of an app. It\ntakes a regex as the only argument, which will then be matched against the classes of any element\nthat is about to be animated. The regex allows a lot of flexibility - you can either allow\nanimations for specific classes only (useful when you are working with 3rd party animations), or\nexclude specific classes from getting animated.\n\n```js\napp.config(function($animateProvider) {\n $animateProvider.classNameFilter(/animate-/);\n});\n```\n\n```css\n/* prefixed with `animate-` */\n.animate-fade-add.animate-fade-add-active {\n transition: all 1s linear;\n opacity: 0;\n}\n```\n\nThe `classNameFilter` approach generally gives a big speed boost compared to other strategies,\nbecause the matching is done before other animation disabling strategies are checked. However, that\nalso means it is not possible to override class name matching with the two following strategies.\nIt's of course still possible to enable / disable animations by changing an element's class name at\nruntime.\n\n### At runtime: {@link ng.$animate#enabled $animate.enabled()}\n\nThis function can be used to enable / disable animations in two different ways:\n\nWith a single `boolean` argument, it enables / disables animations globally:\n`$animate.enabled(false)` disables all animations in your app.\n\nWhen the first argument is a native DOM or jqLite/jQuery element, the function enables / disables\nanimations on this element *and all its children*: `$animate.enabled(myElement, false)`. You can\nstill use it to re-enable animations for a child element, even if you have disabled them on a parent\nelement. And compared to the `classNameFilter`, you can change the animation status at runtime\ninstead of during the config phase.\n\nNote however that the `$animate.enabled()` state for individual elements does not overwrite\ndisabling rules that have been set in the {@link $animateProvider#classNameFilter classNameFilter}.\n\n### Via CSS styles: overwriting styles in the `ng-animate` CSS class\n\nWhenever an animation is started, `ngAnimate` applies the `ng-animate` class to the element for the\nwhole duration of the animation. By applying CSS transition / animation styling to that class, you\ncan skip an animation:\n\n```css\n.my-class {\n transition: transform 2s;\n}\n\n.my-class:hover {\n transform: translateX(50px);\n}\n\nmy-class.ng-animate {\n transition: 0s;\n}\n```\n\nBy setting `transition: 0s`, `ngAnimate` will ignore the existing transition styles, and not try to\nanimate them (Javascript animations will still execute, though). This can be used to prevent\n{@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries\nissues with existing animations interfering with `ngAnimate`}.\n\n\n## Preventing flicker before an animation starts\n\nWhen nesting elements with structural animations, such as `ngIf`, into elements that have\nclass-based animations such as `ngClass`, it sometimes happens that before the actual animation\nstarts, there is a brief flicker or flash of content where the animated element is briefly visible.\n\nTo prevent this, you can apply styles to the `ng-[event]-prepare` class, which is added as soon as\nan animation is initialized, but removed before the actual animation starts (after waiting for a\n`$digest`). This class is only added for *structural* animations (`enter`, `move`, and `leave`).\n\nHere's an example where you might see flickering:\n\n```html\n
    \n
    \n
    \n
    \n
    \n```\n\nIt is possible that during the `enter` event, the `.message` div will be briefly visible before it\nstarts animating. In that case, you can add styles to the CSS that make sure the element stays\nhidden before the animation starts:\n\n```css\n.message.ng-enter-prepare {\n opacity: 0;\n}\n\n/* Other animation styles ... */\n```\n\n## Preventing collisions with existing animations and third-party libraries\n\nBy default, any `ngAnimate`-enabled directives will assume that `transition` / `animation` styles on\nthe element are part of an `ngAnimate` animation. This can lead to problems when the styles are\nactually for animations that are independent of `ngAnimate`.\n\nFor example, an element acts as a loading spinner. It has an infinite css animation on it, and also\nan {@link ngIf `ngIf`} directive, for which no animations are defined:\n\n```css\n.spinner {\n animation: rotating 2s linear infinite;\n}\n\n@keyframes rotating {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n```\n\nNow, when the `ngIf` expression changes, `ngAnimate` will see the spinner animation and use it to\nanimate the `enter`/`leave` event, which doesn't work because the animation is infinite. The element\nwill still be added / removed after a timeout, but there will be a noticeable delay.\n\nThis might also happen because some third-party frameworks place animation duration defaults across\nmany element or className selectors in order to make their code small and reusable.\n\nYou can prevent this unwanted behavior by adding CSS to the `.ng-animate` class, that is added for\nthe whole duration of each animation. Simply overwrite the transition / animation duration. In the\ncase of the spinner, this would be:\n\n```css\n.spinner.ng-animate {\n animation: 0s none;\n transition: 0s none;\n}\n```\n\nIf you do have CSS transitions / animations defined for the animation events, make sure they have a\nhigher priority than any styles that are not related to `ngAnimate`.\n\nYou can also use one of the other\n{@link guide/animations#how-to-selectively-enable-disable-and-skip-animations\nstrategies to disable animations}.\n\n\n## Enable animations outside of the application DOM tree: {@link ng.$animate#pin $animate.pin()}\n\nBefore animating, `ngAnimate` checks if the animated element is inside the application DOM tree. If\nnot, no animation is run. Usually, this is not a problem since most apps use the `html` or `body`\nelements as their root.\n\nProblems arise when the application is bootstrapped on a different element, and animations are\nattempted on elements that are outside the application tree, e.g. when libraries append popup or\nmodal elements to the body tag.\n\nYou can use {@link ng.$animate#pin `$animate.pin(element, parentHost)`} to associate an element with\nanother element that belongs to your application. Simply call it before the element is added to the\nDOM / before the animation starts, with the element you want to animate, and the element which\nshould be its assumed parent.\n\n\n## More about animations\n\nFor a full breakdown of each method available on `$animate`, see the\n{@link ng.$animate API documentation}.\n\nTo see a complete demo, see the {@link tutorial/step_14 animation step in the phonecat tutorial}.\n" }, { "path": "docs/content/guide/bootstrap.ngdoc", "content": "@ngdoc overview\n@name Bootstrap\n@sortOrder 350\n@description\n\n# Bootstrap\n\nThis page explains the AngularJS initialization process and how you can manually initialize AngularJS\nif necessary.\n\n\n## AngularJS `\n \n\n```\n\n 1. Place the `script` tag at the bottom of the page. Placing script tags at the end of the page\n improves app load time because the HTML loading is not blocked by loading of the `angular.js`\n script. You can get the latest bits from http://code.angularjs.org. Please don't link\n your production code to this URL, as it will expose a security hole on your site. For\n experimental development linking to our site is fine.\n * Choose: `angular-[version].js` for a human-readable file, suitable for development and\n debugging.\n * Choose: `angular-[version].min.js` for a compressed and obfuscated file, suitable for use in\n production.\n 2. Place `ng-app` to the root of your application, typically on the `` tag if you want\n AngularJS to auto-bootstrap your application.\n\n \n\n 3. If you choose to use the old style directive syntax `ng:` then include xml-namespace in `html`\n when running the page in the XHTML mode. (This is here for historical reasons, and we no longer\n recommend use of `ng:`.)\n\n \n\n\n\n## Automatic Initialization\n\n\n\nAngularJS initializes automatically upon `DOMContentLoaded` event or when the `angular.js` script is\nevaluated if at that time `document.readyState` is set to `'complete'`. At this point AngularJS looks\nfor the {@link ng.directive:ngApp `ngApp`} directive which designates your application root.\nIf the {@link ng.directive:ngApp `ngApp`} directive is found then AngularJS will:\n\n * load the {@link guide/module module} associated with the directive.\n * create the application {@link auto.$injector injector}\n * compile the DOM treating the {@link ng.directive:ngApp\n `ngApp`} directive as the root of the compilation. This allows you to tell it to treat only a\n portion of the DOM as an AngularJS application.\n\n\n```html\n\n\n \n I can add: {{ 1+2 }}.\n \n \n\n```\n\nAs a best practice, consider adding an `ng-strict-di` directive on the same element as\n`ng-app`:\n\n\n```html\n\n\n \n I can add: {{ 1+2 }}.\n \n \n\n```\n\nThis will ensure that all services in your application are properly annotated.\nSee the {@link guide/di#using-strict-dependency-injection dependency injection strict mode} docs\nfor more.\n\n\n## Manual Initialization\n\nIf you need to have more control over the initialization process, you can use a manual\nbootstrapping method instead. Examples of when you'd need to do this include using script loaders\nor the need to perform an operation before AngularJS compiles a page.\n\nHere is an example of manually initializing AngularJS:\n\n```html\n\n\n\n
    \n Hello {{greetMe}}!\n
    \n \n\n \n\n\n```\n\nNote that we provided the name of our application module to be loaded into the injector as the second\nparameter of the {@link angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules\non the fly. You must create any custom {@link guide/module modules} before you pass them as a parameter.\n\nYou should call `angular.bootstrap()` *after* you've loaded or defined your modules.\nYou cannot add controllers, services, directives, etc after an application bootstraps.\n\n
    \n**Note:** You should not use the ng-app directive when manually bootstrapping your app.\n
    \n\nThis is the sequence that your code should follow:\n\n 1. After the page and all of the code is loaded, find the root element of your AngularJS\n application, which is typically the root of the document.\n\n 2. Call {@link angular.bootstrap} to {@link compiler compile} the element into an\n executable, bi-directionally bound application.\n\n## Things to keep in mind\n\nThere are a few things to keep in mind regardless of automatic or manual bootstrapping:\n\n- While it's possible to bootstrap more than one AngularJS application per page, we don't actively\n test against this scenario. It's possible that you'll run into problems, especially with complex apps, so\n caution is advised.\n- Do not bootstrap your app on an element with a directive that uses {@link ng.$compile#transclusion transclusion}, such as\n {@link ng.ngIf `ngIf`}, {@link ng.ngInclude `ngInclude`} and {@link ngRoute.ngView `ngView`}.\n Doing this misplaces the app {@link ng.$rootElement `$rootElement`} and the app's {@link auto.$injector injector},\n causing animations to stop working and making the injector inaccessible from outside the app.\n\n## Deferred Bootstrap\n\nThis feature enables tools like [Batarang](https://github.com/angular/angularjs-batarang) and test runners\nto hook into angular's bootstrap process and sneak in more modules\ninto the DI registry which can replace or augment DI services for\nthe purpose of instrumentation or mocking out heavy dependencies.\n\nIf `window.name` contains prefix `NG_DEFER_BOOTSTRAP!` when\n{@link angular.bootstrap} is called, the bootstrap process will be paused\nuntil `angular.resumeBootstrap()` is called.\n\n`angular.resumeBootstrap()` takes an optional array of modules that\nshould be added to the original list of modules that the app was\nabout to be bootstrapped with.\n" }, { "path": "docs/content/guide/compiler.ngdoc", "content": "@ngdoc overview\n@name HTML Compiler\n@sortOrder 330\n@description\n\n# HTML Compiler\n\n
    \n**Note:** this guide is targeted towards developers who are already familiar with AngularJS basics.\n\nIf you're just getting started, we recommend the {@link tutorial/ tutorial} first.\nIf you just want to create custom directives, we recommend the {@link guide/directive directives guide}.\nIf you want a deeper look into AngularJS's compilation process, you're in the right place.\n
    \n\n\n## Overview\n\nAngularJS's {@link ng.$compile HTML compiler} allows the developer to teach the\nbrowser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute\nand even create new HTML elements or attributes with custom behavior. AngularJS calls these behavior\nextensions {@link ng.$compileProvider#directive directives}.\n\nHTML has a lot of constructs for formatting the HTML for static documents in a declarative fashion.\nFor example if something needs to be centered, there is no need to provide instructions to the\nbrowser how the window size needs to be divided in half so that the center is found, and that this\ncenter needs to be aligned with the text's center. Simply add an `align=\"center\"` attribute to any\nelement to achieve the desired behavior. Such is the power of declarative language.\n\nHowever, the declarative language is also limited, as it does not allow you to teach the browser new\nsyntax. For example, there is no easy way to get the browser to align the text at 1/3 the position\ninstead of 1/2. What is needed is a way to teach the browser new HTML syntax.\n\nAngularJS comes pre-bundled with common directives which are useful for building any app. We also\nexpect that you will create directives that are specific to your app. These extensions become a\nDomain Specific Language for building your application.\n\nAll of this compilation takes place in the web browser; no server side or pre-compilation step is\ninvolved.\n\n\n## Compiler\n\nCompiler is an AngularJS service which traverses the DOM looking for attributes. The compilation\nprocess happens in two phases.\n\n 1. **Compile:** traverse the DOM and collect all of the directives. The result is a linking\n function.\n\n 2. **Link:** combine the directives with a scope and produce a live view. Any changes in the\n scope model are reflected in the view, and any user interactions with the view are reflected\n in the scope model. This makes the scope model the single source of truth.\n\nSome directives such as {@link ng.directive:ngRepeat `ng-repeat`} clone DOM elements once\nfor each item in a collection. Having a compile and link phase improves performance since the\ncloned template only needs to be compiled once, and then linked once for each clone instance.\n\n\n## Directive\n\nA directive is a behavior which should be triggered when specific HTML constructs are encountered\nduring the compilation process. The directives can be placed in element names, attributes, class\nnames, as well as comments. Here are some equivalent examples of invoking the {@link\nng.directive:ngBind `ng-bind`} directive.\n\n```html\n \n \n \n \n```\n\nA directive is just a function which executes when the compiler encounters it in the DOM. See {@link\nng.$compileProvider#directive directive API} for in-depth documentation on how\nto write directives.\n\nHere is a directive which makes any element draggable. Notice the `draggable` attribute on the\n`` element.\n\n\n \n angular.module('drag', []).\n directive('draggable', function($document) {\n return function(scope, element, attr) {\n var startX = 0, startY = 0, x = 0, y = 0;\n element.css({\n position: 'relative',\n border: '1px solid red',\n backgroundColor: 'lightgrey',\n cursor: 'pointer',\n display: 'block',\n width: '65px'\n });\n element.on('mousedown', function(event) {\n // Prevent default dragging of selected content\n event.preventDefault();\n startX = event.screenX - x;\n startY = event.screenY - y;\n $document.on('mousemove', mousemove);\n $document.on('mouseup', mouseup);\n });\n\n function mousemove(event) {\n y = event.screenY - startY;\n x = event.screenX - startX;\n element.css({\n top: y + 'px',\n left: x + 'px'\n });\n }\n\n function mouseup() {\n $document.off('mousemove', mousemove);\n $document.off('mouseup', mouseup);\n }\n };\n });\n \n \n Drag ME\n \n\n\n\nThe presence of the `draggable` attribute on any element gives the element new behavior.\nWe extended the vocabulary of the browser in a way which is natural to anyone who is familiar with the principles of HTML.\n\n\n## Understanding View\n\nMost other templating systems consume a static string template and\ncombine it with data, resulting in a new string. The resulting text is then `innerHTML`ed into\nan element.\n\n\n\nThis means that any changes to the data need to be re-merged with the template and then\n`innerHTML`ed into the DOM. Some of the issues with this approach are:\n\n1. reading user input and merging it with data\n2. clobbering user input by overwriting it\n3. managing the whole update process\n4. lack of behavior expressiveness\n\nAngularJS is different. The AngularJS compiler consumes the DOM, not string templates.\nThe result is a linking function, which when combined with a scope model results in a live view. The\nview and scope model bindings are transparent. The developer does not need to make any special calls to update\nthe view. And because `innerHTML` is not used, you won't accidentally clobber user input.\nFurthermore, AngularJS directives can contain not just text bindings, but behavioral constructs as\nwell.\n\n\n\nThe AngularJS approach produces a stable DOM. The DOM element instance bound to a model\nitem instance does not change for the lifetime of the binding. This means that the code can get\nhold of the elements and register event handlers and know that the reference will not be destroyed\nby template data merge.\n\n\n\n## How directives are compiled\n\nIt's important to note that AngularJS operates on DOM nodes rather than strings. Usually, you don't\nnotice this restriction because when a page loads, the web browser parses HTML into the DOM automatically.\n\nHTML compilation happens in three phases:\n\n 1. {@link ng.$compile `$compile`} traverses the DOM and matches directives.\n\n If the compiler finds that an element matches a directive, then the directive is added to the list of\n directives that match the DOM element. A single element may match multiple directives.\n\n 2. Once all directives matching a DOM element have been identified, the compiler sorts the directives\n by their `priority`.\n\n Each directive's `compile` functions are executed. Each `compile` function has a chance to\n modify the DOM. Each `compile` function returns a `link` function. These functions are composed into\n a \"combined\" link function, which invokes each directive's returned `link` function.\n\n 3. `$compile` links the template with the scope by calling the combined linking function from the previous step.\n This in turn will call the linking function of the individual directives, registering listeners on the elements\n and setting up {@link ng.$rootScope.Scope#$watch `$watch`s} with the {@link ng.$rootScope.Scope `scope`}\n as each directive is configured to do.\n\nThe result of this is a live binding between the scope and the DOM. So at this point, a change in\na model on the compiled scope will be reflected in the DOM.\n\nBelow is the corresponding code using the `$compile` service.\nThis should help give you an idea of what AngularJS does internally.\n\n```js\n var $compile = ...; // injected into your code\n var scope = ...;\n var parent = ...; // DOM element where the compiled template can be appended\n\n var html = '
    ';\n\n // Step 1: parse HTML into DOM element\n var template = angular.element(html);\n\n // Step 2: compile the template\n var linkFn = $compile(template);\n\n // Step 3: link the compiled template with the scope.\n var element = linkFn(scope);\n\n // Step 4: Append to DOM (optional)\n parent.appendChild(element);\n```\n\n### The difference between Compile and Link\n\nAt this point you may wonder why the compile process has separate compile and link phases. The\nshort answer is that compile and link separation is needed any time a change in a model causes\na change in the **structure** of the DOM.\n\nIt's rare for directives to have a **compile function**, since most directives are concerned with\nworking with a specific DOM element instance rather than changing its overall structure.\n\nDirectives often have a **link function**. A link function allows the directive to register\nlisteners to the specific cloned DOM element instance as well as to copy content into the DOM\nfrom the scope.\n\n
    \n**Best Practice:** Any operation which can be shared among the instance of directives should be\nmoved to the compile function for performance reasons.\n
    \n\n#### An Example of \"Compile\" Versus \"Link\"\n\nTo understand, let's look at a real-world example with `ngRepeat`:\n\n```html\nHello {{user.name}}, you have these actions:\n
      \n
    • \n {{action.description}}\n
      • \n
    \n```\n\nWhen the above example is compiled, the compiler visits every node and looks for directives.\n\n`{{user.name}}` matches the {@link ng.$interpolate interpolation directive}\nand `ng-repeat` matches the {@link ng.directive:ngRepeat `ngRepeat` directive}.\n\nBut {@link ng.directive:ngRepeat ngRepeat} has a dilemma.\n\nIt needs to be able to clone new `
  • ` elements for every `action` in `user.actions`.\nThis initially seems trivial, but it becomes more complicated when you consider that `user.actions`\nmight have items added to it later. This means that it needs to save a clean copy of the `
  • `\nelement for cloning purposes.\n\nAs new `action`s are inserted, the template `
  • ` element needs to be cloned and inserted into `ul`.\nBut cloning the `
  • ` element is not enough. It also needs to compile the `
  • ` so that its\ndirectives, like `{{action.description}}`, evaluate against the right {@link ng.$rootScope.Scope scope}.\n\n\nA naive approach to solving this problem would be to simply insert a copy of the `
  • ` element and\nthen compile it.\nThe problem with this approach is that compiling on every `
  • ` element that we clone would duplicate\na lot of the work. Specifically, we'd be traversing `
  • ` each time before cloning it to find the\ndirectives. This would cause the compilation process to be slower, in turn making applications\nless responsive when inserting new nodes.\n\nThe solution is to break the compilation process into two phases:\n\nthe **compile phase** where all of the directives are identified and sorted by priority,\nand a **linking phase** where any work which \"links\" a specific instance of the\n{@link ng.$rootScope.Scope scope} and the specific instance of an `
  • ` is performed.\n\n
    \n**Note:** *Link* means setting up listeners on the DOM and setting up `$watch` on the Scope to\nkeep the two in sync.\n
    \n\n{@link ng.directive:ngRepeat `ngRepeat`} works by preventing the compilation process from\ndescending into the `
  • ` element so it can make a clone of the original and handle inserting\nand removing DOM nodes itself.\n\nInstead the {@link ng.directive:ngRepeat `ngRepeat`} directive compiles `
  • ` separately.\nThe result of the `
  • ` element compilation is a linking function which contains all of the\ndirectives contained in the `
  • ` element, ready to be attached to a specific clone of the `
  • `\nelement.\n\nAt runtime the {@link ng.directive:ngRepeat `ngRepeat`} watches the expression and as items\nare added to the array it clones the `
  • ` element, creates a new\n{@link ng.$rootScope.Scope scope} for the cloned `
  • ` element and calls the link function\non the cloned `
  • `.\n\n\n\n### Understanding How Scopes Work with Transcluded Directives\n\nOne of the most common use cases for directives is to create reusable components.\n\nBelow is a pseudo code showing how a simplified dialog component may work.\n\n```html\n
    \n \n\n \n Body goes here: {{username}} is {{title}}.\n \n
    \n```\n\nClicking on the \"show\" button will open the dialog. The dialog will have a title, which is\ndata bound to `username`, and it will also have a body which we would like to transclude\ninto the dialog.\n\nHere is an example of what the template definition for the `dialog` widget may look like.\n\n```html\n
    \n

    {{title}}

    \n
    \n
    \n \n \n
    \n
    \n```\n\nThis will not render properly, unless we do some scope magic.\n\nThe first issue we have to solve is that the dialog box template expects `title` to be defined.\nBut we would like the template's scope property `title` to be the result of interpolating the\n`` element's `title` attribute (i.e. `\"Hello {{username}}\"`). Furthermore, the buttons expect\nthe `onOk` and `onCancel` functions to be present in the scope. This limits the usefulness of the\nwidget. To solve the mapping issue we use the `scope` to create local variables which the template\nexpects as follows:\n\n```js\n scope: {\n title: '@', // the title uses the data-binding from the parent scope\n onOk: '&', // create a delegate onOk function\n onCancel: '&', // create a delegate onCancel function\n visible: '=' // set up visible to accept data-binding\n }\n```\n\nCreating local properties on widget scope creates two problems:\n\n 1. isolation - if the user forgets to set `title` attribute of the dialog widget the dialog\n template will bind to parent scope property. This is unpredictable and undesirable.\n\n 2. transclusion - the transcluded DOM can see the widget locals, which may overwrite the\n properties which the transclusion needs for data-binding. In our example the `title`\n property of the widget clobbers the `title` property of the transclusion.\n\n\nTo solve the issue of lack of isolation, the directive declares a new `isolated` scope. An\nisolated scope does not prototypically inherit from the parent scope, and therefore we don't have\nto worry about accidentally clobbering any properties.\n\nHowever `isolated` scope creates a new problem: if a transcluded DOM is a child of the widget\nisolated scope then it will not be able to bind to anything. For this reason the transcluded scope\nis a child of the original scope, before the widget created an isolated scope for its local\nvariables. This makes the transcluded and widget isolated scope siblings.\n\nThis may seem to be unexpected complexity, but it gives the widget user and developer the least\nsurprise.\n\nTherefore the final directive definition looks something like this:\n\n```js\ntransclude: true,\nscope: {\n title: '@', // the title uses the data-binding from the parent scope\n onOk: '&', // create a delegate onOk function\n onCancel: '&', // create a delegate onCancel function\n visible: '=' // set up visible to accept data-binding\n},\nrestrict: 'E',\nreplace: true\n```\n\n### Double Compilation, and how to avoid it\n\nDouble compilation occurs when an already compiled part of the DOM gets compiled again. This is an\nundesired effect and can lead to misbehaving directives, performance issues, and memory\nleaks.\nA common scenario where this happens is a directive that calls `$compile` in a directive link\nfunction on the directive element. In the following **faulty example**, a directive adds a mouseover behavior\nto a button with `ngClick` on it:\n\n```\nangular.module('app').directive('addMouseover', function($compile) {\n return {\n link: function(scope, element, attrs) {\n var newEl = angular.element(' My Hint');\n element.on('mouseenter mouseleave', function() {\n scope.$apply('showHint = !showHint');\n });\n\n attrs.$set('addMouseover', null); // To stop infinite compile loop\n element.append(newEl);\n $compile(element)(scope); // Double compilation\n }\n }\n})\n```\n\nAt first glance, it looks like removing the original `addMouseover` attribute is all there is needed\nto make this example work.\nHowever, if the directive element or its children have other directives attached, they will be compiled and\nlinked again, because the compiler doesn't keep track of which directives have been assigned to which\nelements.\n\nThis can cause unpredictable behavior, e.g. `ngClick` or other event handlers will be attached\nagain. It can also degrade performance, as watchers for text interpolation are added twice to the scope.\n\nDouble compilation should therefore be avoided. In the above example, only the new element should\nbe compiled:\n\n```\nangular.module('app').directive('addMouseover', function($compile) {\n return {\n link: function(scope, element, attrs) {\n var newEl = angular.element(' My Hint');\n element.on('mouseenter mouseleave', function() {\n scope.$apply('showHint = !showHint');\n });\n\n element.append(newEl);\n $compile(newEl)(scope); // Only compile the new element\n }\n }\n})\n```\n\nAnother scenario is adding a directive programmatically to a compiled element and then executing\ncompile again. See the following **faulty example**:\n\n```html\n\n```\n\n```\nangular.module('app').directive('addOptions', function($compile) {\n return {\n link: function(scope, element, attrs) {\n attrs.$set('addOptions', null) // To stop infinite compile loop\n attrs.$set('ngModelOptions', '{debounce: 1000}');\n $compile(element)(scope); // Double compilation\n }\n }\n});\n```\n\nIn that case, it is necessary to intercept the *initial* compilation of the element:\n\n 1. Give your directive the `terminal` property and a higher priority than directives\n that should not be compiled twice. In the example, the compiler will only compile directives\n which have a priority of 100 or higher.\n 2. Inside this directive's compile function, add any other directive attributes to the template.\n 3. Compile the element, but restrict the maximum priority, so that any already compiled directives\n (including the `addOptions` directive) are not compiled again.\n 4. In the link function, link the compiled element with the element's scope.\n\n```\nangular.module('app').directive('addOptions', function($compile) {\n return {\n priority: 100, // ngModel has priority 1\n terminal: true,\n compile: function(templateElement, templateAttributes) {\n templateAttributes.$set('ngModelOptions', '{debounce: 1000}');\n\n // The third argument is the max priority. Only directives with priority < 100 will be compiled,\n // therefore we don't need to remove the attribute\n var compiled = $compile(templateElement, null, 100);\n\n return function linkFn(scope) {\n compiled(scope) // Link compiled element to scope\n }\n }\n }\n});\n```\n\n" }, { "path": "docs/content/guide/component-router.ngdoc", "content": "@ngdoc overview\n@name Component Router\n@sortOrder 306\n@description\n\n# Component Router\n\n
    \n**Deprecation Notice:** In an effort to keep synchronized with router changes in the new Angular, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.\nWe are investigating backporting the new Angular Router to AngularJS, but alternatively, use the {@link ngRoute} module or community developed projects (e.g. [ui-router](https://github.com/angular-ui/ui-router)).\n
    \n\nThis guide describes the Component Router for AngularJS.\n\n
    \n If you are looking for information about the default router for AngularJS have a look at the {@link ngRoute} module.\n\n If you are looking for information about the Component Router for the new Angular then\n check out the [Angular Router Guide](https://angular.io/docs/ts/latest/guide/router.html).\n
    \n\n## Overview\n\nHere is a table of the main concepts used in the Component Router.\n\n| Concept | Description |\n| ----------------------|-------------------------------------------------------------------------------------- |\n| Router | Displays the Routing Components for the active Route. Manages navigation from one component to the next. |\n| RootRouter | The top level Router that interacts with the current URL location |\n| RouteConfig | Configures a Router with RouteDefinitions, each mapping a URL path to a component. |\n| Routing Component | An AngularJS component with a RouteConfig and an associated Router. |\n| RouteDefinition | Defines how the router should navigate to a component based on a URL pattern. |\n| ngOutlet | The directive (``) that marks where the router should display a view. |\n| ngLink | The directive (`ng-link=\"...\"`) for binding a clickable HTML element to a route, via a Link Parameters Array. |\n| Link Parameters Array | An array that the router interprets into a routing instruction. We can bind a RouterLink to that array or pass the array as an argument to the Router.navigate method. |\n\n\n## Component-based Applications\n\nIt is recommended to develop AngularJS applications as a hierarchy of Components. Each Component\nis an isolated part of the application, which is responsible for its own user interface and has\na well defined programmatic interface to the Component that contains it. Take a look at the\n{@link guide/component component guide} for more information.\n\n![Component Based Architecture](img/guide/component-based-architecture.svg)\n\n\n## URLs and Navigation\n\nIn most applications, users navigate from one view to the next as they perform application tasks.\nThe browser provides a familiar model of application navigation. We enter a URL in the address bar\nor click on a link and the browser navigates to a new page. We click the browser's back and forward\nbuttons and the browser navigates backward and forward through the history of pages we've seen.\n\nWe understand that each view corresponds to a particular URL. In a Component-based application,\neach of these views is implemented by one or more Components.\n\n\n## Component Routes\n\n**How do we choose which Components to display given a particular URL?**\n\nWhen using the Component Router, each **Component** in the application can have a **Router** associated\nwith it. This **Router** contains a mapping of URL segments to child **Components**.\n\n```js\n$routeConfig: [\n { path: '/a/b/c', component: 'someComponent' }, ...\n]\n```\n\nThis means that for a given URL the **Router** will render an associated child **Component**.\n\n\n## Outlets\n\n**How do we know where to render a child Component?**\n\nEach **Routing Component**, needs to have a template that contains one or more **Outlets**, which is\nwhere its child **Components** are rendered. We specify the **Outlet** in the template using the\n{@link ngOutlet ``} directive.\n\n```html\n\n```\n\n*In the future `ng-outlet` will be able to render different child **Components** for a given **Route**\nby specifying a `name` attribute.*\n\n\n## Root Router and Component\n\n**How does the Component Router know which Component to render first?**\n\nAll Component Router applications must contain a top level **Routing Component**, which is associated with\na top level **Root Router**.\n\nThe **Root Router** is the starting point for all navigation. You can access this **Router** by injecting the\n`$rootRouter` service.\n\nWe define the top level **Root Component** by providing a value for the {@link $routerRootComponent} service.\n\n```js\nmyModule.value('$routerRootComponent', 'myApp');\n```\n\nHere we have specified that the **Root Component** is the component directive with the name `myApp`.\n\nRemember to instantiate this **Root Component** in our `index.html` file.\n\n```html\n\n```\n\n## Route Matching\n\nWhen we navigate to any given URL, the {@link $rootRouter} matches its **Route Config** against the URL.\nIf a **Route Definition** in the **Route Config** recognizes a part of the URL then the **Component**\nassociated with the **Route Definition** is instantiated and rendered in the **Outlet**.\n\nIf the new **Component** contains routes of its own then a new **Router ({@link ChildRouter})** is created for\nthis **Routing Component**.\n\nThe {@link ChildRouter} for the new **Routing Component** then attempts to match its **Route Config** against\nthe parts of the URL that have not already been matched by the previous **Router**.\n\nThis process continues until we run out of **Routing Components** or consume the entire URL.\n\n![Routed Components](img/guide/component-routes.svg)\n\nIn the previous diagram, we can see that the URL `/heros/4` has been matched against the `App`, `Heroes` and\n`HeroDetail` **Routing Components**. The **Routers** for each of the **Routing Components** consumed a part\nof the URL: \"/\", \"/heroes\" and \"/4\" respectively.\n\nThe result is that we end up with a hierarchy of **Routing Components** rendered in **Outlets**, via the\n{@link ngOutlet} directive, in each **Routing Component's** template, as you can see in the following diagram.\n\n![Component Hierarchy](img/guide/component-hierarchy.svg)\n\n\n## Example Heroes App\n\nYou can see the complete application running below.\n\n\n\n \n

    Component Router

    \n \n\n \n \n     \n\n \n angular.module('app', ['ngComponentRouter', 'heroes', 'crisis-center'])\n\n .config(function($locationProvider) {\n $locationProvider.html5Mode(true);\n })\n\n .value('$routerRootComponent', 'app')\n\n .component('app', {\n template:\n '\\n' +\n '\\n',\n $routeConfig: [\n {path: '/crisis-center/...', name: 'CrisisCenter', component: 'crisisCenter', useAsDefault: true},\n {path: '/heroes/...', name: 'Heroes', component: 'heroes' }\n ]\n });\n \n\n \n angular.module('heroes', [])\n .service('heroService', HeroService)\n\n .component('heroes', {\n template: '

    Heroes

    ',\n $routeConfig: [\n {path: '/', name: 'HeroList', component: 'heroList', useAsDefault: true},\n {path: '/:id', name: 'HeroDetail', component: 'heroDetail'}\n ]\n })\n\n .component('heroList', {\n template:\n '
    \\n' +\n '{{hero.name}}\\n' +\n '
    ',\n controller: HeroListComponent\n })\n\n .component('heroDetail', {\n template:\n '
    \\n' +\n '

    \"{{$ctrl.hero.name}}\"

    \\n' +\n '
    \\n' +\n ' {{$ctrl.hero.id}}
    \\n' +\n '
    \\n' +\n ' \\n' +\n ' \\n' +\n '
    \\n' +\n ' \\n' +\n '
    \\n',\n bindings: { $router: '<' },\n controller: HeroDetailComponent\n });\n\n\n function HeroService($q) {\n var heroesPromise = $q.resolve([\n { id: 11, name: 'Mr. Nice' },\n { id: 12, name: 'Narco' },\n { id: 13, name: 'Bombasto' },\n { id: 14, name: 'Celeritas' },\n { id: 15, name: 'Magneta' },\n { id: 16, name: 'RubberMan' }\n ]);\n\n this.getHeroes = function() {\n return heroesPromise;\n };\n\n this.getHero = function(id) {\n return heroesPromise.then(function(heroes) {\n for (var i = 0; i < heroes.length; i++) {\n if (heroes[i].id === id) return heroes[i];\n }\n });\n };\n }\n\n function HeroListComponent(heroService) {\n var selectedId = null;\n var $ctrl = this;\n\n this.$routerOnActivate = function(next) {\n // Load up the heroes for this view\n heroService.getHeroes().then(function(heroes) {\n $ctrl.heroes = heroes;\n selectedId = next.params.id;\n });\n };\n\n this.isSelected = function(hero) {\n return (hero.id === selectedId);\n };\n }\n\n function HeroDetailComponent(heroService) {\n var $ctrl = this;\n\n this.$routerOnActivate = function(next) {\n // Get the hero identified by the route parameter\n var id = next.params.id;\n heroService.getHero(id).then(function(hero) {\n $ctrl.hero = hero;\n });\n };\n\n this.gotoHeroes = function() {\n var heroId = this.hero && this.hero.id;\n this.$router.navigate(['HeroList', {id: heroId}]);\n };\n }\n     \n\n \n angular.module('crisis-center', ['dialog'])\n .service('crisisService', CrisisService)\n\n .component('crisisCenter', {\n template: '

    Crisis Center

    ',\n $routeConfig: [\n {path:'/', name: 'CrisisList', component: 'crisisList', useAsDefault: true},\n {path:'/:id', name: 'CrisisDetail', component: 'crisisDetail'}\n ]\n })\n\n .component('crisisList', {\n template:\n '
      \\n' +\n '
    • \\n' +\n ' {{crisis.id}} {{crisis.name}}\\n' +\n '
      • \\n' +\n '
    \\n',\n bindings: { $router: '<' },\n controller: CrisisListComponent,\n $canActivate: function($nextInstruction, $prevInstruction) {\n console.log('$canActivate', arguments);\n }\n })\n\n .component('crisisDetail', {\n templateUrl: 'crisisDetail.html',\n bindings: { $router: '<' },\n controller: CrisisDetailComponent\n });\n\n\n function CrisisService($q) {\n var crisesPromise = $q.resolve([\n {id: 1, name: 'Princess Held Captive'},\n {id: 2, name: 'Dragon Burning Cities'},\n {id: 3, name: 'Giant Asteroid Heading For Earth'},\n {id: 4, name: 'Release Deadline Looms'}\n ]);\n\n this.getCrises = function() {\n return crisesPromise;\n };\n\n this.getCrisis = function(id) {\n return crisesPromise.then(function(crises) {\n for (var i = 0; i < crises.length; i++) {\n if (crises[i].id === id) return crises[i];\n }\n });\n };\n }\n\n function CrisisListComponent(crisisService) {\n var selectedId = null;\n var ctrl = this;\n\n this.$routerOnActivate = function(next) {\n console.log('$routerOnActivate', this, arguments);\n // Load up the crises for this view\n crisisService.getCrises().then(function(crises) {\n ctrl.crises = crises;\n selectedId = next.params.id;\n });\n };\n\n this.isSelected = function(crisis) {\n return (crisis.id === selectedId);\n };\n\n this.onSelect = function(crisis) {\n this.$router.navigate(['CrisisDetail', { id: crisis.id }]);\n };\n }\n\n function CrisisDetailComponent(crisisService, dialogService) {\n var ctrl = this;\n this.$routerOnActivate = function(next) {\n // Get the crisis identified by the route parameter\n var id = next.params.id;\n crisisService.getCrisis(id).then(function(crisis) {\n if (crisis) {\n ctrl.editName = crisis.name;\n ctrl.crisis = crisis;\n } else { // id not found\n ctrl.gotoCrises();\n }\n });\n };\n\n this.$routerCanDeactivate = function() {\n // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged.\n if (!this.crisis || this.crisis.name === this.editName) {\n return true;\n }\n // Otherwise ask the user with the dialog service and return its\n // promise which resolves to true or false when the user decides\n return dialogService.confirm('Discard changes?');\n };\n\n this.cancel = function() {\n ctrl.editName = ctrl.crisis.name;\n ctrl.gotoCrises();\n };\n\n this.save = function() {\n ctrl.crisis.name = ctrl.editName;\n ctrl.gotoCrises();\n };\n\n this.gotoCrises = function() {\n var crisisId = ctrl.crisis && ctrl.crisis.id;\n // Pass along the hero id if available\n // so that the CrisisListComponent can select that hero.\n this.$router.navigate(['CrisisList', {id: crisisId}]);\n };\n }\n     \n\n \n
    \n

    \"{{$ctrl.editName}}\"

    \n
    \n {{$ctrl.crisis.id}}
    \n
    \n \n \n
    \n \n \n
    \n     \n\n \n angular.module('dialog', [])\n\n .service('dialogService', DialogService);\n\n function DialogService($q) {\n this.confirm = function(message) {\n return $q.resolve(window.confirm(message || 'Is it OK?'));\n };\n }\n \n\n \n h1 {color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;}\n h2 { color: #369; font-family: Arial, Helvetica, sans-serif; }\n h3 { color: #444; font-weight: lighter; }\n body { margin: 2em; }\n body, input[text], button { color: #888; font-family: Cambria, Georgia; }\n button {padding: 0.2em; font-size: 14px}\n\n ul {list-style-type: none; margin-left: 1em; padding: 0; width: 20em;}\n\n li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }\n li:hover {color: #369; background-color: #EEE; left: .2em;}\n\n /* route-link anchor tags */\n a {padding: 5px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }\n a:visited, a:link {color: #444;}\n a:hover {color: white; background-color: #1171a3; }\n a.router-link-active {color: white; background-color: #52b9e9; }\n\n .selected { background-color: #EEE; color: #369; }\n\n .badge {\n font-size: small;\n color: white;\n padding: 0.1em 0.7em;\n background-color: #369;\n line-height: 1em;\n position: relative;\n left: -1px;\n top: -1px;\n }\n\n crisis-detail input {\n width: 20em;\n }\n \n\n    \n\n\n### Getting Started\n\nIn the following sections we will step through building this application. The finished application has views\nto display list and detail views of Heroes and Crises.\n\n#### Install the libraries\n\nIt is easier to use [Yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com) to install the\n**Component Router** module. For this guide we will also install AngularJS itself via Yarn:\n\n```bash\nyarn init\nyarn add angular@1.5.x @angular/router@0.2.0\n```\n\n\n#### Load the scripts\n\nJust like any AngularJS application, we load the JavaScript files into our `index.html`:\n\n```html\n \n \n \n```\n\nYou also need to include ES6 shims for browsers that do not support ES6 code (Internet Explorer,\n iOs < 8, Android < 5.0, Windows Mobile < 10):\n ```html\n \n \n \n \n ```\n\n#### Create the `app` module\n\nIn the app.js file, create the main application module `app` which depends on the `ngComponentRouter`\nmodule, which is provided by the **Component Router** script.\n\n```js\nangular.module('app', ['ngComponentRouter'])\n```\n\nWe must choose what **Location Mode** the **Router** should use. We are going to use HTML5 mode locations,\nso that we will not have hash-based paths. We must rely on the browser to provide `pushState` support,\nwhich is true for most modern browsers. See {@link $locationProvider#html5Mode} for more information.\n\n
    \n Using HTML5 mode means that we can have clean URLs for our application routes. However, HTML5 mode does require that our\n web server, which hosts the application, understands that it must respond with the index.html file for\n requests to URLs that represent all our application routes. We are going to use the `lite-server` web server\n to do this for us.\n
    \n\n```js\n.config(function($locationProvider) {\n $locationProvider.html5Mode(true);\n})\n```\n\nConfigure the top level routed `App` Component.\n\n```js\n.value('$routerRootComponent', 'app')\n```\n\nCreate a very simple App Component to test that the application is working.\n\nWe are using the AngularJS {@link $compileProvider#component `.component()`} helper method to create\nall the **Components** in our application. It is perfectly suited to this task.\n\n```js\n.component('app', {\n template: 'It worked!'\n});\n```\n\nAdd a `` element to the head of our index.html.\nRemember that we have chosen to use HTML5 mode for the `$location` service. This means that our HTML\nmust have a base URL.\n\n```html\n\n \n ...\n```\n\n#### Bootstrap AngularJS\n\nBootstrap the AngularJS application and add the top level App Component.\n\n```html\n\n

    Component Router

    \n \n \n```\n\n\n### Implementing the AppComponent\n\nIn the previous section we have created a single top level **App Component**. Let's now create some more\n**Routing Components** and wire up **Route Config** for those. We start with a Heroes Feature, which\nwill display one of two views.\n\n* A list of Heroes that are available:\n\n![Heroes List View](img/guide/heroes-list.png)\n\n* A detailed view of a single Hero:\n\n![Heroes List View](img/guide/hero-detail.png)\n\nWe are going to have a `Heroes` Component for the Heroes feature of our application, and then `HeroList`\nand `HeroDetail` **Components** that will actually display the two different views.\n\n\n#### App Component\n\nConfigure the **App Component** with a template and **Route Config**:\n\n```js\n.component('app', {\n template:\n '\\n' +\n '\\n',\n $routeConfig: [\n {path: '/heroes/...', name: 'Heroes', component: 'heroes'},\n ]\n});\n```\n\nThe **App Component** has an `` directive in its template. This is where the child **Components**\nof this view will be rendered.\n\n#### ngLink\n\nWe have used the `ng-link` directive to create a link to navigate to the Heroes Component. By using this\ndirective we don't need to know what the actual URL will be. We can let the Router generate that for us.\n\nWe have included a link to the Crisis Center but have not included the `ng-link` directive as we have not yet\nimplemented the CrisisCenter component.\n\n\n#### Non-terminal Routes\n\nWe need to tell the **Router** that the `Heroes` **Route Definition** is **non-terminal**, that it should\ncontinue to match **Routes** in its child **Components**. We do this by adding a **continuation ellipsis\n(`...`)** to the path of the Heroes Route, `/heroes/...`.\nWithout the **continuation ellipsis** the `HeroList` **Route** will never be matched because the Router will\nstop at the `Heroes` **Routing Component** and not try to match the rest of the URL.\n\n\n### Heroes Feature\n\nNow we can implement our Heroes Feature which consists of three **Components**: `Heroes`, `HeroList` and\n`HeroDetail`. The `Heroes` **Routing Component** simply provides a template containing the {@link ngOutlet}\ndirective and a **Route Config** that defines a set of child **Routes** which delegate through to the\n`HeroList` and `HeroDetail` **Components**.\n\n### HeroesComponent\n\nCreate a new file `heroes.js`, which defines a new AngularJS module for the **Components** of this feature\nand registers the Heroes **Component**.\n\n```js\nangular.module('heroes', [])\n .component('heroes', {\n template: '

    Heroes

    ',\n $routeConfig: [\n {path: '/', name: 'HeroList', component: 'heroList', useAsDefault: true},\n {path: '/:id', name: 'HeroDetail', component: 'heroDetail'}\n ]\n })\n```\n\nRemember to load this file in the index.html:\n\n```html\n\n```\n\nand also to add the module as a dependency of the `app` module:\n\n```js\nangular.module('app', ['ngComponentRouter', 'heroes'])\n```\n\n#### Use As Default\nThe `useAsDefault` property on the `HeroList` **Route Definition**, indicates that if no other **Route\nDefinition** matches the URL, then this **Route Definition** should be used by default.\n\n#### Route Parameters\nThe `HeroDetail` Route has a named parameter (`id`), indicated by prefixing the URL segment with a colon,\nas part of its `path` property. The **Router** will match anything in this segment and make that value\navailable to the HeroDetail **Component**.\n\n#### Terminal Routes\nBoth the Routes in the `HeroesComponent` are terminal, i.e. their routes do not end with `...`. This is\nbecause the `HeroList` and `HeroDetail` will not contain any child routes.\n\n#### Route Names\n**What is the difference between the `name` and `component` properties on a Route Definition?**\n\nThe `component` property in a **Route Definition** defines the **Component** directive that will be rendered\ninto the DOM via the **Outlet**. For example the `heroDetail` **Component** will be rendered into the page\nwhere the `` lives as ``.\n\nThe `name` property is used to reference the **Route Definition** when generating URLs or navigating to\n**Routes**. For example this link will `Heroes` navigate the **Route Definition**\nthat has the `name` property of `\"Heroes\"`.\n\n\n### HeroList Component\n\nThe HeroList **Component** is the first component in the application that actually contains significant\nfunctionality. It loads up a list of heroes from a `heroService` and displays them using `ng-repeat`.\nAdd it to the `heroes.js` file:\n\n```js\n .component('heroList', {\n template:\n '
    \\n' +\n '{{hero.name}}\\n' +\n '
    ',\n controller: HeroListComponent\n })\n```\n\nThe `ng-link` directive creates links to a more detailed view of each hero, via the expression\n`['HeroDetail', {id: hero.id}]`. This expression is an array describing what Routes to use to generate\nthe link. The first item is the name of the HeroDetail **Route Definition** and the second is a parameter\nobject that will be available to the HeroDetail **Component**.\n\n*The HeroDetail section below explains how to get hold of the `id` parameter of the HeroDetail Route.*\n\nThe template iterates through each `hero` object of the array in the `$ctrl.heroes` property.\n\n*Remember that the `module.component()` helper automatically provides the **Component's Controller** as\nthe `$ctrl` property on the scope of the template.*\n\n\n### HeroService\n\nOur HeroService simulates requesting a list of heroes from a server. In a real application this would be\nmaking an actual server request, perhaps over HTTP.\n\n```js\nfunction HeroService($q) {\n var heroesPromise = $q.resolve([\n { id: 11, name: 'Mr. Nice' },\n ...\n ]);\n\n this.getHeroes = function() {\n return heroesPromise;\n };\n\n this.getHero = function(id) {\n return heroesPromise.then(function(heroes) {\n for (var i = 0; i < heroes.length; i++) {\n if (heroes[i].id === id) return heroes[i];\n }\n });\n };\n}\n```\n\nNote that both the `getHeroes()` and `getHero(id)` methods return a promise for the data. This is because\nin real-life we would have to wait for the server to respond with the data.\n\n\n### Router Lifecycle Hooks\n\n**How do I know when my Component is active?**\n\nTo deal with initialization and tidy up of **Components** that are rendered by a **Router**, we can implement\none or more **Lifecycle Hooks** on the **Component**. These will be called at well defined points in the\nlifecycle of the **Component**.\n\nThe **Lifecycle Hooks** that can be implemented as instance methods on the **Component** are as follows:\n\n* `$routerCanReuse` : called to to determine whether a **Component** can be reused across **Route Definitions**\n that match the same type of **Component**, or whether to destroy and instantiate a new **Component** every time.\n* `$routerOnActivate` / `$routerOnReuse` : called by the **Router** at the end of a successful navigation. Only\n one of `$routerOnActivate` and `$routerOnReuse` will be called depending upon the result of a call to\n `$routerCanReuse`.\n* `$routerCanDeactivate` : called by the **Router** to determine if a **Component** can be removed as part of a\n navigation.\n* `$routerOnDeactivate` : called by the **Router** before destroying a **Component** as part of a navigation.\n\nWe can also provide an **Injectable function** (`$routerCanActivate`) on the **Component Definition Object**,\nor as a static method on the **Component**, that will determine whether this **Component** is allowed to be\nactivated. If any of the `$routerCan...` methods return false or a promise that resolves to false, the\nnavigation will be cancelled.\n\nFor our HeroList **Component** we want to load up the list of heroes when the **Component** is activated.\nSo we implement the `$routerOnActivate()` instance method.\n\n```js\nfunction HeroListComponent(heroService) {\n var $ctrl = this;\n this.$routerOnActivate = function() {\n return heroService.getHeroes().then(function(heroes) {\n $ctrl.heroes = heroes;\n });\n }\n}\n```\n\nRunning the application should update the browser's location to `/heroes` and display the list of heroes\nreturned from the `heroService`.\n\nBy returning a promise for the list of heroes from `$routerOnActivate()` we can delay the activation of the\nRoute until the heroes have arrived successfully. This is similar to how a `resolve` works in {@link ngRoute}.\n\n\n### Route Parameters\n\n**How do I access parameters for the current route?**\n\nThe HeroDetailComponent displays details of an individual hero. The `id` of the hero to display is passed\nas part of the URL, for example **/heroes/12**.\n\nThe **Router** parses the id from the URL when it recognizes the **Route Definition** and provides it to the\n**Component** as part of the parameters of the `$routerOnActivate()` hook.\n\n```js\nfunction HeroDetailComponent(heroService) {\n var $ctrl = this;\n\n this.$routerOnActivate = function(next, previous) {\n // Get the hero identified by the route parameter\n var id = next.params.id;\n return heroService.getHero(id).then(function(hero) {\n $ctrl.hero = hero;\n });\n };\n```\n\nThe `$routerOnActivate(next, previous)` hook receives two parameters, which hold the `next` and `previous`\n**Instruction** objects for the **Route** that is being activated.\n\nThese parameters have a property called `params` which will hold the `id` parameter extracted from the URL\nby the **Router**. In this code it is used to identify a specific Hero to retrieve from the `heroService`.\nThis hero is then attached to the **Component** so that it can be accessed in the template.\n\n\n### Access to the Current Router\n\n**How do I get hold of the current router for my component?**\n\nEach component has its own Router. Unlike in the new Angular, we cannot use the dependency injector to get hold of a component's Router.\nWe can only inject the `$rootRouter`. Instead we use the fact that the `ng-outlet` directive binds the current router to a `$router`\nattribute on our component.\n\n```html\n\n```\n\nWe can then specify a `bindings` property on our component definition to bind the current router to our component:\n\n```js\nbindings: { $router: '<' }\n```\n\nThis sets up a one-way binding of the current Router to the `$router` property of our Component. The binding is available once\nthe component has been activated, and the `$routerOnActivate` hook is called.\n\nAs you might know from reading the {@link guide/component component guide}, the binding is actually available by the time the `$onInit`\nhook is called, which is before the call to `$routerOnActivate`.\n\n### HeroDetailComponent\n\nThe `HeroDetailComponent` displays a form that allows the Hero to be modified.\n\n```js\n .component('heroDetail', {\n template:\n '
    \\n' +\n '

    \"{{$ctrl.hero.name}}\"

    \\n' +\n '
    \\n' +\n ' {{$ctrl.hero.id}}
    \\n' +\n '
    \\n' +\n ' \\n' +\n ' \\n' +\n '
    \\n' +\n ' \\n' +\n '
    \\n',\n bindings: { $router: '<' },\n controller: HeroDetailComponent\n });\n```\n\nThe template contains a button to navigate back to the HeroList. We could have styled an anchor to look\nlike a button and used `ng-link=\"['HeroList']\" but here we demonstrate programmatic navigation via the\nRouter itself, which was made available by the binding in the **Component Definition Object**.\n\n```js\nfunction HeroDetailComponent(heroService) {\n ...\n this.gotoHeroes = function() {\n this.$router.navigate(['HeroList']);\n };\n```\n\nHere we are asking the Router to navigate to a route defined by `['HeroList']`.\nThis is the same kind of array used by the `ng-link` directive.\n\nOther options for generating this navigation are:\n* manually create the URL and call `this.$router.navigateByUrl(url)` - this is discouraged because it\n couples the code of your component to the router URLs.\n* generate an Instruction for a route and navigate directly with this instruction.\n ```js\n var instruction = this.$router.generate(['HeroList']);\n this.$router.navigateByInstruction(instruction);\n ```\n this form gives you the possibility of caching the instruction, but is more verbose.\n\n#### Absolute vs Relative Navigation\n\n**Why not use `$rootRouter` to do the navigation?**\n\nInstead of binding to the current **Router**, we can inject the `$rootRouter` into our **Component** and\nuse that: `$rootRouter.navigate(...)`.\n\nThe trouble with doing this is that navigation is always relative to the **Router**. So in order to navigate\nto the `HeroListComponent` with the `$rootRouter`, we would have to provide a complete path of Routes:\n`['App','Heroes','HeroList']`.\n\n\n### Extra Parameters\n\nWe can also pass additional optional parameters to routes, which get encoded into the URL and are again\navailable to the `$routerOnActivate(next, previous)` hook. If we pass the current `id` from the\nHeroDetailComponent back to the HeroListComponent we can use it to highlight the previously selected hero.\n\n```js\n this.gotoHeroes = function() {\n var heroId = this.hero && this.hero.id;\n this.$router.navigate(['HeroList', {id: heroId}]);\n };\n```\n\nThen in the HeroList component we can extract this `id` in the `$routerOnActivate()` hook.\n\n```js\nfunction HeroListComponent(heroService) {\n var selectedId = null;\n var $ctrl = this;\n\n this.$routerOnActivate = function(next) {\n heroService.getHeroes().then(function(heroes) {\n $ctrl.heroes = heroes;\n selectedId = next.params.id;\n });\n };\n\n this.isSelected = function(hero) {\n return (hero.id === selectedId);\n };\n}\n```\n\nFinally, we can use this information to highlight the current hero in the template.\n\n```html\n\n```\n\n### Crisis Center\n\nLet's implement the Crisis Center feature, which displays a list if crises that need to be dealt with by a hero.\nThe detailed crisis view has an additional feature where it blocks you from navigating if you have not saved\nchanges to the crisis being edited.\n\n* A list of Crises that are happening:\n\n![Crisis List View](img/guide/crisis-list.png)\n\n* A detailed view of a single Crisis:\n\n![Crisis Detail View](img/guide/crisis-detail.png)\n\n\n### Crisis Feature\n\nThis feature is very similar to the Heroes feature. It contains the following **Components**:\n\n* CrisisService: contains method for getting a list of crises and an individual crisis.\n* CrisisListComponent: displays the list of crises, similar to HeroListComponent.\n* CrisisDetailComponent: displays a specific crisis\n\nCrisisService and CrisisListComponent are basically the same as HeroService and HeroListComponent\nrespectively.\n\n### Navigation Control Hooks\n\n**How do I prevent navigation from occurring?**\n\nEach **Component** can provide the `$canActivate` and `$routerCanDeactivate` **Lifecycle Hooks**. The\n`$routerCanDeactivate` hook is an instance method on the **Component**. The `$canActivate` hook is used as a\nstatic method defined on the **Component Definition Object**.\n\nThe **Router** will call these hooks to control navigation from one **Route** to another. Each of these hooks can\nreturn a `boolean` or a Promise that will resolve to a `boolean`.\n\nDuring a navigation, some **Components** will become inactive and some will become active. Before the navigation\ncan complete, all the **Components** must agree that they can be deactivated or activated, respectively.\n\nThe **Router** will call the `$routerCanDeactivate` and `$canActivate` hooks, if they are provided. If any\nof the hooks resolve to `false` then the navigation is cancelled.\n\n#### Dialog Box Service\n\nWe can implement a very simple dialog box that will prompt the user whether they are happy to lose changes they\nhave made. The result of the prompt is a promise that can be used in a `$routerCanDeactivate` hook.\n\n```js\n.service('dialogService', DialogService);\n\nfunction DialogService($q) {\n this.confirm = function(message) {\n return $q.resolve(window.confirm(message || 'Is it OK?'));\n };\n}\n```\n\n### CrisisDetailComponent\n\nWe put the template into its own file by using a `templateUrl` property in the **Component Definition\nObject**:\n\n```js\n .component('crisisDetail', {\n templateUrl: 'app/crisisDetail.html',\n bindings: { $router: '<' },\n controller: CrisisDetailComponent\n });\n```\n\nIn the `$routerOnActivate` hook, we make a local copy of the `crisis.name` property to compare with the\noriginal value so that we can determine whether the name has changed.\n\n```js\n this.$routerOnActivate = function(next) {\n // Get the crisis identified by the route parameter\n var id = next.params.id;\n crisisService.getCrisis(id).then(function(crisis) {\n if (crisis) {\n ctrl.editName = crisis.name; // Make a copy of the crisis name for editing\n ctrl.crisis = crisis;\n } else { // id not found\n ctrl.gotoCrises();\n }\n });\n };\n```\n\nIn the `$routerCanDeactivate` we check whether the name has been modified and ask whether the user\nwishes to discard the changes.\n\n```js\n this.$routerCanDeactivate = function() {\n // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged.\n if (!this.crisis || this.crisis.name === this.editName) {\n return true;\n }\n // Otherwise ask the user with the dialog service and return its\n // promise which resolves to true or false when the user decides\n return dialogService.confirm('Discard changes?');\n };\n```\n\nYou can test this check by navigating to a crisis detail page, modifying the name and then either\npressing the browser's back button to navigate back to the previous page, or by clicking on one of\nthe links to the Crisis Center or Heroes features.\n\nThe Save and Cancel buttons update the `editName` and/or `crisis.name` properties before navigating\nto prevent the `$routerCanDeactivate` hook from displaying the dialog box.\n\n\n## Summary\n\nThis guide has given an overview of the features of the Component Router and how to implement a simple\napplication.\n" }, { "path": "docs/content/guide/component.ngdoc", "content": "@ngdoc overview\n@name Components\n@sortOrder 305\n@description\n\n# Understanding Components\n\nIn AngularJS, a Component is a special kind of {@link guide/directive directive} that uses a simpler\nconfiguration which is suitable for a component-based application structure.\n\nThis makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's\nstyle of application architecture.\n\nAdvantages of Components:\n- simpler configuration than plain directives\n- promote sane defaults and best practices\n- optimized for component-based architecture\n- writing component directives will make it easier to upgrade to Angular\n\nWhen not to use Components:\n\n- for directives that need to perform actions in compile and pre-link functions, because they aren't available\n- when you need advanced directive definition options like priority, terminal, multi-element\n- when you want a directive that is triggered by an attribute or CSS class, rather than an element\n\n## Creating and configuring a Component\n\nComponents can be registered using the {@link ng.$compileProvider#component `.component()`} method of an AngularJS module (returned by {@link module `angular.module()`}). The method takes two arguments:\n\n * The name of the Component (as string).\n * The Component config object. (Note that, unlike the `.directive()` method, this method does **not** take a factory function.)\n\n\n\n angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {\n this.hero = {\n name: 'Spawn'\n };\n });\n\n\n angular.module('heroApp').component('heroDetail', {\n templateUrl: 'heroDetail.html',\n bindings: {\n hero: '='\n }\n });\n\n\n \n
    \n Hero
    \n \n
    \n    \n\n Name: {{$ctrl.hero.name}}\n\n    \n\nIt's also possible to add components via {@link $compileProvider#component} in a module's config phase.\n\n### Comparison between Directive definition and Component definition\n\n| | Directive | Component |\n|-------------------|----------------------|-----------------|\n| bindings | No | Yes (binds to controller) |\n| bindToController | Yes (default: false) | No (use bindings instead) |\n| compile function | Yes | No |\n| controller | Yes | Yes (default `function() {}`) |\n| controllerAs | Yes (default: false) | Yes (default: `$ctrl`) |\n| link functions | Yes | No |\n| multiElement | Yes | No |\n| priority | Yes | No |\n| replace | Yes (deprecated) | No |\n| require | Yes | Yes |\n| restrict | Yes | No (restricted to elements only) |\n| scope | Yes (default: false) | No (scope is always isolate) |\n| template | Yes | Yes, injectable |\n| templateNamespace | Yes | No |\n| templateUrl | Yes | Yes, injectable |\n| terminal | Yes | No |\n| transclude | Yes (default: false) | Yes (default: false) |\n\n\n## Component-based application architecture\n\nAs already mentioned, the component helper makes it easier to structure your application with\na component-based architecture. But what makes a component beyond the options that\nthe component helper has?\n\n- **Components only control their own View and Data:**\nComponents should never modify any data or DOM that is out of their own scope. Normally, in AngularJS\nit is possible to modify data anywhere in the application through scope inheritance and watches. This\nis practical, but can also lead to problems when it is not clear which part of the application is\nresponsible for modifying the data. That is why component directives use an isolate scope, so a whole\nclass of scope manipulation is not possible.\n\n- **Components have a well-defined public API - Inputs and Outputs:**\nHowever, scope isolation only goes so far, because AngularJS uses two-way binding. So if you pass\nan object to a component like this - `bindings: {item: '='}`, and modify one of its properties, the\nchange will be reflected in the parent component. For components however, only the component that owns\nthe data should modify it, to make it easy to reason about what data is changed, and when. For that reason,\ncomponents should follow a few simple conventions:\n\n - Inputs should be using `<` and `@` bindings. The `<` symbol denotes {@link $compile#-scope- one-way bindings} which are\n available since 1.5. The difference to `=` is that the bound properties in the component scope are not watched, which means\n if you assign a new value to the property in the component scope, it will not update the parent scope. Note however, that both parent\n and component scope reference the same object, so if you are changing object properties or array elements in the\n component, the parent will still reflect that change.\n The general rule should therefore be to never change an object or array property in the component scope.\n `@` bindings can be used when the input is a string, especially when the value of the binding doesn't change.\n ```js\n bindings: {\n hero: '<',\n comment: '@'\n }\n ```\n - Outputs are realized with `&` bindings, which function as callbacks to component events.\n ```js\n bindings: {\n onDelete: '&',\n onUpdate: '&'\n }\n ```\n - Instead of manipulating Input Data, the component calls the correct Output Event with the changed data.\n For a deletion, that means the component doesn't delete the `hero` itself, but sends it back to\n the owner component via the correct event.\n ```html\n \n
    \n \n ```\n - That way, the parent component can decide what to do with the event (e.g. delete an item or update the properties)\n ```js\n ctrl.deleteHero(hero) {\n $http.delete(...).then(function() {\n var idx = ctrl.list.indexOf(hero);\n if (idx >= 0) {\n ctrl.list.splice(idx, 1);\n }\n });\n }\n ```\n\n- **Components have a well-defined lifecycle:**\nEach component can implement \"lifecycle hooks\". These are methods that will be called at certain points in the life\nof the component. The following hook methods can be implemented:\n\n * `$onInit()` - Called on each controller after all the controllers on an element have been constructed and\n had their bindings initialized (and before the pre & post linking functions for the directives on\n this element). This is a good place to put initialization code for your controller.\n * `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys\n are the names of the bound properties that have changed, and the values are an object of the form\n `{ currentValue, previousValue, isFirstChange() }`. Use this hook to trigger updates within a component such as\n cloning the bound value to prevent accidental mutation of the outer value.\n * `$doCheck()` - Called on each turn of the digest cycle. Provides an opportunity to detect and act on\n changes. Any actions that you wish to take in response to the changes that you detect must be\n invoked from this hook; implementing this has no effect on when `$onChanges` is called. For example, this hook\n could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not\n be detected by AngularJS's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;\n if detecting changes, you must store the previous value(s) for comparison to the current values.\n * `$onDestroy()` - Called on a controller when its containing scope is destroyed. Use this hook for releasing\n external resources, watches and event handlers.\n * `$postLink()` - Called after this controller's element and its children have been linked. Similar to the post-link\n function this hook can be used to set up DOM event handlers and do direct DOM manipulation.\n Note that child elements that contain `templateUrl` directives will not have been compiled and linked since\n they are waiting for their template to load asynchronously and their own compilation and linking has been\n suspended until that occurs.\n This hook can be considered analogous to the `ngAfterViewInit` and `ngAfterContentInit` hooks in Angular.\n Since the compilation process is rather different in AngularJS there is no direct mapping and care should\n be taken when upgrading.\n\nBy implementing these methods, your component can hook into its lifecycle.\n\n- **An application is a tree of components:**\nIdeally, the whole application should be a tree of components that implement clearly defined inputs\nand outputs, and minimize two-way data binding. That way, it's easier to predict when data changes and what the state\nof a component is.\n\n## Example of a component tree\n\nThe following example expands on the simple component example and incorporates the concepts we introduced\nabove:\n\nInstead of an ngController, we now have a heroList component that holds the data of\ndifferent heroes, and creates a heroDetail for each of them.\n\nThe heroDetail component now contains new functionality:\n- a delete button that calls the bound `onDelete` function of the heroList component\n- an input to change the hero location, in the form of a reusable editableField component. Instead\nof manipulating the hero object itself, it sends a changeset upwards to the heroDetail, which sends\nit upwards to the heroList component, which updates the original data.\n\n\n\n angular.module('heroApp', []);\n\n\n\n function HeroListController($scope, $element, $attrs) {\n var ctrl = this;\n\n // This would be loaded by $http etc.\n ctrl.list = [\n {\n name: 'Superman',\n location: ''\n },\n {\n name: 'Batman',\n location: 'Wayne Manor'\n }\n ];\n\n ctrl.updateHero = function(hero, prop, value) {\n hero[prop] = value;\n };\n\n ctrl.deleteHero = function(hero) {\n var idx = ctrl.list.indexOf(hero);\n if (idx >= 0) {\n ctrl.list.splice(idx, 1);\n }\n };\n }\n\n angular.module('heroApp').component('heroList', {\n templateUrl: 'heroList.html',\n controller: HeroListController\n });\n\n\n\n\n function HeroDetailController() {\n var ctrl = this;\n\n ctrl.delete = function() {\n ctrl.onDelete({hero: ctrl.hero});\n };\n\n ctrl.update = function(prop, value) {\n ctrl.onUpdate({hero: ctrl.hero, prop: prop, value: value});\n };\n }\n\n angular.module('heroApp').component('heroDetail', {\n templateUrl: 'heroDetail.html',\n controller: HeroDetailController,\n bindings: {\n hero: '<',\n onDelete: '&',\n onUpdate: '&'\n }\n });\n\n\n\n\n function EditableFieldController($scope, $element, $attrs) {\n var ctrl = this;\n ctrl.editMode = false;\n\n ctrl.handleModeChange = function() {\n if (ctrl.editMode) {\n ctrl.onUpdate({value: ctrl.fieldValue});\n ctrl.fieldValueCopy = ctrl.fieldValue;\n }\n ctrl.editMode = !ctrl.editMode;\n };\n\n ctrl.reset = function() {\n ctrl.fieldValue = ctrl.fieldValueCopy;\n };\n\n ctrl.$onInit = function() {\n // Make a copy of the initial value to be able to reset it later\n ctrl.fieldValueCopy = ctrl.fieldValue;\n\n // Set a default fieldType\n if (!ctrl.fieldType) {\n ctrl.fieldType = 'text';\n }\n };\n }\n\n angular.module('heroApp').component('editableField', {\n templateUrl: 'editableField.html',\n controller: EditableFieldController,\n bindings: {\n fieldValue: '<',\n fieldType: '@?',\n onUpdate: '&'\n }\n });\n\n\n \n\n\n Heroes
    \n \n    \n\n
    \n
    \n Name: {{$ctrl.hero.name}}
    \n Location:
    \n \n
    \n    \n\n \n \n {{$ctrl.fieldValue}}\n \n \n \n\n    \n\n## Components as route templates\nComponents are also useful as route templates (e.g. when using {@link ngRoute ngRoute}). In a component-based\napplication, every view is a component:\n\n```js\n var myMod = angular.module('myMod', ['ngRoute']);\n myMod.component('home', {\n template: '

    Home

    Hello, {{ $ctrl.user.name }} !

    ',\n controller: function() {\n this.user = {name: 'world'};\n }\n });\n myMod.config(function($routeProvider) {\n $routeProvider.when('/', {\n template: ''\n });\n });\n```\n
    \nWhen using {@link ngRoute.$routeProvider $routeProvider}, you can often avoid some\nboilerplate, by passing the resolved route dependencies directly to the component. Since 1.5,\nngRoute automatically assigns the resolves to the route scope property `$resolve` (you can also\nconfigure the property name via `resolveAs`). When using components, you can take advantage of this and pass resolves\ndirectly into your component without creating an extra route controller:\n\n```js\n var myMod = angular.module('myMod', ['ngRoute']);\n myMod.component('home', {\n template: '

    Home

    Hello, {{ $ctrl.user.name }} !

    ',\n bindings: {\n user: '<'\n }\n });\n myMod.config(function($routeProvider) {\n $routeProvider.when('/', {\n template: '',\n resolve: {\n user: function($http) { return $http.get('...'); }\n }\n });\n });\n```\n\n## Intercomponent Communication\n\nDirectives can require the controllers of other directives to enable communication\nbetween each other. This can be achieved in a component by providing an\nobject mapping for the `require` property. The object keys specify the property names under which\nthe required controllers (object values) will be bound to the requiring component's controller.\n\n
    \nNote that the required controllers will not be available during the instantiation of the controller,\nbut they are guaranteed to be available just before the `$onInit` method is executed!\n
    \n\nHere is a tab pane example built from components:\n\n\n \nangular.module('docsTabsExample', [])\n .component('myTabs', {\n transclude: true,\n controller: function MyTabsController() {\n var panes = this.panes = [];\n this.select = function(pane) {\n angular.forEach(panes, function(pane) {\n pane.selected = false;\n });\n pane.selected = true;\n };\n this.addPane = function(pane) {\n if (panes.length === 0) {\n this.select(pane);\n }\n panes.push(pane);\n };\n },\n templateUrl: 'my-tabs.html'\n })\n .component('myPane', {\n transclude: true,\n require: {\n tabsCtrl: '^myTabs'\n },\n bindings: {\n title: '@'\n },\n controller: function() {\n this.$onInit = function() {\n this.tabsCtrl.addPane(this);\n console.log(this);\n };\n },\n templateUrl: 'my-pane.html'\n });\n \n \n \n \n

    Hello

    \n

    Lorem ipsum dolor sit amet

    \n     \n \n

    World

    \n Mauris elementum elementum enim at suscipit.\n

    counter: {{i || 0}}

    \n     \n     \n     \n \n
    \n \n
    \n
    \n     \n \n
    \n     \n    \n\n\n## Unit-testing Component Controllers\n\nThe easiest way to unit-test a component controller is by using the\n{@link ngMock.$componentController $componentController} that is included in {@link ngMock}. The\nadvantage of this method is that you do not have to create any DOM elements. The following example\nshows how to do this for the `heroDetail` component from above.\n\nThe examples use the [Jasmine](http://jasmine.github.io/) testing framework.\n\n**Controller Test:**\n```js\ndescribe('HeroDetailController', function() {\n var $componentController;\n\n beforeEach(module('heroApp'));\n beforeEach(inject(function(_$componentController_) {\n $componentController = _$componentController_;\n }));\n\n it('should call the `onDelete` binding, when deleting the hero', function() {\n var onDeleteSpy = jasmine.createSpy('onDelete');\n var bindings = {hero: {}, onDelete: onDeleteSpy};\n var ctrl = $componentController('heroDetail', null, bindings);\n\n ctrl.delete();\n expect(onDeleteSpy).toHaveBeenCalledWith({hero: ctrl.hero});\n });\n\n it('should call the `onUpdate` binding, when updating a property', function() {\n var onUpdateSpy = jasmine.createSpy('onUpdate');\n var bindings = {hero: {}, onUpdate: onUpdateSpy};\n var ctrl = $componentController('heroDetail', null, bindings);\n\n ctrl.update('foo', 'bar');\n expect(onUpdateSpy).toHaveBeenCalledWith({\n hero: ctrl.hero,\n prop: 'foo',\n value: 'bar'\n });\n });\n\n});\n```\n" }, { "path": "docs/content/guide/concepts.ngdoc", "content": "@ngdoc overview\n@name Conceptual Overview\n@sortOrder 200\n@description\n\n# Conceptual Overview\n\nThis section briefly touches on all of the important parts of AngularJS using a simple example.\nFor a more in-depth explanation, see the {@link tutorial/ tutorial}.\n\n| Concept | Description |\n|--------------------------------------------|--------------------------------------------------------------------------|\n|{@link concepts#template Template} | HTML with additional markup |\n|{@link concepts#directive Directives} | extend HTML with custom attributes and elements |\n|{@link concepts#model Model} | the data shown to the user in the view and with which the user interacts |\n|{@link concepts#scope Scope} | context where the model is stored so that controllers, directives and expressions can access it |\n|{@link concepts#expression Expressions} | access variables and functions from the scope |\n|{@link concepts#compiler Compiler} | parses the template and instantiates directives and expressions |\n|{@link concepts#filter Filter} | formats the value of an expression for display to the user |\n|{@link concepts#view View} | what the user sees (the DOM) |\n|{@link concepts#databinding Data Binding} | sync data between the model and the view |\n|{@link concepts#controller Controller} | the business logic behind views |\n|{@link concepts#di Dependency Injection} | Creates and wires objects and functions |\n|{@link concepts#injector Injector} | dependency injection container |\n|{@link concepts#module Module} | a container for the different parts of an app including controllers, services, filters, directives which configures the Injector |\n|{@link concepts#service Service} | reusable business logic independent of views |\n\n\n## A first example: Data binding\n\nIn the following example we will build a form to calculate the costs of an invoice in different currencies.\n\nLet's start with input fields for quantity and cost whose values are multiplied to produce the total of the invoice:\n\n\n\n \n
    \n Invoice:\n
    \n Quantity: \n
    \n
    \n Costs: \n
    \n
    \n Total: {{qty * cost | currency}}\n
    \n
    \n     \n    \n\nTry out the Live Preview above, and then let's walk through the example and describe what's going on.\n\n\n\nThis looks like normal HTML, with some new markup. In AngularJS, a file like this is called a\n{@link templates template}. When AngularJS starts your application, it parses and\nprocesses this new markup from the template using the {@link compiler compiler}.\nThe loaded, transformed and rendered DOM is then called the *view*.\n\nThe first kind of new markup are the {@link directive directives}.\nThey apply special behavior to attributes or elements in the HTML. In the example above we use the\n{@link ng.directive:ngApp `ng-app`} attribute, which is linked to a directive that automatically\ninitializes our application. AngularJS also defines a directive for the {@link ng.directive:input `input`}\nelement that adds extra behavior to the element. The {@link ng.directive:ngModel `ng-model`} directive\nstores/updates the value of the input field into/from a variable.\n\n
    \n**Custom directives to access the DOM**: In AngularJS, the only place where an application should access the DOM is\n within directives. This is important because artifacts that access the DOM are hard to test.\n If you need to access the DOM directly you should write a custom directive for this. The\n {@link directive directives guide} explains how to do this.\n
    \n\nThe second kind of new markup are the double curly braces `{{ expression | filter }}`:\nWhen the compiler encounters this markup, it will replace it with the evaluated value of the markup.\nAn {@link expression expression} in a template is a JavaScript-like code snippet that allows\nAngularJS to read and write variables. Note that those variables are not global variables.\nJust like variables in a JavaScript function live in a scope,\nAngularJS provides a {@link scope scope} for the variables accessible to expressions.\nThe values that are stored in variables on the scope are referred to as the *model*\nin the rest of the documentation.\nApplied to the example above, the markup directs AngularJS to \"take the data we got from the input widgets\nand multiply them together\".\n\nThe example above also contains a {@link guide/filter filter}.\nA filter formats the value of an expression for display to the user.\nIn the example above, the filter {@link ng.filter:currency `currency`} formats a number\ninto an output that looks like money.\n\nThe important thing in the example is that AngularJS provides _live_ bindings:\nWhenever the input values change, the value of the expressions are automatically\nrecalculated and the DOM is updated with their values.\nThe concept behind this is {@link databinding two-way data binding}.\n\n\n## Adding UI logic: Controllers\n\nLet's add some more logic to the example that allows us to enter and calculate the costs in\ndifferent currencies and also pay the invoice.\n\n\n \n angular.module('invoice1', [])\n .controller('InvoiceController', function InvoiceController() {\n this.qty = 1;\n this.cost = 2;\n this.inCurr = 'EUR';\n this.currencies = ['USD', 'EUR', 'CNY'];\n this.usdToForeignRates = {\n USD: 1,\n EUR: 0.74,\n CNY: 6.09\n };\n\n this.total = function total(outCurr) {\n return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);\n };\n this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {\n return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];\n };\n this.pay = function pay() {\n window.alert('Thanks!');\n };\n });\n \n \n
    \n Invoice:\n
    \n Quantity: \n
    \n
    \n Costs: \n \n
    \n
    \n Total:\n \n {{invoice.total(c) | currency:c}}\n
    \n \n
    \n
    \n     \n    \n\nWhat changed?\n\nFirst, there is a new JavaScript file that contains a {@link controller controller}.\nMore accurately, the file specifies a constructor function that will be used to create the actual\ncontroller instance. The purpose of controllers is to expose variables and functionality to\nexpressions and directives.\n\nBesides the new file that contains the controller code, we also added an\n{@link ng.directive:ngController `ng-controller`} directive to the HTML.\nThis directive tells AngularJS that the new `InvoiceController` is responsible for the element with the directive\nand all of the element's children.\nThe syntax `InvoiceController as invoice` tells AngularJS to instantiate the controller\nand save it in the variable `invoice` in the current scope.\n\nWe also changed all expressions in the page to read and write variables within that\ncontroller instance by prefixing them with `invoice.` . The possible currencies are defined in the controller\nand added to the template using {@link ng.directive:ngRepeat `ng-repeat`}.\nAs the controller contains a `total` function\nwe are also able to bind the result of that function to the DOM using `{{ invoice.total(...) }}`.\n\nAgain, this binding is live, i.e. the DOM will be automatically updated\nwhenever the result of the function changes.\nThe button to pay the invoice uses the directive {@link ng.directive:ngClick `ngClick`}. This will evaluate the\ncorresponding expression whenever the button is clicked.\n\nIn the new JavaScript file we are also creating a {@link concepts#module module}\nat which we register the controller. We will talk about modules in the next section.\n\nThe following graphic shows how everything works together after we introduced the controller:\n\n\n\n## View-independent business logic: Services\n\nRight now, the `InvoiceController` contains all logic of our example. When the application grows it\nis a good practice to move view-independent logic from the controller into a\n{@link services service}, so it can be reused by other parts\nof the application as well. Later on, we could also change that service to load the exchange rates\nfrom the web, e.g. by calling the [exchangeratesapi.io](https://exchangeratesapi.io) exchange rate API, without changing the controller.\n\nLet's refactor our example and move the currency conversion into a service in another file:\n\n\n \n angular.module('finance2', [])\n .factory('currencyConverter', function() {\n var currencies = ['USD', 'EUR', 'CNY'];\n var usdToForeignRates = {\n USD: 1,\n EUR: 0.74,\n CNY: 6.09\n };\n var convert = function(amount, inCurr, outCurr) {\n return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];\n };\n\n return {\n currencies: currencies,\n convert: convert\n };\n });\n \n \n angular.module('invoice2', ['finance2'])\n .controller('InvoiceController', ['currencyConverter', function InvoiceController(currencyConverter) {\n this.qty = 1;\n this.cost = 2;\n this.inCurr = 'EUR';\n this.currencies = currencyConverter.currencies;\n\n this.total = function total(outCurr) {\n return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);\n };\n this.pay = function pay() {\n window.alert('Thanks!');\n };\n }]);\n \n \n
    \n Invoice:\n
    \n Quantity: \n
    \n
    \n Costs: \n \n
    \n
    \n Total:\n \n {{invoice.total(c) | currency:c}}\n
    \n \n
    \n
    \n     \n    \n\n\n\nWhat changed?\n\nWe moved the `convertCurrency` function and the definition of the existing currencies\ninto the new file `finance2.js`. But how does the controller\nget a hold of the now separated function?\n\nThis is where {@link di Dependency Injection} comes into play.\nDependency Injection (DI) is a software design pattern that\ndeals with how objects and functions get created and how they get a hold of their dependencies.\nEverything within AngularJS (directives, filters, controllers,\nservices, ...) is created and wired using dependency injection. Within AngularJS,\nthe DI container is called the {@link di injector}.\n\nTo use DI, there needs to be a place where all the things that should work together are registered.\nIn AngularJS, this is the purpose of the {@link module modules}.\nWhen AngularJS starts, it will use the configuration of the module with the name defined by the `ng-app` directive,\nincluding the configuration of all modules that this module depends on.\n\nIn the example above:\nThe template contains the directive `ng-app=\"invoice2\"`. This tells AngularJS\nto use the `invoice2` module as the main module for the application.\nThe code snippet `angular.module('invoice2', ['finance2'])` specifies that the `invoice2` module depends on the\n`finance2` module. By this, AngularJS uses the `InvoiceController` as well as the `currencyConverter` service.\n\nNow that AngularJS knows of all the parts of the application, it needs to create them.\nIn the previous section we saw that controllers are created using a constructor function.\nFor services, there are multiple ways to specify how they are created\n(see the {@link services service guide}).\nIn the example above, we are using an anonymous function as the factory function for the\n`currencyConverter` service.\nThis function should return the `currencyConverter` service instance.\n\nBack to the initial question: How does the `InvoiceController` get a reference to the `currencyConverter` function?\nIn AngularJS, this is done by simply defining arguments on the constructor function. With this, the injector\nis able to create the objects in the right order and pass the previously created objects into the\nfactories of the objects that depend on them.\nIn our example, the `InvoiceController` has an argument named `currencyConverter`. By this, AngularJS knows about the\ndependency between the controller and the service and calls the controller with the service instance as argument.\n\nThe last thing that changed in the example between the previous section and this section is that we\nnow pass an array to the `module.controller` function, instead of a plain function. The array first\ncontains the names of the service dependencies that the controller needs. The last entry\nin the array is the controller constructor function.\nAngularJS uses this array syntax to define the dependencies so that the DI also works after minifying\nthe code, which will most probably rename the argument name of the controller constructor function\nto something shorter like `a`.\n\n## Accessing the backend\n\nLet's finish our example by fetching the exchange rates from the [exchangeratesapi.io](https://exchangeratesapi.io) exchange rate API.\nThe following example shows how this is done with AngularJS:\n\n\n \n angular.module('invoice3', ['finance3'])\n .controller('InvoiceController', ['currencyConverter', function InvoiceController(currencyConverter) {\n this.qty = 1;\n this.cost = 2;\n this.inCurr = 'EUR';\n this.currencies = currencyConverter.currencies;\n\n this.total = function total(outCurr) {\n return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);\n };\n this.pay = function pay() {\n window.alert('Thanks!');\n };\n }]);\n \n \n angular.module('finance3', [])\n .factory('currencyConverter', ['$http', function($http) {\n var currencies = ['USD', 'EUR', 'CNY'];\n var usdToForeignRates = {};\n\n var convert = function(amount, inCurr, outCurr) {\n return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];\n };\n\n var refresh = function() {\n var url = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=' + currencies.join(\",\");\n return $http.get(url).then(function(response) {\n usdToForeignRates = response.data.rates;\n usdToForeignRates['USD'] = 1;\n });\n };\n\n refresh();\n\n return {\n currencies: currencies,\n convert: convert\n };\n }]);\n \n \n
    \n Invoice:\n
    \n Quantity: \n
    \n
    \n Costs: \n \n
    \n
    \n Total:\n \n {{invoice.total(c) | currency:c}}\n
    \n \n
    \n
    \n     \n    \n\nWhat changed?\nOur `currencyConverter` service of the `finance` module now uses the {@link ng.$http `$http`}, a\nbuilt-in service provided by AngularJS for accessing a server backend. `$http` is a wrapper around\n[`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)\nand [JSONP](http://en.wikipedia.org/wiki/JSONP) transports.\n\n" }, { "path": "docs/content/guide/controller.ngdoc", "content": "@ngdoc overview\n@name Controllers\n@sortOrder 220\n@description\n\n# Understanding Controllers\n\nIn AngularJS, a Controller is defined by a JavaScript **constructor function** that is used to augment the\n{@link scope AngularJS Scope}.\n\nControllers can be attached to the DOM in different ways. For each of them, AngularJS will\ninstantiate a new Controller object, using the specified Controller's **constructor function**:\n\n- the {@link ng.directive:ngController ngController} directive. A new **child scope** will be\ncreated and made available as an injectable parameter to the Controller's constructor function\nas `$scope`.\n- a route controller in a {@link ngRoute.$routeProvider $route definition}.\n- the controller of a {@link guide/directive regular directive}, or a\n{@link guide/component component directive}.\n\nIf the controller has been attached using the `controller as` syntax then the controller instance will\nbe assigned to a property on the scope.\n\nUse controllers to:\n\n- Set up the initial state of the `$scope` object.\n- Add behavior to the `$scope` object.\n\nDo not use controllers to:\n\n- Manipulate DOM — Controllers should contain only business logic.\n Putting any presentation logic into Controllers significantly affects its testability. AngularJS\n has {@link databinding databinding} for most cases and {@link guide/directive directives} to\n encapsulate manual DOM manipulation.\n- Format input — Use {@link forms AngularJS form controls} instead.\n- Filter output — Use {@link guide/filter AngularJS filters} instead.\n- Share code or state across controllers — Use {@link services AngularJS\nservices} instead.\n- Manage the life-cycle of other components (for example, to create service instances).\n\nIn general, a Controller shouldn't try to do too much. It should contain only the business logic\nneeded for a single view.\n\nThe most common way to keep Controllers slim is by encapsulating work that doesn't belong to\ncontrollers into services and then using these services in Controllers via dependency injection.\nThis is discussed in the {@link di Dependency Injection} and {@link services\nServices} sections of this guide.\n\n\n## Setting up the initial state of a `$scope` object\n\nTypically, when you create an application you need to set up the initial state for the AngularJS\n`$scope`. You set up the initial state of a scope by attaching properties to the `$scope` object.\nThe properties contain the **view model** (the model that will be presented by the view). All the\n`$scope` properties will be available to the {@link templates template} at the point in the DOM where the Controller\nis registered.\n\nThe following example demonstrates creating a `GreetingController`, which attaches a `greeting`\nproperty containing the string `'Hola!'` to the `$scope`:\n\n```js\nvar myApp = angular.module('myApp',[]);\n\nmyApp.controller('GreetingController', ['$scope', function($scope) {\n $scope.greeting = 'Hola!';\n}]);\n```\n\nWe create an {@link module AngularJS Module}, `myApp`, for our application. Then we add the controller's\nconstructor function to the module using the `.controller()` method. This keeps the controller's\nconstructor function out of the global scope.\n\n
    \nWe have used an **inline injection annotation** to explicitly specify the dependency\nof the Controller on the `$scope` service provided by AngularJS. See the guide on\n{@link guide/di Dependency Injection} for more information.\n
    \n\nWe attach our controller to the DOM using the `ng-controller` directive. The `greeting` property can\nnow be data-bound to the template:\n\n```js\n
    \n {{ greeting }}\n
    \n```\n\n\n## Adding Behavior to a Scope Object\n\nIn order to react to events or execute computation in the view we must provide behavior to the\nscope. We add behavior to the scope by attaching methods to the `$scope` object. These methods are\nthen available to be called from the template/view.\n\nThe following example uses a Controller to add a method, which doubles a number, to the scope:\n\n```js\nvar myApp = angular.module('myApp',[]);\n\nmyApp.controller('DoubleController', ['$scope', function($scope) {\n $scope.double = function(value) { return value * 2; };\n}]);\n```\n\nOnce the Controller has been attached to the DOM, the `double` method can be invoked in an AngularJS\nexpression in the template:\n\n```js\n
    \n Two times equals {{ double(num) }}\n
    \n```\n\nAs discussed in the {@link concepts Concepts} section of this guide, any\nobjects (or primitives) assigned to the scope become model properties. Any methods assigned to\nthe scope are available in the template/view, and can be invoked via AngularJS expressions\nand `ng` event handler directives (e.g. {@link ng.directive:ngClick ngClick}).\n\n## Simple Spicy Controller Example\n\nTo illustrate further how Controller components work in AngularJS, let's create a little app with the\nfollowing components:\n\n- A {@link templates template} with two buttons and a simple message\n- A model consisting of a string named `spice`\n- A Controller with two functions that set the value of `spice`\n\nThe message in our template contains a binding to the `spice` model which, by default, is set to the\nstring \"very\". Depending on which button is clicked, the `spice` model is set to `chili` or\n`jalapeño`, and the message is automatically updated by data-binding.\n\n\n \n
    \n \n \n

    The food is {{spice}} spicy!

    \n
    \n     \n \n var myApp = angular.module('spicyApp1', []);\n\n myApp.controller('SpicyController', ['$scope', function($scope) {\n $scope.spice = 'very';\n\n $scope.chiliSpicy = function() {\n $scope.spice = 'chili';\n };\n\n $scope.jalapenoSpicy = function() {\n $scope.spice = 'jalapeño';\n };\n }]);\n \n    \n\nThings to notice in the example above:\n\n- The `ng-controller` directive is used to (implicitly) create a scope for our template, and the\nscope is augmented (managed) by the `SpicyController` Controller.\n- `SpicyController` is just a plain JavaScript function. As an (optional) naming convention the name\nstarts with capital letter and ends with \"Controller\".\n- Assigning a property to `$scope` creates or updates the model.\n- Controller methods can be created through direct assignment to scope (see the `chiliSpicy` method)\n- The Controller methods and properties are available in the template (for both the `
    ` element and\nits children).\n\n## Spicy Arguments Example\n\nController methods can also take arguments, as demonstrated in the following variation of the\nprevious example.\n\n\n \n
    \n \n \n \n

    The food is {{spice}} spicy!

    \n
    \n     \n \n var myApp = angular.module('spicyApp2', []);\n\n myApp.controller('SpicyController', ['$scope', function($scope) {\n $scope.customSpice = 'wasabi';\n $scope.spice = 'very';\n\n $scope.spicy = function(spice) {\n $scope.spice = spice;\n };\n }]);\n \n    \n\nNotice that the `SpicyController` Controller now defines just one method called `spicy`, which takes one\nargument called `spice`. The template then refers to this Controller method and passes in a string\nconstant `'chili'` in the binding for the first button and a model property `customSpice` (bound to an\ninput box) in the second button.\n\n## Scope Inheritance Example\n\nIt is common to attach Controllers at different levels of the DOM hierarchy. Since the\n{@link ng.directive:ngController ng-controller} directive creates a new child scope, we get a\nhierarchy of scopes that inherit from each other. The `$scope` that each Controller receives will\nhave access to properties and methods defined by Controllers higher up the hierarchy.\nSee [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) for\nmore information about scope inheritance.\n\n\n \n
    \n
    \n

    Good {{timeOfDay}}, {{name}}!

    \n\n
    \n

    Good {{timeOfDay}}, {{name}}!

    \n\n
    \n

    Good {{timeOfDay}}, {{name}}!

    \n
    \n
    \n
    \n
    \n     \n \n div.spicy div {\n padding: 10px;\n border: solid 2px blue;\n }\n \n \n var myApp = angular.module('scopeInheritance', []);\n myApp.controller('MainController', ['$scope', function($scope) {\n $scope.timeOfDay = 'morning';\n $scope.name = 'Nikki';\n }]);\n myApp.controller('ChildController', ['$scope', function($scope) {\n $scope.name = 'Mattie';\n }]);\n myApp.controller('GrandChildController', ['$scope', function($scope) {\n $scope.timeOfDay = 'evening';\n $scope.name = 'Gingerbread Baby';\n }]);\n \n    \n\nNotice how we nested three `ng-controller` directives in our template. This will result in four\nscopes being created for our view:\n\n- The root scope\n- The `MainController` scope, which contains `timeOfDay` and `name` properties\n- The `ChildController` scope, which inherits the `timeOfDay` property but overrides (shadows) the\n `name` property from the previous scope\n- The `GrandChildController` scope, which overrides (shadows) both the `timeOfDay` property defined\n in `MainController` and the `name` property defined in `ChildController`\n\nInheritance works with methods in the same way as it does with properties. So in our previous\nexamples, all of the properties could be replaced with methods that return string values.\n\n\n## Testing Controllers\n\nAlthough there are many ways to test a Controller, one of the best conventions, shown below,\ninvolves injecting the {@link ng.$rootScope $rootScope} and {@link ng.$controller $controller}:\n\n**Controller Definition:**\n```js\n var myApp = angular.module('myApp',[]);\n\n myApp.controller('MyController', function($scope) {\n $scope.spices = [{\"name\":\"pasilla\", \"spiciness\":\"mild\"},\n {\"name\":\"jalapeno\", \"spiciness\":\"hot hot hot!\"},\n {\"name\":\"habanero\", \"spiciness\":\"LAVA HOT!!\"}];\n $scope.spice = \"habanero\";\n });\n```\n\n**Controller Test:**\n```js\ndescribe('myController function', function() {\n\n describe('myController', function() {\n var $scope;\n\n beforeEach(module('myApp'));\n\n beforeEach(inject(function($rootScope, $controller) {\n $scope = $rootScope.$new();\n $controller('MyController', {$scope: $scope});\n }));\n\n it('should create \"spices\" model with 3 spices', function() {\n expect($scope.spices.length).toBe(3);\n });\n\n it('should set the default value of spice', function() {\n expect($scope.spice).toBe('habanero');\n });\n });\n});\n```\n\n\nIf you need to test a nested Controller you must create the same scope hierarchy\nin your test that exists in the DOM:\n\n```js\ndescribe('state', function() {\n var mainScope, childScope, grandChildScope;\n\n beforeEach(module('myApp'));\n\n beforeEach(inject(function($rootScope, $controller) {\n mainScope = $rootScope.$new();\n $controller('MainController', {$scope: mainScope});\n childScope = mainScope.$new();\n $controller('ChildController', {$scope: childScope});\n grandChildScope = childScope.$new();\n $controller('GrandChildController', {$scope: grandChildScope});\n }));\n\n it('should have over and selected', function() {\n expect(mainScope.timeOfDay).toBe('morning');\n expect(mainScope.name).toBe('Nikki');\n expect(childScope.timeOfDay).toBe('morning');\n expect(childScope.name).toBe('Mattie');\n expect(grandChildScope.timeOfDay).toBe('evening');\n expect(grandChildScope.name).toBe('Gingerbread Baby');\n });\n});\n```\n" }, { "path": "docs/content/guide/css-styling.ngdoc", "content": "@ngdoc overview\n@name Working With CSS\n@sortOrder 510\n@description\n\n\nAngularJS sets these CSS classes. It is up to your application to provide useful styling.\n\n# CSS classes used by AngularJS\n\n* `ng-scope`\n - **Usage:** AngularJS applies this class to any element for which a new {@link $rootScope scope}\n is defined. (see {@link guide/scope scope} guide for more information about scopes)\n\n* `ng-isolate-scope`\n - **Usage:** AngularJS applies this class to any element for which a new\n {@link guide/directive#isolating-the-scope-of-a-directive isolate scope} is defined.\n\n* `ng-binding`\n - **Usage:** AngularJS applies this class to any element that is attached to a data binding, via `ng-bind` or\n `{{}}` curly braces, for example. (see {@link guide/databinding databinding} guide)\n\n* `ng-invalid`, `ng-valid`\n - **Usage:** AngularJS applies this class to a form control widget element if that element's input does\n not pass validation. (see {@link ng.directive:input input} directive)\n\n* `ng-pristine`, `ng-dirty`\n - **Usage:** AngularJS {@link ng.directive:ngModel ngModel} directive applies `ng-pristine` class\n to a new form control widget which did not have user interaction. Once the user interacts with\n the form control, the class is changed to `ng-dirty`.\n\n* `ng-touched`, `ng-untouched`\n - **Usage:** AngularJS {@link ng.directive:ngModel ngModel} directive applies `ng-untouched` class\n to a new form control widget which has not been blurred. Once the user blurs the form control,\n the class is changed to `ng-touched`.\n\n\n## Related Topics\n\n* {@link guide/templates AngularJS Templates}\n* {@link guide/forms AngularJS Forms}\n" }, { "path": "docs/content/guide/databinding.ngdoc", "content": "@ngdoc overview\n@name Data Binding\n@sortOrder 210\n@description\n\n# Data Binding\n\nData-binding in AngularJS apps is the automatic synchronization of data between the model and view\ncomponents. The way that AngularJS implements data-binding lets you treat the model as the\nsingle-source-of-truth in your application. The view is a projection of the model at all times.\nWhen the model changes, the view reflects the change, and vice versa.\n\n## Data Binding in Classical Template Systems\n\n
    \nMost templating systems bind data in only one direction: they merge template and model components\ntogether into a view. After the merge occurs, changes to the model\nor related sections of the view are NOT automatically reflected in the view. Worse, any changes\nthat the user makes to the view are not reflected in the model. This means that the developer has\nto write code that constantly syncs the view with the model and the model with the view.\n\n## Data Binding in AngularJS Templates\n\n
    \nAngularJS templates work differently. First the template (which is the uncompiled HTML along with\nany additional markup or directives) is compiled on the browser. The compilation step produces a\nlive view. Any changes to the view are immediately reflected in the model, and any changes in\nthe model are propagated to the view. The model is the single-source-of-truth for the application\nstate, greatly simplifying the programming model for the developer. You can think of\nthe view as simply an instant projection of your model.\n\nBecause the view is just a projection of the model, the controller is completely separated from the\nview and unaware of it. This makes testing a snap because it is easy to test your controller in\nisolation without the view and the related DOM/browser dependency.\n\n\n## Related Topics\n\n* {@link scope AngularJS Scopes}\n* {@link templates AngularJS Templates}\n" }, { "path": "docs/content/guide/decorators.ngdoc", "content": "@ngdoc overview\n@name Decorators\n@sortOrder 345\n@description\n\n# Decorators in AngularJS\n\n
    \n **NOTE:** This guide is targeted towards developers who are already familiar with AngularJS basics.\n If you're just getting started, we recommend the {@link tutorial/ tutorial} first.\n
    \n\n## What are decorators?\n\nDecorators are a design pattern that is used to separate modification or *decoration* of a class without modifying the\noriginal source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified\nprior to its usage.\n\n## How to use decorators\n\nThere are two ways to register decorators\n\n- `$provide.decorator`, and\n- `module.decorator`\n\nEach provide access to a `$delegate`, which is the instantiated service/directive/filter, prior to being passed to the\nservice that required it.\n\n### $provide.decorator\n\nThe {@link api/auto/service/$provide#decorator decorator function} allows access to a $delegate of the service once it\nhas been instantiated. For example:\n\n```js\nangular.module('myApp', [])\n\n.config([ '$provide', function($provide) {\n\n $provide.decorator('$log', [\n '$delegate',\n function $logDecorator($delegate) {\n\n var originalWarn = $delegate.warn;\n $delegate.warn = function decoratedWarn(msg) {\n msg = 'Decorated Warn: ' + msg;\n originalWarn.apply($delegate, arguments);\n };\n\n return $delegate;\n }\n ]);\n}]);\n```\n\nAfter the `$log` service has been instantiated the decorator is fired. The decorator function has a `$delegate` object\ninjected to provide access to the service that matches the selector in the decorator. This `$delegate` will be the\nservice you are decorating. The return value of the function *provided to the decorator* will take place of the service,\ndirective, or filter being decorated.\n\n
    \n\nThe `$delegate` may be either modified or completely replaced. Given a service `myService` with a method `someFn`, the\nfollowing could all be viable solutions:\n\n\n#### Completely Replace the $delegate\n```js\nangular.module('myApp', [])\n\n.config([ '$provide', function($provide) {\n\n $provide.decorator('myService', [\n '$delegate',\n function myServiceDecorator($delegate) {\n\n var myDecoratedService = {\n // new service object to replace myService\n };\n return myDecoratedService;\n }\n ]);\n}]);\n```\n\n#### Patch the $delegate\n```js\nangular.module('myApp', [])\n\n.config([ '$provide', function($provide) {\n\n $provide.decorator('myService', [\n '$delegate',\n function myServiceDecorator($delegate) {\n\n var someFn = $delegate.someFn;\n\n function aNewFn() {\n // new service function\n someFn.apply($delegate, arguments);\n }\n\n $delegate.someFn = aNewFn;\n return $delegate;\n }\n ]);\n}]);\n```\n\n#### Augment the $delegate\n```js\nangular.module('myApp', [])\n\n.config([ '$provide', function($provide) {\n\n $provide.decorator('myService', [\n '$delegate',\n function myServiceDecorator($delegate) {\n\n function helperFn() {\n // an additional fn to add to the service\n }\n\n $delegate.aHelpfulAddition = helperFn;\n return $delegate;\n }\n ]);\n}]);\n```\n\n
    \n Note that whatever is returned by the decorator function will replace that which is being decorated. For example, a\n missing return statement will wipe out the entire object being decorated.\n
    \n\n
    \n\nDecorators have different rules for different services. This is because services are registered in different ways.\nServices are selected by name, however filters and directives are selected by appending `\"Filter\"` or `\"Directive\"` to\nthe end of the name. The `$delegate` provided is dictated by the type of service.\n\n| Service Type | Selector | $delegate |\n|--------------|-------------------------------|-----------------------------------------------------------------------|\n| Service | `serviceName` | The `object` or `function` returned by the service |\n| Directive | `directiveName + 'Directive'` | An `Array.`{@link guide/decorators#drtvArray 1} |\n| Filter | `filterName + 'Filter'` | The `function` returned by the filter |\n\n1. Multiple directives may be registered to the same selector/name\n\n
    \n **NOTE:** Developers should take care in how and why they are modifying the `$delegate` for the service. Not only\n should expectations for the consumer be kept, but some functionality (such as directive registration) does not take\n place after decoration, but during creation/registration of the original service. This means, for example, that\n an action such as pushing a directive object to a directive `$delegate` will likely result in unexpected behavior.\n\n Furthermore, great care should be taken when decorating core services, directives, or filters as this may unexpectedly\n or adversely affect the functionality of the framework.\n
    \n\n### module.decorator\n\nThis {@link api/ng/type/angular.Module#decorator function} is the same as the `$provide.decorator` function except it is\nexposed through the module API. This allows you to separate your decorator patterns from your module config blocks.\n\nLike with `$provide.decorator`, the `module.decorator` function runs during the config phase of the app. That means\nyou can define a `module.decorator` before the decorated service is defined.\n\nSince you can apply multiple decorators, it is noteworthy that decorator application always follows order\nof declaration:\n\n- If a service is decorated by both `$provide.decorator` and `module.decorator`, the decorators are applied in order:\n\n```js\nangular\n .module('theApp', [])\n .factory('theFactory', theFactoryFn)\n .config(function($provide) {\n $provide.decorator('theFactory', provideDecoratorFn); // runs first\n })\n .decorator('theFactory', moduleDecoratorFn); // runs seconds\n```\n\n- If the service has been declared multiple times, a decorator will decorate the service that has been declared\nlast:\n\n```js\nangular\n .module('theApp', [])\n .factory('theFactory', theFactoryFn)\n .decorator('theFactory', moduleDecoratorFn)\n .factory('theFactory', theOtherFactoryFn);\n\n// `theOtherFactoryFn` is selected as 'theFactory' provider and it is decorated via `moduleDecoratorFn`.\n```\n\n## Example Applications\n\nThe following sections provide examples each of a service decorator, a directive decorator, and a filter decorator.\n\n### Service Decorator Example\n\nThis example shows how we can replace the $log service with our own to display log messages.\n\n\n \n angular.module('myServiceDecorator', []).\n\n controller('Ctrl', [\n '$scope',\n '$log',\n '$timeout',\n function($scope, $log, $timeout) {\n var types = ['error', 'warn', 'log', 'info' ,'debug'], i;\n\n for (i = 0; i < types.length; i++) {\n $log[types[i]](types[i] + ': message ' + (i + 1));\n }\n\n $timeout(function() {\n $log.info('info: message logged in timeout');\n });\n }\n ]).\n\n directive('myLog', [\n '$log',\n function($log) {\n return {\n restrict: 'E',\n template: '
    • {{l.message}}
    ',\n scope: {},\n compile: function() {\n return function(scope) {\n scope.myLog = $log.stack;\n };\n }\n };\n }\n ]).\n\n config([\n '$provide',\n function($provide) {\n\n $provide.decorator('$log', [\n '$delegate',\n function logDecorator($delegate) {\n\n var myLog = {\n warn: function(msg) {\n log(msg, 'warn');\n },\n error: function(msg) {\n log(msg, 'error');\n },\n info: function(msg) {\n log(msg, 'info');\n },\n debug: function(msg) {\n log(msg, 'debug');\n },\n log: function(msg) {\n log(msg, 'log');\n },\n stack: []\n };\n\n function log(msg, type) {\n myLog.stack.push({ type: type, message: msg.toString() });\n if (console && console[type]) console[type](msg);\n }\n\n return myLog;\n\n }\n ]);\n\n }\n ]);\n     \n\n \n
    \n

    Logs

    \n \n
    \n     \n\n \n li.warn { color: yellow; }\n li.error { color: red; }\n li.info { color: blue }\n li.log { color: black }\n li.debug { color: green }\n \n\n \n it('should display log messages in dom', function() {\n element.all(by.repeater('l in myLog')).count().then(function(count) {\n expect(count).toEqual(6);\n });\n });\n \n    \n\n### Directive Decorator Example\n\nFailed interpolated expressions in `ng-href` attributes can easily go unnoticed. We can decorate `ngHref` to warn us of\nthose conditions.\n\n\n \n angular.module('urlDecorator', []).\n\n controller('Ctrl', ['$scope', function($scope) {\n $scope.id = 3;\n $scope.warnCount = 0; // for testing\n }]).\n\n config(['$provide', function($provide) {\n\n // matchExpressions looks for interpolation markup in the directive attribute, extracts the expressions\n // from that markup (if they exist) and returns an array of those expressions\n function matchExpressions(str) {\n var exps = str.match(/{{([^}]+)}}/g);\n\n // if there isn't any, get out of here\n if (exps === null) return;\n\n exps = exps.map(function(exp) {\n var prop = exp.match(/[^{}]+/);\n return prop === null ? null : prop[0];\n });\n\n return exps;\n }\n\n // remember: directives must be selected by appending 'Directive' to the directive selector\n $provide.decorator('ngHrefDirective', [\n '$delegate',\n '$log',\n '$parse',\n function($delegate, $log, $parse) {\n\n // store the original link fn\n var originalLinkFn = $delegate[0].link;\n\n // replace the compile fn\n $delegate[0].compile = function(tElem, tAttr) {\n\n // store the original exp in the directive attribute for our warning message\n var originalExp = tAttr.ngHref;\n\n // get the interpolated expressions\n var exps = matchExpressions(originalExp);\n\n // create and store the getters using $parse\n var getters = exps.map(function(exp) {\n return exp && $parse(exp);\n });\n\n return function newLinkFn(scope, elem, attr) {\n // fire the originalLinkFn\n originalLinkFn.apply($delegate[0], arguments);\n\n // observe the directive attr and check the expressions\n attr.$observe('ngHref', function(val) {\n\n // if we have getters and getters is an array...\n if (getters && angular.isArray(getters)) {\n\n // loop through the getters and process them\n angular.forEach(getters, function(g, idx) {\n\n // if val is truthy, then the warning won't log\n var val = angular.isFunction(g) ? g(scope) : true;\n if (!val) {\n $log.warn('NgHref Warning: \"' + exps[idx] + '\" in the expression \"' + originalExp +\n '\" is falsy!');\n\n scope.warnCount++; // for testing\n }\n\n });\n\n }\n\n });\n\n };\n\n };\n\n // get rid of the old link function since we return a link function in compile\n delete $delegate[0].link;\n\n // return the $delegate\n return $delegate;\n\n }\n\n ]);\n\n }]);\n \n\n \n
    \n View Product {{ id }}\n - id === 3, so no warning
    \n View Product {{ id + 5 }}\n - id + 5 === 8, so no warning
    \n View Product {{ someOtherId }}\n - someOtherId === undefined, so warn
    \n View Product {{ someOtherId + 5 }}\n - someOtherId + 5 === 5, so no warning
    \n
    Warn Count: {{ warnCount }}
    \n
    \n     \n\n \n it('should warn when an expression in the interpolated value is falsy', function() {\n var id3 = element(by.id('id3'));\n var id8 = element(by.id('id8'));\n var someOther = element(by.id('someOtherId'));\n var someOther5 = element(by.id('someOtherId5'));\n\n expect(id3.getText()).toEqual('View Product 3');\n expect(id3.getAttribute('href')).toContain('/products/3/view');\n\n expect(id8.getText()).toEqual('View Product 8');\n expect(id8.getAttribute('href')).toContain('/products/8/view');\n\n expect(someOther.getText()).toEqual('View Product');\n expect(someOther.getAttribute('href')).toContain('/products//view');\n\n expect(someOther5.getText()).toEqual('View Product 5');\n expect(someOther5.getAttribute('href')).toContain('/products/5/view');\n\n expect(element(by.binding('warnCount')).getText()).toEqual('Warn Count: 1');\n });\n \n    \n\n### Filter Decorator Example\n\nLet's say we have created an app that uses the default format for many of our `Date` filters. Suddenly requirements have\nchanged (that never happens) and we need all of our default dates to be `'shortDate'` instead of `'mediumDate'`.\n\n\n \n angular.module('filterDecorator', []).\n\n controller('Ctrl', ['$scope', function($scope) {\n $scope.genesis = new Date(2010, 0, 5);\n $scope.ngConf = new Date(2016, 4, 4);\n }]).\n\n config(['$provide', function($provide) {\n\n $provide.decorator('dateFilter', [\n '$delegate',\n function dateDecorator($delegate) {\n\n // store the original filter\n var originalFilter = $delegate;\n\n // return our filter\n return shortDateDefault;\n\n // shortDateDefault sets the format to shortDate if it is falsy\n function shortDateDefault(date, format, timezone) {\n if (!format) format = 'shortDate';\n\n // return the result of the original filter\n return originalFilter(date, format, timezone);\n }\n\n }\n\n ]);\n\n }]);\n \n\n \n
    \n
    Initial Commit default to short date: {{ genesis | date }}
    \n
    ng-conf 2016 default short date: {{ ngConf | date }}
    \n
    ng-conf 2016 with full date format: {{ ngConf | date:'fullDate' }}
    \n
    \n     \n\n \n it('should default date filter to short date format', function() {\n expect(element(by.id('genesis')).getText())\n .toMatch(/Initial Commit default to short date: \\d{1,2}\\/\\d{1,2}\\/\\d{2}/);\n });\n\n it('should still allow dates to be formatted', function() {\n expect(element(by.id('ngConf')).getText())\n .toMatch(/ng-conf 2016 with full date format: [A-Za-z]+, [A-Za-z]+ \\d{1,2}, \\d{4}/);\n });\n \n    \n" }, { "path": "docs/content/guide/di.ngdoc", "content": "@ngdoc overview\n@name Dependency Injection\n@sortOrder 250\n@description\n\n# Dependency Injection\n\nDependency Injection (DI) is a software design pattern that deals with how components get hold of\ntheir dependencies.\n\nThe AngularJS injector subsystem is in charge of creating components, resolving their dependencies,\nand providing them to other components as requested.\n\n\n## Using Dependency Injection\n\nDependency Injection is pervasive throughout AngularJS. You can use it when defining components\nor when providing `run` and `config` blocks for a module.\n\n- {@link angular.Module#service Services}, {@link angular.Module#directive directives},\n{@link angular.Module#filter filters}, and {@link angular.Module#animation animations} are\ndefined by an injectable factory method or constructor function, and can be injected with\n\"services\", \"values\", and \"constants\" as dependencies.\n\n- {@link ng.$controller Controllers} are defined by a constructor function, which can be injected\nwith any of the \"service\" and \"value\" as dependencies, but they can also be provided with\n\"special dependencies\". See {@link di#controllers Controllers} below for a list of these\nspecial dependencies.\n\n- The {@link angular.Module#run `run`} method accepts a function, which can be injected with\n\"services\", \"values\" and, \"constants\" as dependencies. Note that you cannot inject \"providers\"\ninto `run` blocks.\n\n- The {@link angular.Module#config `config`} method accepts a function, which can be injected with\n\"providers\" and \"constants\" as dependencies. Note that you cannot inject \"services\" or\n\"values\" into configuration.\n\n- The {@link angular.Module#provider `provider`} method can only be injected with other \"providers\".\nHowever, only those that have been **registered beforehand** can be injected. This is different\nfrom services, where the order of registration does not matter.\n\nSee {@link module#module-loading Modules} for more details about `run` and `config`\nblocks and {@link guide/providers Providers} for more information about the different provider\ntypes.\n\n\n### Factory Methods\n\nThe way you define a directive, service, or filter is with a factory function.\nThe factory methods are registered with modules. The recommended way of declaring factories is:\n\n```js\nangular.module('myModule', [])\n .factory('serviceId', ['depService', function(depService) {\n // ...\n }])\n .directive('directiveName', ['depService', function(depService) {\n // ...\n }])\n .filter('filterName', ['depService', function(depService) {\n // ...\n }]);\n```\n\n### Module Methods\n\nWe can specify functions to run at configuration and run time for a module by calling the `config`\nand `run` methods. These functions are injectable with dependencies just like the factory functions\nabove.\n\n```js\nangular.module('myModule', [])\n .config(['depProvider', function(depProvider) {\n // ...\n }])\n .run(['depService', function(depService) {\n // ...\n }]);\n```\n\n### Controllers\n\nControllers are \"classes\" or \"constructor functions\" that are responsible for providing the\napplication behavior that supports the declarative markup in the template. The recommended way of\ndeclaring Controllers is using the array notation:\n\n```js\nsomeModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {\n ...\n $scope.aMethod = function() {\n ...\n }\n ...\n}]);\n```\n\nUnlike services, there can be many instances of the same type of controller in an application.\n\nMoreover, additional dependencies are made available to Controllers:\n\n* {@link scope `$scope`}: Controllers are associated with an element in the DOM and so are\n provided with access to the {@link scope scope}. Other components (like services) only have\n access to the {@link $rootScope `$rootScope`} service.\n* {@link ngRoute.$routeProvider#when resolves}: If a controller is instantiated as part of a route,\n then any values that are resolved as part of the route are made available for injection into the\n controller.\n\n\n## Dependency Annotation\n\nAngularJS invokes certain functions (like service factories and controllers) via the injector.\nYou need to annotate these functions so that the injector knows what services to inject into\nthe function. There are three ways of annotating your code with service name information:\n\n- Using the inline array annotation (preferred)\n- Using the `$inject` property annotation\n- Implicitly from the function parameter names (has caveats)\n\n### Inline Array Annotation\n\nThis is the preferred way to annotate application components. This is how the examples in the\ndocumentation are written.\n\nFor example:\n\n```js\nsomeModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {\n // ...\n}]);\n```\n\nHere we pass an array whose elements consist of a list of strings (the names of the dependencies)\nfollowed by the function itself.\n\nWhen using this type of annotation, take care to keep the annotation array in sync with the\nparameters in the function declaration.\n\n### `$inject` Property Annotation\n\nTo allow the minifiers to rename the function parameters and still be able to inject the right services,\nthe function needs to be annotated with the `$inject` property. The `$inject` property is an array\nof service names to inject.\n\n```js\nvar MyController = function($scope, greeter) {\n // ...\n}\nMyController.$inject = ['$scope', 'greeter'];\nsomeModule.controller('MyController', MyController);\n```\n\nIn this scenario the ordering of the values in the `$inject` array must match the ordering of the\nparameters in `MyController`.\n\nJust like with the array annotation, you'll need to take care to keep the `$inject` in sync with\nthe parameters in the function declaration.\n\n### Implicit Annotation\n\n
    \n**Careful:** If you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming))\nyour code, your service names will get renamed and break your app.\n
    \n\nThe simplest way to get hold of the dependencies is to assume that the function parameter names\nare the names of the dependencies.\n\n```js\nsomeModule.controller('MyController', function($scope, greeter) {\n // ...\n});\n```\n\nGiven a function, the injector can infer the names of the services to inject by examining the\nfunction declaration and extracting the parameter names. In the above example, `$scope` and\n`greeter` are two services which need to be injected into the function.\n\nOne advantage of this approach is that there's no array of names to keep in sync with the\nfunction parameters. You can also freely reorder dependencies.\n\nHowever this method will not work with JavaScript minifiers/obfuscators because of how they\nrename parameters.\n\nTools like [ng-annotate](https://github.com/olov/ng-annotate) let you use implicit dependency\nannotations in your app and automatically add inline array annotations prior to minifying.\nIf you decide to take this approach, you probably want to use `ng-strict-di`.\n\nBecause of these caveats, we recommend avoiding this style of annotation.\n\n\n## Using Strict Dependency Injection\n\nYou can add an `ng-strict-di` directive on the same element as `ng-app` to opt into strict DI mode:\n\n```html\n\n\n\n I can add: {{ 1 + 2 }}.\n \n\n\n```\n\nStrict mode throws an error whenever a service tries to use implicit annotations.\n\nConsider this module, which includes a `willBreak` service that uses implicit DI:\n\n```js\nangular.module('myApp', [])\n .factory('willBreak', function($rootScope) {\n // $rootScope is implicitly injected\n })\n .run(['willBreak', function(willBreak) {\n // AngularJS will throw when this runs\n }]);\n```\n\nWhen the `willBreak` service is instantiated, AngularJS will throw an error because of strict mode.\nThis is useful when using a tool like [ng-annotate](https://github.com/olov/ng-annotate) to\nensure that all of your application components have annotations.\n\nIf you're using manual bootstrapping, you can also use strict DI by providing `strictDi: true` in\nthe optional config argument:\n\n```js\nangular.bootstrap(document, ['myApp'], {\n strictDi: true\n});\n```\n\n\n\n## Why Dependency Injection?\n\nThis section motivates and explains AngularJS's use of DI. For how to use DI, see above.\n\nFor in-depth discussion about DI, see\n[Dependency Injection](http://en.wikipedia.org/wiki/Dependency_injection) at Wikipedia,\n[Inversion of Control](http://martinfowler.com/articles/injection.html) by Martin Fowler,\nor read about DI in your favorite software design pattern book.\n\nThere are only three ways a component (object or function) can get a hold of its dependencies:\n\n 1. The component can create the dependency, typically using the `new` operator.\n 2. The component can look up the dependency, by referring to a global variable.\n 3. The component can have the dependency passed to it where it is needed.\n\nThe first two options of creating or looking up dependencies are not optimal because they hard\ncode the dependency to the component. This makes it difficult, if not impossible, to modify the\ndependencies. This is especially problematic in tests, where it is often desirable to provide mock\ndependencies for test isolation.\n\nThe third option is the most viable, since it removes the responsibility of locating the\ndependency from the component. The dependency is simply handed to the component.\n\n```js\nfunction SomeClass(greeter) {\n this.greeter = greeter;\n}\n\nSomeClass.prototype.doSomething = function(name) {\n this.greeter.greet(name);\n}\n```\n\nIn the above example `SomeClass` is not concerned with creating or locating the `greeter`\ndependency, it is simply handed the `greeter` when it is instantiated.\n\nThis is desirable, but it puts the responsibility of getting hold of the dependency on the\ncode that constructs `SomeClass`.\n\n\n\nTo manage the responsibility of dependency creation, each AngularJS application has an {@link\nangular.injector injector}. The injector is a\n[service locator](http://en.wikipedia.org/wiki/Service_locator_pattern) that is responsible for\nconstruction and lookup of dependencies.\n\nHere is an example of using the injector service:\n\nFirst create an AngularJS module that will hold the service definition. (The empty array passed as\nthe second parameter means that this module does not depend on any other modules.)\n\n```js\n// Create a module to hold the service definition\nvar myModule = angular.module('myModule', []);\n```\n\nTeach the injector how to build a `greeter` service, which is just an object that contains a `greet`\nmethod. Notice that `greeter` is dependent on the `$window` service, which will be provided\n(injected into `greeter`) by the injector.\n\n```js\n// Define the `greeter` service\nmyModule.factory('greeter', function($window) {\n return {\n greet: function(text) {\n $window.alert(text);\n }\n };\n});\n```\n\nCreate a new injector that can provide components defined in our `myModule` module and request our\n`greeter` service from the injector. (This is usually done automatically by AngularJS bootstrap).\n\n```js\nvar injector = angular.injector(['ng', 'myModule']);\nvar greeter = injector.get('greeter');\n```\n\nAsking for dependencies solves the issue of hard coding, but it also means that the injector needs\nto be passed throughout the application. Passing the injector breaks the\n[Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter). To remedy this, we use a declarative\nnotation in our HTML templates, to hand the responsibility of creating components over to the\ninjector, as in this example:\n\n```html\n
    \n \n
    \n```\n\n```js\nfunction MyController($scope, greeter) {\n $scope.sayHello = function() {\n greeter.greet('Hello World');\n };\n}\n```\n\nWhen AngularJS compiles the HTML, it processes the `ng-controller` directive, which in turn\nasks the injector to create an instance of the controller and its dependencies.\n\n```js\ninjector.instantiate(MyController);\n```\n\nThis is all done behind the scenes. Notice that by having the `ng-controller` ask the injector to\ninstantiate the class, it can satisfy all of the dependencies of `MyController` without the\ncontroller ever knowing about the injector.\n\nThis is the best outcome. The application code simply declares the dependencies it needs, without\nhaving to deal with the injector. This setup does not break the Law of Demeter.\n\n
    \n**Note:** AngularJS uses\n[**constructor injection**](http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/).\n
    \n" }, { "path": "docs/content/guide/directive.ngdoc", "content": "@ngdoc overview\n@name Directives\n@sortOrder 300\n@description\n\n# Creating Custom Directives\n\n
    \n**Note:** this guide is targeted towards developers who are already familiar with AngularJS basics.\nIf you're just getting started, we recommend the {@link tutorial/ tutorial} first.\nIf you're looking for the **directives API**, you can find it in the\n{@link ng.$compile `$compile` API docs}.\n
    \n\n\nThis document explains when you'd want to create your own directives in your AngularJS app, and\nhow to implement them.\n\n\n## What are Directives?\n\nAt a high level, directives are markers on a DOM element (such as an attribute, element\nname, comment or CSS class) that tell AngularJS's **HTML compiler** ({@link ng.$compile `$compile`})\nto attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform\nthe DOM element and its children.\n\nAngularJS comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngClass`.\nMuch like you create controllers and services, you can create your own directives for AngularJS to use.\nWhen AngularJS {@link guide/bootstrap bootstraps} your application, the\n{@link guide/compiler HTML compiler} traverses the DOM matching directives against the DOM elements.\n\n
    \n**What does it mean to \"compile\" an HTML template?**\n\nFor AngularJS, \"compilation\" means attaching directives to the HTML to make it interactive.\nThe reason we use the term \"compile\" is that the recursive process of attaching directives\nmirrors the process of compiling source code in\n[compiled programming languages](http://en.wikipedia.org/wiki/Compiled_languages).\n
    \n\n\n## Matching Directives\n\nBefore we can write a directive, we need to know how AngularJS's {@link guide/compiler HTML compiler}\ndetermines when to use a given directive.\n\nSimilar to the terminology used when an [element **matches** a selector](https://developer.mozilla.org/en-US/docs/Web/API/Element.matches), we say an element **matches** a\ndirective when the directive is part of its declaration.\n\nIn the following example, we say that the `` element **matches** the `ngModel` directive\n\n```html\n\n```\n\nThe following `` element also **matches** `ngModel`:\n\n```html\n\n```\n\nAnd the following `` element **matches** the `person` directive:\n\n```html\n{{name}}\n```\n\n### Normalization\n\nAngularJS **normalizes** an element's tag and attribute name to determine which elements match which\ndirectives. We typically refer to directives by their case-sensitive\n[camelCase](http://en.wikipedia.org/wiki/CamelCase) **normalized** name (e.g. `ngModel`).\nHowever, since HTML is case-insensitive, we refer to directives in the DOM by lower-case\nforms, typically using [dash-delimited](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles)\nattributes on DOM elements (e.g. `ng-model`).\n\nThe **normalization** process is as follows:\n\n1. Strip `x-` and `data-` from the front of the element/attributes.\n2. Convert the `:`, `-`, or `_`-delimited name to `camelCase`.\n\nFor example, the following forms are all equivalent and match the {@link ngBind} directive:\n\n\n \n
    \n Hello
    \n
    \n
    \n
    \n
    \n
    \n
    \n     \n \n angular.module('docsBindExample', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';\n }]);\n \n \n it('should show off bindings', function() {\n var containerElm = element(by.css('div[ng-controller=\"Controller\"]'));\n var nameBindings = containerElm.all(by.binding('name'));\n\n expect(nameBindings.count()).toBe(5);\n nameBindings.each(function(elem) {\n expect(elem.getText()).toEqual('Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)');\n });\n });\n \n    \n\n
    \n**Best Practice:** Prefer using the dash-delimited format (e.g. `ng-bind` for `ngBind`).\nIf you want to use an HTML validating tool, you can instead use the `data`-prefixed version (e.g.\n`data-ng-bind` for `ngBind`).\nThe other forms shown above are accepted for legacy reasons but we advise you to avoid them.\n
    \n\n### Directive types\n\n`$compile` can match directives based on element names (E), attributes (A), class names (C),\nand comments (M).\n\nThe built-in AngularJS directives show in their documentation page which type of matching they support.\n\nThe following demonstrates the various ways a directive (`myDir` in this case) that matches all\n4 types can be referenced from within a template.\n\n```html\n\n\n\n\n```\n\nA directive can specify which of the 4 matching types it supports in the\n{@link ng.$compile#-restrict- `restrict`} property of the directive definition object.\nThe default is `EA`.\n\n
    \n**Best Practice:** Prefer using directives via tag name and attributes over comment and class names.\nDoing so generally makes it easier to determine what directives a given element matches.\n
    \n\n
    \n**Best Practice:** Comment directives were commonly used in places where the DOM API limits the\nability to create directives that spanned multiple elements (e.g. inside `` elements).\nAngularJS 1.2 introduces {@link ng.directive:ngRepeat `ng-repeat-start` and `ng-repeat-end`}\nas a better solution to this problem. Developers are encouraged to use this over custom comment\ndirectives when possible.\n\n\n\n## Creating Directives\n\nFirst let's talk about the {@link ng.$compileProvider#directive API for registering directives}. Much like\ncontrollers, directives are registered on modules. To register a directive, you use the\n`module.directive` API. `module.directive` takes the\n{@link guide/directive#matching-directives normalized} directive name\nfollowed by a **factory function.** This factory function should return an object with the different\noptions to tell `$compile` how the directive should behave when matched.\n\n\nThe factory function is invoked only once when the\n{@link ng.$compile compiler} matches the directive for the first time. You can perform any\ninitialization work here. The function is invoked using\n{@link auto.$injector#invoke $injector.invoke} which makes it injectable just like a\ncontroller.\n\n\nWe'll go over a few common examples of directives, then dive deep into the different options\nand compilation process.\n\n
    \n**Best Practice:** In order to avoid collisions with some future standard, it's best to prefix your own\ndirective names. For instance, if you created a `` directive, it would be problematic if HTML7\nintroduced the same element. A two or three letter prefix (e.g. `btfCarousel`) works well. Similarly, do\nnot prefix your own directives with `ng` or they might conflict with directives included in a future\nversion of AngularJS.\n
    \n\nFor the following examples, we'll use the prefix `my` (e.g. `myCustomer`).\n\n\n### Template-expanding directive\n\nLet's say you have a chunk of your template that represents a customer's information. This template\nis repeated many times in your code. When you change it in one place, you have to change it in\nseveral others. This is a good opportunity to use a directive to simplify your template.\n\nLet's create a directive that simply replaces its contents with a static template:\n\n\n \n angular.module('docsSimpleDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.customer = {\n name: 'Naomi',\n address: '1600 Amphitheatre'\n };\n }])\n .directive('myCustomer', function() {\n return {\n template: 'Name: {{customer.name}} Address: {{customer.address}}'\n };\n });\n \n \n
    \n
    \n
    \n     \n    \n\nNotice that we have bindings in this directive. After `$compile` compiles and links\n`
    `, it will try to match directives on the element's children. This means you\ncan compose directives of other directives. We'll see how to do that in\n{@link guide/directive#creating-directives-that-communicate an example}\nbelow.\n\nIn the example above we in-lined the value of the `template` option, but this will become annoying\nas the size of your template grows.\n\n
    \n**Best Practice:** Unless your template is very small, it's typically better to break it apart into\nits own HTML file and load it with the `templateUrl` option.\n
    \n\nIf you are familiar with `ngInclude`, `templateUrl` works just like it. Here's the same example\nusing `templateUrl` instead:\n\n\n \n angular.module('docsTemplateUrlDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.customer = {\n name: 'Naomi',\n address: '1600 Amphitheatre'\n };\n }])\n .directive('myCustomer', function() {\n return {\n templateUrl: 'my-customer.html'\n };\n });\n \n \n
    \n
    \n
    \n     \n \n Name: {{customer.name}} Address: {{customer.address}}\n \n    \n\n`templateUrl` can also be a function which returns the URL of an HTML template to be loaded and\nused for the directive. AngularJS will call the `templateUrl` function with two parameters: the\nelement that the directive was called on, and an `attr` object associated with that element.\n\n
    \n**Note:** You do not currently have the ability to access scope variables from the `templateUrl`\nfunction, since the template is requested before the scope is initialized.\n
    \n\n\n \n angular.module('docsTemplateUrlDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.customer = {\n name: 'Naomi',\n address: '1600 Amphitheatre'\n };\n }])\n .directive('myCustomer', function() {\n return {\n templateUrl: function(elem, attr) {\n return 'customer-' + attr.type + '.html';\n }\n };\n });\n \n \n
    \n
    \n
    \n
    \n     \n \n Name: {{customer.name}}\n \n \n Address: {{customer.address}}\n \n    \n\n
    \n**Note:** When you create a directive, it is restricted to attribute and elements only by default. In order to\ncreate directives that are triggered by class name, you need to use the `restrict` option.\n
    \n\nThe `restrict` option is typically set to:\n\n* `'A'` - only matches attribute name\n* `'E'` - only matches element name\n* `'C'` - only matches class name\n* `'M'` - only matches comment\n\nThese restrictions can all be combined as needed:\n\n* `'AEC'` - matches either attribute or element or class name\n\nLet's change our directive to use `restrict: 'E'`:\n\n\n \n angular.module('docsRestrictDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.customer = {\n name: 'Naomi',\n address: '1600 Amphitheatre'\n };\n }])\n .directive('myCustomer', function() {\n return {\n restrict: 'E',\n templateUrl: 'my-customer.html'\n };\n });\n \n\n \n
    \n \n
    \n     \n\n \n Name: {{customer.name}} Address: {{customer.address}}\n \n    \n\nFor more on the `restrict` property, see the\n{@link ng.$compile#directive-definition-object API docs}.\n\n
    \n**When should I use an attribute versus an element?**\n\nUse an element when you are creating a component that is in control of the template. The common case\nfor this is when you are creating a Domain-Specific Language for parts of your template.\n\nUse an attribute when you are decorating an existing element with new functionality.\n
    \n\nUsing an element for the `myCustomer` directive is clearly the right choice because you're not\ndecorating an element with some \"customer\" behavior; you're defining the core behavior of the\nelement as a customer component.\n\n\n\n### Isolating the Scope of a Directive\n\nOur `myCustomer` directive above is great, but it has a fatal flaw. We can only use it once within a\ngiven scope.\n\nIn its current implementation, we'd need to create a different controller each time in order to\nre-use such a directive:\n\n\n \n angular.module('docsScopeProblemExample', [])\n .controller('NaomiController', ['$scope', function($scope) {\n $scope.customer = {\n name: 'Naomi',\n address: '1600 Amphitheatre'\n };\n }])\n .controller('IgorController', ['$scope', function($scope) {\n $scope.customer = {\n name: 'Igor',\n address: '123 Somewhere'\n };\n }])\n .directive('myCustomer', function() {\n return {\n restrict: 'E',\n templateUrl: 'my-customer.html'\n };\n });\n \n \n
    \n \n
    \n
    \n
    \n \n
    \n     \n \n Name: {{customer.name}} Address: {{customer.address}}\n \n    \n\nThis is clearly not a great solution.\n\nWhat we want to be able to do is separate the scope inside a directive from the scope\noutside, and then map the outer scope to a directive's inner scope. We can do this by creating what\nwe call an **isolate scope**. To do this, we can use a {@link $compile#-scope- directive's `scope`} option:\n\n\n \n angular.module('docsIsolateScopeDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };\n $scope.igor = { name: 'Igor', address: '123 Somewhere' };\n }])\n .directive('myCustomer', function() {\n return {\n restrict: 'E',\n scope: {\n customerInfo: '=info'\n },\n templateUrl: 'my-customer-iso.html'\n };\n });\n \n \n
    \n \n
    \n \n
    \n     \n \n Name: {{customerInfo.name}} Address: {{customerInfo.address}}\n \n    \n\nLooking at `index.html`, the first `` element binds the `info` attribute to `naomi`,\nwhich we have exposed on our controller's scope. The second binds `info` to `igor`.\n\nLet's take a closer look at the scope option:\n\n```javascript\n//...\nscope: {\n customerInfo: '=info'\n},\n//...\n```\n\nThe **scope option** is an object that contains a property for each isolate scope binding. In this\ncase it has just one property:\n\n- Its name (`customerInfo`) corresponds to the directive's **isolate scope** property,\n `customerInfo`.\n- Its value (`=info`) tells `$compile` to bind to the `info` attribute.\n\n
    \n**Note:** These `=attr` attributes in the `scope` option of directives are normalized just like\ndirective names. To bind to the attribute in `
    `, you'd specify a binding\nof `=bindToThis`.\n
    \n\nFor cases where the attribute name is the same as the value you want to bind to inside the\ndirective's scope, you can use this shorthand syntax:\n\n```javascript\n...\nscope: {\n // same as '=customer'\n customer: '='\n},\n...\n```\n\nBesides making it possible to bind different data to the scope inside a directive, using an isolated\nscope has another effect.\n\nWe can show this by adding another property, `vojta`, to our scope and trying to access it from\nwithin our directive's template:\n\n\n \n angular.module('docsIsolationExample', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };\n $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };\n }])\n .directive('myCustomer', function() {\n return {\n restrict: 'E',\n scope: {\n customerInfo: '=info'\n },\n templateUrl: 'my-customer-plus-vojta.html'\n };\n });\n \n \n
    \n \n
    \n     \n \n Name: {{customerInfo.name}} Address: {{customerInfo.address}}\n
    \n Name: {{vojta.name}} Address: {{vojta.address}}\n     \n    \n\nNotice that `{{vojta.name}}` and `{{vojta.address}}` are empty, meaning they are undefined.\nAlthough we defined `vojta` in the controller, it's not available within the directive.\n\nAs the name suggests, the **isolate scope** of the directive isolates everything except models that\nyou've explicitly added to the `scope: {}` hash object. This is helpful when building reusable\ncomponents because it prevents a component from changing your model state except for the models\nthat you explicitly pass in.\n\n
    \n**Note:** Normally, a scope prototypically inherits from its parent. An isolated scope does not.\nSee the {@link $compile#directive-definition-object \"Directive Definition Object - scope\"} section\nfor more information about isolate scopes.\n
    \n\n
    \n**Best Practice:** Use the `scope` option to create isolate scopes when making components that you\nwant to reuse throughout your app.\n
    \n\n\n### Creating a Directive that Manipulates the DOM\n\nIn this example we will build a directive that displays the current time.\nOnce a second, it updates the DOM to reflect the current time.\n\nDirectives that want to modify the DOM typically use the `link` option to register DOM listeners\nas well as update the DOM. It is executed after the template has been cloned and is where\ndirective logic will be put.\n\n `link` takes a function with the following signature,\n`function link(scope, element, attrs, controller, transcludeFn) { ... }`, where:\n\n* `scope` is an AngularJS scope object.\n* `element` is the jqLite-wrapped element that this directive matches.\n* `attrs` is a hash object with key-value pairs of normalized attribute names and their\n corresponding attribute values.\n* `controller` is the directive's required controller instance(s) or its own controller (if any).\n The exact value depends on the directive's require property.\n* `transcludeFn` is a transclude linking function pre-bound to the correct transclusion scope.\n\n
    \nFor more details on the `link` option refer to the {@link ng.$compile#-link- `$compile` API} page.\n
    \n\nIn our `link` function, we want to update the displayed time once a second, or whenever a user\nchanges the time formatting string that our directive binds to. We will use the `$interval` service\nto call a handler on a regular basis. This is easier than using `$timeout` but also works better with\nend-to-end testing, where we want to ensure that all `$timeout`s have completed before completing the test.\nWe also want to remove the `$interval` if the directive is deleted so we don't introduce a memory leak.\n\n\n \n angular.module('docsTimeDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.format = 'M/d/yy h:mm:ss a';\n }])\n .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {\n\n function link(scope, element, attrs) {\n var format,\n timeoutId;\n\n function updateTime() {\n element.text(dateFilter(new Date(), format));\n }\n\n scope.$watch(attrs.myCurrentTime, function(value) {\n format = value;\n updateTime();\n });\n\n element.on('$destroy', function() {\n $interval.cancel(timeoutId);\n });\n\n // start the UI update process; save the timeoutId for canceling\n timeoutId = $interval(function() {\n updateTime(); // update DOM\n }, 1000);\n }\n\n return {\n link: link\n };\n }]);\n \n \n
    \n Date format:
    \n Current time is: \n
    \n     \n    \n\nThere are a couple of things to note here.\nJust like the `module.controller` API, the function argument in `module.directive` is dependency\ninjected. Because of this, we can use `$interval` and `dateFilter` inside our directive's `link`\nfunction.\n\nWe register an event `element.on('$destroy', ...)`. What fires this `$destroy` event?\n\nThere are a few special events that AngularJS emits. When a DOM node that has been compiled\nwith AngularJS's compiler is destroyed, it emits a `$destroy` event. Similarly, when an AngularJS\nscope is destroyed, it broadcasts a `$destroy` event to listening scopes.\n\nBy listening to this event, you can remove event listeners that might cause memory leaks.\nListeners registered to scopes and elements are automatically cleaned up when they are destroyed,\nbut if you registered a listener on a service, or registered a listener on a DOM node that isn't\nbeing deleted, you'll have to clean it up yourself or you risk introducing a memory leak.\n\n
    \n**Best Practice:** Directives should clean up after themselves. You can use\n`element.on('$destroy', ...)` or `scope.$on('$destroy', ...)` to run a clean-up function when the\ndirective is removed.\n
    \n\n\n### Creating a Directive that Wraps Other Elements\n\nWe've seen that you can pass in models to a directive using the isolate scope, but sometimes\nit's desirable to be able to pass in an entire template rather than a string or an object.\nLet's say that we want to create a \"dialog box\" component. The dialog box should be able to\nwrap any arbitrary content.\n\nTo do this, we need to use the `transclude` option.\n\n\n \n angular.module('docsTransclusionDirective', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.name = 'Tobias';\n }])\n .directive('myDialog', function() {\n return {\n restrict: 'E',\n transclude: true,\n scope: {},\n templateUrl: 'my-dialog.html'\n };\n });\n \n \n
    \n Check out the contents, {{name}}!\n
    \n     \n \n
    \n     \n    \n\nWhat does this `transclude` option do, exactly? `transclude` makes the contents of a directive with\nthis option have access to the scope **outside** of the directive rather than inside.\n\nTo illustrate this, see the example below. Notice that we've added a `link` function in `script.js`\nthat redefines `name` as `Jeff`. What do you think the `{{name}}` binding will resolve to now?\n\n\n \n angular.module('docsTransclusionExample', [])\n .controller('Controller', ['$scope', function($scope) {\n $scope.name = 'Tobias';\n }])\n .directive('myDialog', function() {\n return {\n restrict: 'E',\n transclude: true,\n scope: {},\n templateUrl: 'my-dialog.html',\n link: function(scope) {\n scope.name = 'Jeff';\n }\n };\n });\n \n \n
    \n Check out the contents, {{name}}!\n
    \n     \n \n
    \n     \n    \n\nOrdinarily, we would expect that `{{name}}` would be `Jeff`. However, we see in this example that\nthe `{{name}}` binding is still `Tobias`.\n\nThe `transclude` option changes the way scopes are nested. It makes it so that the **contents** of a\ntranscluded directive have whatever scope is outside the directive, rather than whatever scope is on\nthe inside. In doing so, it gives the contents access to the outside scope.\n\nNote that if the directive did not create its own scope, then `scope` in `scope.name = 'Jeff'` would\nreference the outside scope and we would see `Jeff` in the output.\n\nThis behavior makes sense for a directive that wraps some content, because otherwise you'd have to\npass in each model you wanted to use separately. If you have to pass in each model that you want to\nuse, then you can't really have arbitrary contents, can you?\n\n
    \n**Best Practice:** only use `transclude: true` when you want to create a directive that wraps\narbitrary content.\n
    \n\nNext, we want to add buttons to this dialog box, and allow someone using the directive to bind their\nown behavior to it.\n\n\n \n angular.module('docsIsoFnBindExample', [])\n .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {\n $scope.name = 'Tobias';\n $scope.message = '';\n $scope.hideDialog = function(message) {\n $scope.message = message;\n $scope.dialogIsHidden = true;\n $timeout(function() {\n $scope.message = '';\n $scope.dialogIsHidden = false;\n }, 2000);\n };\n }])\n .directive('myDialog', function() {\n return {\n restrict: 'E',\n transclude: true,\n scope: {\n 'close': '&onClose'\n },\n templateUrl: 'my-dialog-close.html'\n };\n });\n \n \n
    \n {{message}}\n \n Check out the contents, {{name}}!\n \n
    \n     \n \n
    \n ×\n
    \n
    \n     \n    \n\nWe want to run the function we pass by invoking it from the directive's scope, but have it run\nin the context of the scope where it's registered.\n\nWe saw earlier how to use `=attr` in the `scope` option, but in the above example, we're using\n`&attr` instead. The `&` binding allows a directive to trigger evaluation of an expression in\nthe context of the original scope, at a specific time. Any legal expression is allowed, including\nan expression which contains a function call. Because of this, `&` bindings are ideal for binding\ncallback functions to directive behaviors.\n\nWhen the user clicks the `x` in the dialog, the directive's `close` function is called, thanks to\n`ng-click.` This call to `close` on the isolated scope actually evaluates the expression\n`hideDialog(message)` in the context of the original scope, thus running `Controller`'s `hideDialog`\nfunction.\n\nOften it's desirable to pass data from the isolate scope via an expression to the\nparent scope, this can be done by passing a map of local variable names and values into the expression\nwrapper function. For example, the `hideDialog` function takes a message to display when the dialog\nis hidden. This is specified in the directive by calling `close({message: 'closing for now'})`.\nThen the local variable `message` will be available within the `on-close` expression.\n\n
    \n**Best Practice:** use `&attr` in the `scope` option when you want your directive\nto expose an API for binding to behaviors.\n
    \n\n\n### Creating a Directive that Adds Event Listeners\n\nPreviously, we used the `link` function to create a directive that manipulated its\nDOM elements. Building upon that example, let's make a directive that reacts to events on\nits elements.\n\nFor instance, what if we wanted to create a directive that lets a user drag an\nelement?\n\n\n \n angular.module('dragModule', [])\n .directive('myDraggable', ['$document', function($document) {\n return {\n link: function(scope, element, attr) {\n var startX = 0, startY = 0, x = 0, y = 0;\n\n element.css({\n position: 'relative',\n border: '1px solid red',\n backgroundColor: 'lightgrey',\n cursor: 'pointer'\n });\n\n element.on('mousedown', function(event) {\n // Prevent default dragging of selected content\n event.preventDefault();\n startX = event.pageX - x;\n startY = event.pageY - y;\n $document.on('mousemove', mousemove);\n $document.on('mouseup', mouseup);\n });\n\n function mousemove(event) {\n y = event.pageY - startY;\n x = event.pageX - startX;\n element.css({\n top: y + 'px',\n left: x + 'px'\n });\n }\n\n function mouseup() {\n $document.off('mousemove', mousemove);\n $document.off('mouseup', mouseup);\n }\n }\n };\n }]);\n \n \n Drag Me\n \n\n\n\n\n### Creating Directives that Communicate\n\nYou can compose any directives by using them within templates.\n\nSometimes, you want a component that's built from a combination of directives.\n\nImagine you want to have a container with tabs in which the contents of the container correspond\nto which tab is active.\n\n\n \n angular.module('docsTabsExample', [])\n .directive('myTabs', function() {\n return {\n restrict: 'E',\n transclude: true,\n scope: {},\n controller: ['$scope', function MyTabsController($scope) {\n var panes = $scope.panes = [];\n\n $scope.select = function(pane) {\n angular.forEach(panes, function(pane) {\n pane.selected = false;\n });\n pane.selected = true;\n };\n\n this.addPane = function(pane) {\n if (panes.length === 0) {\n $scope.select(pane);\n }\n panes.push(pane);\n };\n }],\n templateUrl: 'my-tabs.html'\n };\n })\n .directive('myPane', function() {\n return {\n require: '^^myTabs',\n restrict: 'E',\n transclude: true,\n scope: {\n title: '@'\n },\n link: function(scope, element, attrs, tabsCtrl) {\n tabsCtrl.addPane(scope);\n },\n templateUrl: 'my-pane.html'\n };\n });\n \n \n \n \n

    Lorem ipsum dolor sit amet

    \n     \n \n Mauris elementum elementum enim at suscipit.\n

    counter: {{i || 0}}

    \n     \n     \n     \n \n
    \n \n
    \n
    \n     \n \n
    \n

    {{title}}

    \n
    \n
    \n     \n    \n\nThe `myPane` directive has a `require` option with value `^^myTabs`. When a directive uses this\noption, `$compile` will throw an error unless the specified controller is found. The `^^` prefix\nmeans that this directive searches for the controller on its parents. (A `^` prefix would make the\ndirective look for the controller on its own element or its parents; without any prefix, the\ndirective would look on its own element only.)\n\nSo where does this `myTabs` controller come from? Directives can specify controllers using\nthe unsurprisingly named `controller` option. As you can see, the `myTabs` directive uses this\noption. Just like `ngController`, this option attaches a controller to the template of the directive.\n\nIf it is necessary to reference the controller or any functions bound to the controller from the\ntemplate, you can use the option `controllerAs` to specify the name of the controller as an alias.\nThe directive needs to define a scope for this configuration to be used. This is particularly useful\nin the case when the directive is used as a component.\n\nLooking back at `myPane`'s definition, notice the last argument in its `link` function: `tabsCtrl`.\nWhen a directive requires a controller, it receives that controller as the fourth argument of its\n`link` function. Taking advantage of this, `myPane` can call the `addPane` function of `myTabs`.\n\nIf multiple controllers are required, the `require` option of the directive can take an array argument.\nThe corresponding parameter being sent to the `link` function will also be an array.\n\n```js\nangular.module('docsTabsExample', [])\n .directive('myPane', function() {\n return {\n require: ['^^myTabs', 'ngModel'],\n restrict: 'E',\n transclude: true,\n scope: {\n title: '@'\n },\n link: function(scope, element, attrs, controllers) {\n var tabsCtrl = controllers[0],\n modelCtrl = controllers[1];\n\n tabsCtrl.addPane(scope);\n },\n templateUrl: 'my-pane.html'\n };\n });\n```\n\nSavvy readers may be wondering what the difference is between `link` and `controller`.\nThe basic difference is that `controller` can expose an API, and `link` functions can interact with\ncontrollers using `require`.\n\n
    \n**Best Practice:** use `controller` when you want to expose an API to other directives.\nOtherwise use `link`.\n
    \n\n## Summary\n\nHere we've seen the main use cases for directives. Each of these samples acts as a good starting\npoint for creating your own directives.\n\nYou might also be interested in an in-depth explanation of the compilation process that's\navailable in the {@link guide/compiler compiler guide}.\n\nThe {@link ng.$compile `$compile` API} page has a comprehensive list of directive options for\nreference.\n" }, { "path": "docs/content/guide/e2e-testing.ngdoc", "content": "@ngdoc overview\n@name E2E Testing\n@sortOrder 420\n@description\n\n# E2E Testing\n\nAs applications grow in size and complexity, it becomes unrealistic to rely on manual testing to\nverify the correctness of new features, catch bugs and notice regressions. Unit tests\nare the first line of defense for catching bugs, but sometimes issues come up with integration\nbetween components which can't be captured in a unit test. End-to-end tests are made to find\nthese problems.\n\nWe have built [Protractor](https://github.com/angular/protractor), an end\nto end test runner which simulates user interactions that will help you verify the health of your\nAngularJS application.\n\n## Using Protractor\n\nProtractor is a [Node.js](http://nodejs.org) program, and runs end-to-end tests that are also\nwritten in JavaScript and run with node. Protractor uses [WebDriver](https://code.google.com/p/selenium/wiki/GettingStarted)\nto control browsers and simulate user actions.\n\nFor more information on Protractor, view [getting started](http://angular.github.io/protractor/#/getting-started)\nor the [api docs](http://angular.github.io/protractor/#/api).\n\nProtractor uses [Jasmine](http://jasmine.github.io/1.3/introduction.html) for its test syntax.\nAs in unit testing, a test file is comprised of one or\nmore `it` blocks that describe the requirements of your application. `it` blocks are made of\n**commands** and **expectations**. Commands tell Protractor to do something with the application\nsuch as navigate to a page or click on a button. Expectations tell Protractor to assert something\nabout the application's state, such as the value of a field or the current URL.\n\nIf any expectation within an `it` block fails, the runner marks the `it` as \"failed\" and continues\non to the next block.\n\nTest files may also have `beforeEach` and `afterEach` blocks, which will be run before or after\neach `it` block regardless of whether the block passes or fails.\n\n\n\nIn addition to the above elements, tests may also contain helper functions to avoid duplicating\ncode in the `it` blocks.\n\nHere is an example of a simple test:\n```js\ndescribe('TODO list', function() {\n it('should filter results', function() {\n\n // Find the element with ng-model=\"user\" and type \"jacksparrow\" into it\n element(by.model('user')).sendKeys('jacksparrow');\n\n // Find the first (and only) button on the page and click it\n element(by.css(':button')).click();\n\n // Verify that there are 10 tasks\n expect(element.all(by.repeater('task in tasks')).count()).toEqual(10);\n\n // Enter 'groceries' into the element with ng-model=\"filterText\"\n element(by.model('filterText')).sendKeys('groceries');\n\n // Verify that now there is only one item in the task list\n expect(element.all(by.repeater('task in tasks')).count()).toEqual(1);\n });\n});\n```\n\nThis test describes the requirements of a ToDo list, specifically, that it should be able to\nfilter the list of items.\n\n## Example\nSee the [angular-seed](https://github.com/angular/angular-seed) project for more examples, or look\nat the embedded examples in the AngularJS documentation (For example, {@link $http $http}\nhas an end-to-end test in the example under the `protractor.js` tag).\n\n## Caveats\n\nProtractor does not work out-of-the-box with apps that bootstrap manually using\n`angular.bootstrap`. You must use the `ng-app` directive.\n" }, { "path": "docs/content/guide/expression.ngdoc", "content": "@ngdoc overview\n@name Expressions\n@sortOrder 270\n@description\n\n# AngularJS Expressions\n\nAngularJS expressions are JavaScript-like code snippets that are mainly placed in\ninterpolation bindings such as `{{ textBinding }}`,\nbut also used directly in directive attributes such as `ng-click=\"functionExpression()\"`.\n\nFor example, these are valid expressions in AngularJS:\n\n * `1+2`\n * `a+b`\n * `user.name`\n * `items[index]`\n\n\n## AngularJS Expressions vs. JavaScript Expressions\n\nAngularJS expressions are like JavaScript expressions with the following differences:\n\n * **Context:** JavaScript expressions are evaluated against the global `window`.\n In AngularJS, expressions are evaluated against a {@link ng.$rootScope.Scope `scope`} object.\n\n * **Forgiving:** In JavaScript, trying to evaluate undefined properties generates `ReferenceError`\n or `TypeError`. In AngularJS, expression evaluation is forgiving to `undefined` and `null`.\n\n * **Filters:** You can use {@link guide/filter filters} within expressions to format data before\n displaying it.\n\n * **No Control Flow Statements:** You cannot use the following in an AngularJS expression:\n conditionals, loops, or exceptions.\n\n * **No Function Declarations:** You cannot declare functions in an AngularJS expression,\n even inside `ng-init` directive.\n\n * **No RegExp Creation With Literal Notation:** You cannot create regular expressions\n in an AngularJS expression. An exception to this rule is {@link ngPattern `ng-pattern`} which accepts valid\n RegExp.\n\n * **No Object Creation With New Operator:** You cannot use `new` operator in an AngularJS expression.\n\n * **No Bitwise, Comma, And Void Operators:** You cannot use\n [Bitwise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators),\n `,` or `void` operators in an AngularJS expression.\n\n\nIf you want to run more complex JavaScript code, you should make it a controller method and call\nthe method from your view. If you want to `eval()` an AngularJS expression yourself, use the\n{@link ng.$rootScope.Scope#$eval `$eval()`} method.\n\n## Example\n\n \n \n 1+2={{1+2}}\n \n \n\n \n it('should calculate expression in binding', function() {\n expect(element(by.binding('1+2')).getText()).toEqual('1+2=3');\n });\n \n\n\nYou can try evaluating different expressions here:\n\n\n \n
    \n Expression:\n \n \n
      \n
    • \n [ X ]\n {{expr}} => \n
      • \n
    \n
    \n     \n\n \n angular.module('expressionExample', [])\n .controller('ExampleController', ['$scope', function($scope) {\n var exprs = $scope.exprs = [];\n $scope.expr = '3*10|currency';\n $scope.addExp = function(expr) {\n exprs.push(expr);\n };\n\n $scope.removeExp = function(index) {\n exprs.splice(index, 1);\n };\n }]);\n \n\n \n it('should allow user expression testing', function() {\n element(by.css('.expressions button')).click();\n var lis = element(by.css('.expressions ul')).all(by.repeater('expr in exprs'));\n expect(lis.count()).toBe(1);\n expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00');\n });\n \n    \n\n\n## Context\n\nAngularJS does not use JavaScript's `eval()` to evaluate expressions. Instead AngularJS's\n{@link ng.$parse $parse} service processes these expressions.\n\nAngularJS expressions do not have direct access to global variables like `window`, `document` or `location`.\nThis restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.\n\nInstead use services like `$window` and `$location` in functions on controllers, which are then called from expressions.\nSuch services provide mockable access to globals.\n\nIt is possible to access the context object using the identifier `this` and the locals object using the\nidentifier `$locals`.\n\n\n \n
    \n Name: \n \n \n
    \n     \n\n \n angular.module('expressionExample', [])\n .controller('ExampleController', ['$window', '$scope', function($window, $scope) {\n $scope.name = 'World';\n\n $scope.greet = function() {\n $window.alert('Hello ' + $scope.name);\n };\n }]);\n \n\n \n it('should calculate expression in binding', function() {\n if (browser.params.browser === 'safari') {\n // Safari can't handle dialogs.\n return;\n }\n element(by.css('[ng-click=\"greet()\"]')).click();\n\n // We need to give the browser time to display the alert\n browser.wait(protractor.ExpectedConditions.alertIsPresent(), 1000);\n\n var alertDialog = browser.switchTo().alert();\n\n expect(alertDialog.getText()).toEqual('Hello World');\n\n alertDialog.accept();\n });\n \n    \n\n## Forgiving\n\nExpression evaluation is forgiving to undefined and null. In JavaScript, evaluating `a.b.c` throws\nan exception if `a` is not an object. While this makes sense for a general purpose language, the\nexpression evaluations are primarily used for data binding, which often look like this:\n\n {{a.b.c}}\n\nIt makes more sense to show nothing than to throw an exception if `a` is undefined (perhaps we are\nwaiting for the server response, and it will become defined soon). If expression evaluation wasn't\nforgiving we'd have to write bindings that clutter the code, for example: `{{((a||{}).b||{}).c}}`\n\nSimilarly, invoking a function `a.b.c()` on `undefined` or `null` simply returns `undefined`.\n\n\n## No Control Flow Statements\n\nApart from the ternary operator (`a ? b : c`), you cannot write a control flow statement in an\nexpression. The reason behind this is core to the AngularJS philosophy that application logic should\nbe in controllers, not the views. If you need a real conditional, loop, or to throw from a view\nexpression, delegate to a JavaScript method instead.\n\n## No function declarations or RegExp creation with literal notation\n\nYou can't declare functions or create regular expressions from within AngularJS expressions. This is\nto avoid complex model transformation logic inside templates. Such logic is better placed in a\ncontroller or in a dedicated filter where it can be tested properly.\n\n## `$event`\n\nDirectives like {@link ng.directive:ngClick `ngClick`} and {@link ng.directive:ngFocus `ngFocus`}\nexpose a `$event` object within the scope of that expression. The object is an instance of a [jQuery\nEvent Object](http://api.jquery.com/category/events/event-object/) when jQuery is present or a\nsimilar jqLite object.\n\n\n \n
    \n \n

    $event: 

     {{$event | json}}

    \n

    clickEvent: 

    {{clickEvent | json}}

    \n
    \n     \n\n \n angular.module('eventExampleApp', []).\n controller('EventController', ['$scope', function($scope) {\n /*\n * expose the event object to the scope\n */\n $scope.clickMe = function(clickEvent) {\n $scope.clickEvent = simpleKeys(clickEvent);\n console.log(clickEvent);\n };\n\n /*\n * return a copy of an object with only non-object keys\n * we need this to avoid circular references\n */\n function simpleKeys(original) {\n return Object.keys(original).reduce(function(obj, key) {\n obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];\n return obj;\n }, {});\n }\n }]);\n \n    \n\nNote in the example above how we can pass in `$event` to `clickMe`, but how it does not show up\nin `{{$event}}`. This is because `$event` is outside the scope of that binding.\n\n\n## One-time binding\n\nAn expression that starts with `::` is considered a one-time expression. One-time expressions\nwill stop recalculating once they are stable, which happens after the first digest if the expression\nresult is a non-undefined value (see value stabilization algorithm below).\n\n\n \n
    \n \n

    One time binding: {{::name}}

    \n

    Normal binding: {{name}}

    \n
    \n     \n \n angular.module('oneTimeBindingExampleApp', []).\n controller('EventController', ['$scope', function($scope) {\n var counter = 0;\n var names = ['Igor', 'Misko', 'Chirayu', 'Lucas'];\n /*\n * expose the event object to the scope\n */\n $scope.clickMe = function(clickEvent) {\n $scope.name = names[counter % names.length];\n counter++;\n };\n }]);\n \n \n it('should freeze binding after its value has stabilized', function() {\n var oneTimeBinding = element(by.id('one-time-binding-example'));\n var normalBinding = element(by.id('normal-binding-example'));\n\n expect(oneTimeBinding.getText()).toEqual('One time binding:');\n expect(normalBinding.getText()).toEqual('Normal binding:');\n element(by.buttonText('Click Me')).click();\n\n expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');\n expect(normalBinding.getText()).toEqual('Normal binding: Igor');\n element(by.buttonText('Click Me')).click();\n\n expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');\n expect(normalBinding.getText()).toEqual('Normal binding: Misko');\n\n element(by.buttonText('Click Me')).click();\n element(by.buttonText('Click Me')).click();\n\n expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');\n expect(normalBinding.getText()).toEqual('Normal binding: Lucas');\n });\n \n    \n\n\n### Reasons for using one-time binding\n\nThe main purpose of one-time binding expression is to provide a way to create a binding\nthat gets deregistered and frees up resources once the binding is stabilized.\nReducing the number of expressions being watched makes the digest loop faster and allows more\ninformation to be displayed at the same time.\n\n\n### Value stabilization algorithm\n\nOne-time binding expressions will retain the value of the expression at the end of the\ndigest cycle as long as that value is not undefined. If the value of the expression is set\nwithin the digest loop and later, within the same digest loop, it is set to undefined,\nthen the expression is not fulfilled and will remain watched.\n\n 1. Given an expression that starts with `::`, when a digest loop is entered and expression\n is dirty-checked, store the value as V\n 2. If V is not undefined, mark the result of the expression as stable and schedule a task\n to deregister the watch for this expression when we exit the digest loop\n 3. Process the digest loop as normal\n 4. When digest loop is done and all the values have settled, process the queue of watch\n deregistration tasks. For each watch to be deregistered, check if it still evaluates\n to a value that is not `undefined`. If that's the case, deregister the watch. Otherwise,\n keep dirty-checking the watch in the future digest loops by following the same\n algorithm starting from step 1\n\n#### Special case for object literals\n\nUnlike simple values, object-literals are watched until every key is defined.\nSee http://www.bennadel.com/blog/2760-one-time-data-bindings-for-object-literal-expressions-in-angularjs-1-3.htm\n\n### How to benefit from one-time binding\n\nIf the expression will not change once set, it is a candidate for one-time binding.\nHere are three example cases.\n\nWhen interpolating text or attributes:\n\n```html\n
    text: {{::name | uppercase}}
    \n```\n\nWhen using a directive with bidirectional binding and parameters that will not change:\n\n```js\nsomeModule.directive('someDirective', function() {\n return {\n scope: {\n name: '=',\n color: '@'\n },\n template: '{{name}}: {{color}}'\n };\n});\n```\n\n```html\n
    \n```\n\n\nWhen using a directive that takes an expression:\n\n```html\n
      \n
    • {{item.name}};
      • \n
    \n```\n" }, { "path": "docs/content/guide/external-resources.ngdoc", "content": "@ngdoc overview\n@name External Resources\n@sortOrder 150\n@description\n\n# External AngularJS Resources\n\nThis is a collection of external, 3rd party resources for learning and developing AngularJS.\n\n## Articles, Videos, and Projects\n\n### Introductory Material\n\n* [10 Reasons Why You Should Use AngularJS](http://www.sitepoint.com/10-reasons-use-angularjs/)\n* [10 Reasons Why Developers Should Learn AngularJS](http://wintellect.com/blogs/jlikness/10-reasons-web-developers-should-learn-angularjs)\n* [Design Principles of AngularJS (video)](https://www.youtube.com/watch?v=HCR7i5F5L8c)\n* [Fundamentals in 60 Minutes (video)](http://www.youtube.com/watch?v=i9MHigUZKEM)\n* [For folks with a jQuery background](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background)\n\n### Specific Topics\n\n#### Application Structure & Style Guides\n\n* [AngularJS Styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)\n* [Architecture, file structure, components, one-way dataflow and best practices](https://github.com/toddmotto/angular-styleguide)\n* [When to use directives, controllers or services](http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/)\n* [Service vs Factory](http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html)\n\n#### Testing\n\n* **Unit testing:** [Using Karma (video)](http://www.youtube.com/watch?v=YG5DEzaQBIc), [Karma in Webstorm](http://blog.jetbrains.com/webstorm/2013/10/running-javascript-tests-with-karma-in-webstorm-7/)\n\n#### Mobile\n\n* [AngularJS on Mobile Guide](http://www.ng-newsletter.com/posts/angular-on-mobile.html)\n* [AngularJS and Cordova](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/)\n* [Ionic Framework](http://ionicframework.com/)\n\n#### Deployment\n\n##### General\n\n* **Javascript minification: **[Background](http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/), [ng-annotate automation tool](https://github.com/olov/ng-annotate)\n* **Analytics and Logging:** [Angularytics (Google Analytics)](http://ngmodules.org/modules/angularytics), [Angulartics (Analytics)](https://github.com/luisfarzati/angulartics), [Logging Client-Side Errors](http://www.bennadel.com/blog/2542-Logging-Client-Side-Errors-With-AngularJS-And-Stacktrace-js.htm)\n* **SEO:** [By hand](http://www.yearofmoo.com/2012/11/angularjs-and-seo.html), [prerender.io](http://prerender.io/), [Brombone](http://www.brombone.com/), [SEO.js](http://getseojs.com/), [SEO4Ajax](http://www.seo4ajax.com/)\n\n##### Server-Specific\n\n* **Django:** [Tutorial](http://blog.mourafiq.com/post/55034504632/end-to-end-web-app-with-django-rest-framework), [Integrating AngularJS with Django](http://django-angular.readthedocs.org/en/latest/integration.html), [Getting Started with Django Rest Framework and AngularJS](http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html)\n* **FireBase:** [AngularFire](http://angularfire.com/), [Realtime Apps with AngularJS and FireBase (video)](http://www.youtube.com/watch?v=C7ZI7z7qnHU)\n* **Google Cloud Platform:** [with Go](https://github.com/GoogleCloudPlatform/appengine-angular-gotodos)\n* **Hood.ie:** [60 Minutes to Awesome](http://www.roberthorvick.com/2013/06/30/todomvc-angularjs-hood-ie-60-minutes-to-awesome/)\n* **MEAN Stack: **[Blog post](http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and), [Setup](http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/), [GDL Video](https://developers.google.com/live/shows/913996610)\n* **Rails: **[Tutorial](http://coderberry.me/blog/2013/04/22/angularjs-on-rails-4-part-1/), [AngularJS with Rails4](https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4), [angularjs-rails](https://github.com/hiravgandhi/angularjs-rails)\n* **PHP: **[Building a RESTful web service](http://blog.brunoscopelliti.com/building-a-restful-web-service-with-angularjs-and-php-more-power-with-resource), [End to End with Laravel 4 (video)](http://www.youtube.com/watch?v=hqAyiqUs93c)\n* **Meteor: **[angular-meteor package](https://github.com/Urigo/angular-meteor)\n\n### Other Languages\n* [ES6, Webpack, and JSPM Starter Project](https://github.com/AngularClass/NG6-starter)\n* [ES6/Typescript Best Practices](https://codepen.io/martinmcwhorter/post/angularjs-1-x-with-typescript-or-es6-best-practices)\n* [Dart](https://github.com/angular/angular.dart.tutorial/wiki)\n* [CoffeeScript Tutorial](http://www.coffeescriptlove.com/2013/08/angularjs-and-coffeescript-tutorials.html)\n\n### More Topics\n\n* **Security:** [video](https://www.youtube.com/watch?v=18ifoT-Id54)\n* **Internationalization and Localization:** [Creating multilingual support](http://www.novanet.no/blog/hallstein-brotan/dates/2013/10/creating-multilingual-support-using-angularjs/)\n* **Authentication/Login: **[Google example](https://developers.google.com/+/photohunt/python), [AngularJS Facebook library](https://github.com/pc035860/angular-easyfb), [Facebook example](http://blog.brunoscopelliti.com/facebook-authentication-in-your-angularjs-web-app), [authentication strategy](http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app), [unix-style authorization](http://frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/)\n* **Visualization:** [SVG](http://gaslight.co/blog/angular-backed-svgs), [D3.js](http://www.ng-newsletter.com/posts/d3-on-angular.html)\n* **Realtime Communication: **[Socket.io](http://www.creativebloq.com/javascript/angularjs-collaboration-board-socketio-2132885), [OmniBinder](https://github.com/jeffbcross/omnibinder)\n\n\n## Tools\n\n* **Getting Started:** [Comparison of the options for starting a new project](http://www.dancancro.com/comparison-of-angularjs-application-starters/)\n* **Debugging:** [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en)\n* **Editor support:** [Webstorm](http://plugins.jetbrains.com/plugin/6971) (and [video](http://www.youtube.com/watch?v=LJOyrSh1kDU)), [Sublime Text](https://github.com/angular-ui/AngularJS-sublime-package), [Visual Studio](http://madskristensen.net/post/angularjs-intellisense-in-visual-studio-2012), [Atom](https://github.com/angular-ui/AngularJS-Atom), [Vim](https://github.com/burnettk/vim-angular)\n* **Workflow:** [Yeoman.io](https://github.com/yeoman/generator-angular) and [AngularJS Yeoman Tutorial](http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/)\n\n## Complementary Libraries\n\nThis is a list of libraries that enhance AngularJS, add common UI components or integrate with other libraries.\nYou can find a larger list of AngularJS external libraries at [ngmodules.org](http://ngmodules.org/).\n\n* **Advanced Routing:** [UI-Router](https://github.com/angular-ui/ui-router)\n* **Authentication:** [Http Auth Interceptor](https://github.com/witoldsz/angular-http-auth)\n* **Internationalization:**\n - [angular-translate](http://angular-translate.github.io)\n - [angular-gettext](http://angular-gettext.rocketeer.be/)\n - [angular-localization](http://doshprompt.github.io/angular-localization/)\n* **RESTful services:** [Restangular](https://github.com/mgonto/restangular)\n* **SQL and NoSQL backends:**\n - [BreezeJS](http://www.breezejs.com/)\n - [AngularFire](http://angularfire.com/)\n* **Data Handling**\n - Local Storage and session: [ngStorage](https://github.com/gsklee/ngStorage)\n - [angular-cache](https://github.com/jmdobry/angular-cache)\n - Data Modeling [JS-Data-Angular](https://github.com/js-data/js-data-angular)\n* **Fileupload:**\n - [ng-file-upload](https://github.com/danialfarid/ng-file-upload)\n - [blueimp-fileupload for AngularJS](https://blueimp.github.io/jQuery-File-Upload/angularjs.html)\n* **General UI Libraries:**\n - [AngularJS Material](https://material.angularjs.org/latest/)\n - [AngularJS UI Bootstrap](http://angular-ui.github.io/)\n - [AngularStrap for Bootstrap 3](http://mgcrea.github.io/angular-strap/)\n - [KendoUI](http://kendo-labs.github.io/angular-kendo/#/)\n - [Wijmo](http://wijmo.com/tag/angularjs-2/)\n* **Specific UI Elements:**\n - [ngInfiniteScroll](https://sroze.github.io/ngInfiniteScroll/)\n - [ngTable](https://github.com/esvit/ng-table)\n - [AngularJS UI Grid](http://angular-ui.github.io/grid)\n - [Toaster Notifications](https://github.com/jirikavi/AngularJS-Toaster)\n - [textAngular Rich Text Editor / contenteditable](http://textangular.com/) (Rich Text Editor /\n binding to contenteditable)\n - [AngularJS UI Map (Google Maps)](https://github.com/angular-ui/ui-map)\n\n## General Learning Resources\n\n### Books\n* [AngularJS Directives](http://www.amazon.com/AngularJS-Directives-Alex-Vanston/dp/1783280336) by Alex Vanston\n* [AngularJS Essentials (Free eBook)](https://www.packtpub.com/packt/free-ebook/angularjs-essentials) by Rodrigo Branas\n* [AngularJS in Action](https://www.manning.com/books/angularjs-in-action) by Lukas Ruebbelke\n* [AngularJS: Novice to Ninja](http://www.amazon.in/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453) by Sandeep Panda\n* [AngularJS UI Development](http://www.amazon.com/AngularJS-UI-Development-Amit-Ghart-ebook/dp/B00OXVAK7A) by Amit Gharat and Matthias Nehlsen\n* [AngularJS: Up and Running](http://www.amazon.com/AngularJS-Running-Enhanced-Productivity-Structured/dp/1491901942) by Brad Green and Shyam Seshadri\n* [Developing an AngularJS Edge](http://www.amazon.com/Developing-AngularJS-Edge-Christopher-Hiller-ebook/dp/B00CJLFF8K) by Christopher Hiller\n* [Mastering Web App Development](http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821) by Pawel Kozlowski and Pete Bacon Darwin\n* [ng-book: The Complete Book on AngularJS](http://ng-book.com/) by Ari Lerner\n* [Professional AngularJS](http://www.amazon.com/Professional-AngularJS-Valeri-Karpov/dp/1118832078/)\n* [Recipes With AngularJS](http://www.amazon.co.uk/Recipes-Angular-js-Frederik-Dietz-ebook/dp/B00DK95V48) by Frederik Dietz\n* [Responsive Web Design with AngularJS](http://www.amazon.com/Responsive-Design-AngularJS-Sandeep-Kumar/dp/178439842X) by Sandeep Kumar Patel\n\n### Videos:\n* [egghead.io](http://egghead.io/)\n\n### Courses\n* **Free online:**\n [thinkster.io](http://thinkster.io),\n [CodeAcademy](http://www.codecademy.com/courses/javascript-advanced-en-2hJ3J/0/1),\n [CodeSchool](https://www.codeschool.com/courses/shaping-up-with-angular-js)\n* **Paid online:**\n [Pluralsight](https://www.pluralsight.com/search?q=angularjs),\n [Tuts+](https://tutsplus.com/course/easier-js-apps-with-angular/),\n [lynda.com](http://www.lynda.com/AngularJS-tutorials/Up-Running-AngularJS/133318-2.html),\n [WintellectNOW (4 lessons)](http://www.wintellectnow.com/Course/Detail/mastering-angularjs),\n [Packt](https://www.packtpub.com/web-development/angularjs-maintaining-web-applications)\n* **Paid onsite:**\n [angularbootcamp.com](http://angularbootcamp.com/)\n" }, { "path": "docs/content/guide/filter.ngdoc", "content": "@ngdoc overview\n@name Filters\n@sortOrder 280\n@description\n\n# Filters\n\nFilters format the value of an expression for display to the user. They can be used in view\ntemplates, controllers or services. AngularJS comes with a collection of\n[built-in filters](api/ng/filter), but it is easy to define your own as well.\n\nThe underlying API is the {@link ng.$filterProvider}.\n\n## Using filters in view templates\n\nFilters can be applied to expressions in view templates using the following syntax:\n\n {{ expression | filter }}\n\nE.g. the markup `{{ 12 | currency }}` formats the number 12 as a currency using the {@link ng.filter:currency `currency`}\nfilter. The resulting value is `$12.00`.\n\nFilters can be applied to the result of another filter. This is called \"chaining\" and uses\nthe following syntax:\n\n {{ expression | filter1 | filter2 | ... }}\n\nFilters may have arguments. The syntax for this is\n\n {{ expression | filter:argument1:argument2:... }}\n\nE.g. the markup `{{ 1234 | number:2 }}` formats the number 1234 with 2 decimal points using the\n{@link ng.filter:number `number`} filter. The resulting value is `1,234.00`.\n\n### When filters are executed\n\nIn templates, filters are only executed when their inputs have changed. This is more performant than executing\na filter on each {@link ng.$rootScope.Scope#$digest `$digest`} as is the case with {@link guide/expression expressions}.\n\nThere are two exceptions to this rule:\n\n1. In general, this applies only to filters that take [primitive values](https://developer.mozilla.org/docs/Glossary/Primitive)\nas inputs. Filters that receive [Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects)\nas input are executed on each `$digest`, as it would be too costly to track if the inputs have changed.\n\n2. Filters that are marked as `$stateful` are also executed on each $digest.\nSee {@link guide/filter#stateful-filters Stateful filters} for more information. Note that no AngularJS\ncore filters are $stateful.\n\n\n## Using filters in controllers, services, and directives\n\nYou can also use filters in controllers, services, and directives.\n\n
    \nFor this, inject a dependency with the name `Filter` into your controller/service/directive.\nE.g. a filter called `number` is injected by using the dependency `numberFilter`. The injected argument\nis a function that takes the value to format as first argument, and filter parameters starting with the second argument.\n
    \n\nThe example below uses the filter called {@link ng.filter:filter `filter`}.\nThis filter reduces arrays into sub arrays based on\nconditions. The filter can be applied in the view template with markup like\n`{{ctrl.array | filter:'a'}}`, which would do a fulltext search for \"a\".\nHowever, using a filter in a view template will reevaluate the filter on\nevery digest, which can be costly if the array is big.\n\nThe example below therefore calls the filter directly in the controller.\nBy this, the controller is able to call the filter only when needed (e.g. when the data is loaded from the backend\nor the filter expression is changed).\n\n\n \n
    \n
    \n All entries:\n {{entry.name}} \n
    \n
    \n Entries that contain an \"a\":\n {{entry.name}} \n
    \n
    \n     \n\n \n angular.module('FilterInControllerModule', []).\n controller('FilterController', ['filterFilter', function FilterController(filterFilter) {\n this.array = [\n {name: 'Tobias'},\n {name: 'Jeff'},\n {name: 'Brian'},\n {name: 'Igor'},\n {name: 'James'},\n {name: 'Brad'}\n ];\n this.filteredArray = filterFilter(this.array, 'a');\n }]);\n \n    \n\n\n## Creating custom filters\n\nWriting your own filter is very easy: just register a new filter factory function with\nyour module. Internally, this uses the {@link ng.$filterProvider `filterProvider`}.\nThis factory function should return a new filter function which takes the input value\nas the first argument. Any filter arguments are passed in as additional arguments to the filter\nfunction.\n\nThe filter function should be a [pure function](http://en.wikipedia.org/wiki/Pure_function), which\nmeans that it should always return the same result given the same input arguments and should not affect\nexternal state, for example, other AngularJS services. AngularJS relies on this contract and will by default\nexecute a filter only when the inputs to the function change.\n{@link guide/filter#stateful-filters Stateful filters} are possible, but less performant.\n\n
    \n**Note:** Filter names must be valid AngularJS {@link expression} identifiers, such as `uppercase` or `orderBy`.\nNames with special characters, such as hyphens and dots, are not allowed. If you wish to namespace\nyour filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores\n(`myapp_subsection_filterx`).\n
    \n\nThe following sample filter reverses a text string. In addition, it conditionally makes the\ntext upper-case.\n\n\n \n
    \n
    \n No filter: {{greeting}}
    \n Reverse: {{greeting|reverse}}
    \n Reverse + uppercase: {{greeting|reverse:true}}
    \n Reverse, filtered in controller: {{filteredGreeting}}
    \n
    \n     \n\n \n angular.module('myReverseFilterApp', [])\n .filter('reverse', function() {\n return function(input, uppercase) {\n input = input || '';\n var out = '';\n for (var i = 0; i < input.length; i++) {\n out = input.charAt(i) + out;\n }\n // conditional based on optional argument\n if (uppercase) {\n out = out.toUpperCase();\n }\n return out;\n };\n })\n .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {\n $scope.greeting = 'hello';\n $scope.filteredGreeting = reverseFilter($scope.greeting);\n }]);\n \n    \n\n\n### Stateful filters\n\nIt is strongly discouraged to write filters that are stateful, because the execution of those can't\nbe optimized by AngularJS, which often leads to performance issues. Many stateful filters can be\nconverted into stateless filters just by exposing the hidden state as a model and turning it into an\nargument for the filter.\n\nIf you however do need to write a stateful filter, you have to mark the filter as `$stateful`, which\nmeans that it will be executed one or more times during the each `$digest` cycle.\n\n\n \n
    \n Input:
    \n Decoration:
    \n No filter: {{greeting}}
    \n Decorated: {{greeting | decorate}}
    \n
    \n     \n\n \n angular.module('myStatefulFilterApp', [])\n .filter('decorate', ['decoration', function(decoration) {\n\n function decorateFilter(input) {\n return decoration.symbol + input + decoration.symbol;\n }\n decorateFilter.$stateful = true;\n\n return decorateFilter;\n }])\n .controller('MyController', ['$scope', 'decoration', function($scope, decoration) {\n $scope.greeting = 'hello';\n $scope.decoration = decoration;\n }])\n .value('decoration', {symbol: '*'});\n \n    \n\n\n## Testing custom filters\n\nSee the [phonecat tutorial](http://docs.angularjs.org/tutorial/step_11#testing) for an example.\n" }, { "path": "docs/content/guide/forms.ngdoc", "content": "@ngdoc overview\n@name Forms\n@sortOrder 290\n@description\n\n# Forms\n\nControls (`input`, `select`, `textarea`) are ways for a user to enter data.\nA Form is a collection of controls for the purpose of grouping related controls together.\n\nForm and controls provide validation services, so that the user can be notified of invalid input\nbefore submitting a form. This provides a better user experience than server-side validation alone\nbecause the user gets instant feedback on how to correct the error. Keep in mind that while\nclient-side validation plays an important role in providing good user experience, it can easily\nbe circumvented and thus can not be trusted. Server-side validation is still necessary for a\nsecure application.\n\n\n## Simple form\nThe key directive in understanding two-way data-binding is {@link ng.directive:ngModel ngModel}.\nThe `ngModel` directive provides the two-way data-binding by synchronizing the model to the view,\nas well as view to the model. In addition it provides an {@link ngModel.NgModelController API}\nfor other directives to augment its behavior.\n\n\n \n
    \n
    \n
    \n
    \n Best Editor: \n
    \n \n \n \n 
    user = {{user | json}}
    \n 
    master = {{master | json}}
    \n
    \n\n \n     \n    \n\n\nNote that `novalidate` is used to disable browser's native form validation.\n\nThe value of `ngModel` won't be set unless it passes validation for the input field.\nFor example: inputs of type `email` must have a value in the form of `user@domain`.\n\n\n\n## Using CSS classes\n\nTo allow styling of form as well as controls, `ngModel` adds these CSS classes:\n\n- `ng-valid`: the model is valid\n- `ng-invalid`: the model is invalid\n- `ng-valid-[key]`: for each valid key added by `$setValidity`\n- `ng-invalid-[key]`: for each invalid key added by `$setValidity`\n- `ng-pristine`: the control hasn't been interacted with yet\n- `ng-dirty`: the control has been interacted with\n- `ng-touched`: the control has been blurred\n- `ng-untouched`: the control hasn't been blurred\n- `ng-pending`: any `$asyncValidators` are unfulfilled\n\nThe following example uses the CSS to display validity of each form control.\nIn the example both `user.name` and `user.email` are required, but are rendered\nwith red background only after the input is blurred (loses focus).\nThis ensures that the user is not distracted with an error until after interacting with the control,\nand failing to satisfy its validity.\n\n\n \n
    \n
    \n
    \n
    \n Gender: \n
    \n \n \n \n 
    user = {{user | json}}
    \n 
    master = {{master | json}}
    \n
    \n\n \n\n \n     \n    \n\n\n\n## Binding to form and control state\n\nA form is an instance of {@link form.FormController FormController}.\nThe form instance can optionally be published into the scope using the `name` attribute.\n\nSimilarly, an input control that has the {@link ng.directive:ngModel ngModel} directive holds an\ninstance of {@link ngModel.NgModelController NgModelController}. Such a control instance\ncan be published as a property of the form instance using the `name` attribute on the input control.\nThe name attribute specifies the name of the property on the form instance.\n\nThis implies that the internal state of both the form and the control is available for binding in\nthe view using the standard binding primitives.\n\nThis allows us to extend the above example with these features:\n\n- Custom error message displayed after the user interacted with a control (i.e. when `$touched` is set)\n- Custom error message displayed upon submitting the form (`$submitted` is set), even if the user\ndidn't interact with a control\n\n\n\n \n
    \n
    \n \n
    \n
    \n
    Tell us your name.
    \n
    \n\n \n
    \n
    \n Tell us your email.\n This is not a valid email.\n
    \n\n Gender:\n \n \n
    \n \n \n
    \n
    \n
    Please agree and sign.
    \n
    \n\n \n \n \n 
    user = {{user | json}}
    \n 
    master = {{master | json}}
    \n
    \n     \n\n \n angular.module('formExample', [])\n .controller('ExampleController', ['$scope', function($scope) {\n $scope.master = {};\n\n $scope.update = function(user) {\n $scope.master = angular.copy(user);\n };\n\n $scope.reset = function(form) {\n if (form) {\n form.$setPristine();\n form.$setUntouched();\n }\n $scope.user = angular.copy($scope.master);\n };\n\n $scope.reset();\n }]);\n \n    \n\n\n\n## Custom model update triggers\n\nBy default, any change to the content will trigger a model update and form validation. You can\noverride this behavior using the {@link ng.directive:ngModelOptions ngModelOptions} directive to\nbind only to specified list of events. I.e. `ng-model-options=\"{ updateOn: 'blur' }\"` will update\nand validate only after the control loses focus. You can set several events using a space delimited\nlist. I.e. `ng-model-options=\"{ updateOn: 'mousedown blur' }\"`\n\n\"animation\n\nIf you want to keep the default behavior and just add new events that may trigger the model update\nand validation, add \"default\" as one of the specified events.\n\nI.e. `ng-model-options=\"{ updateOn: 'default blur' }\"`\n\nThe following example shows how to override immediate updates. Changes on the inputs within the form\nwill update the model only when the control loses focus (blur event).\n\n\n \n
    \n
    \n
    \n
    \n \n 
    username = \"{{user.name}}\"
    \n 
    userdata = \"{{user.data}}\"
    \n
    \n     \n \n angular.module('customTriggerExample', [])\n .controller('ExampleController', ['$scope', function($scope) {\n $scope.user = {};\n }]);\n \n    \n\n\n\n## Non-immediate (debounced) model updates\n\nYou can delay the model update/validation by using the `debounce` key with the\n{@link ng.directive:ngModelOptions ngModelOptions} directive. This delay will also apply to\nparsers, validators and model flags like `$dirty` or `$pristine`.\n\n\"animation\n\nI.e. `ng-model-options=\"{ debounce: 500 }\"` will wait for half a second since\nthe last content change before triggering the model update and form validation.\n\nIf custom triggers are used, custom debouncing timeouts can be set for each event using an object\nin `debounce`. This can be useful to force immediate updates on some specific circumstances\n(like blur events).\n\nI.e. `ng-model-options=\"{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }\"`\n\nIf those attributes are added to an element, they will be applied to all the child elements and\ncontrols that inherit from it unless they are overridden.\n\nThis example shows how to debounce model changes. Model will be updated only 250 milliseconds\nafter last change.\n\n\n \n
    \n
    \n
    \n \n 
    username = \"{{user.name}}\"
    \n
    \n     \n \n angular.module('debounceExample', [])\n .controller('ExampleController', ['$scope', function($scope) {\n $scope.user = {};\n }]);\n \n    \n\n## Custom Validation\n\nAngularJS provides basic implementation for most common HTML5 {@link ng.directive:input input}\ntypes: ({@link input[text] text}, {@link input[number] number}, {@link input[url] url},\n{@link input[email] email}, {@link input[date] date}, {@link input[radio] radio}, {@link input[checkbox] checkbox}),\nas well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`,\n`min`, `max`).\n\nWith a custom directive, you can add your own validation functions to the `$validators` object on\nthe {@link ngModel.NgModelController `ngModelController`}. To get a hold of the controller,\nyou require it in the directive as shown in the example below.\n\nEach function in the `$validators` object receives the `modelValue` and the `viewValue`\nas parameters. AngularJS will then call `$setValidity` internally with the function's return value\n(`true`: valid, `false`: invalid). The validation functions are executed every time an input\nis changed (`$setViewValue` is called) or whenever the bound `model` changes.\nValidation happens after successfully running `$parsers` and `$formatters`, respectively.\nFailed validators are stored by key in\n{@link ngModel.NgModelController#$error `ngModelController.$error`}.\n\nAdditionally, there is the `$asyncValidators` object which handles asynchronous validation,\nsuch as making an `$http` request to the backend. Functions added to the object must return\na promise that must be `resolved` when valid or `rejected` when invalid.\nIn-progress async validations are stored by key in\n{@link ngModel.NgModelController#$pending `ngModelController.$pending`}.\n\nIn the following example we create two directives:\n * An `integer` directive that validates whether the input is a valid integer. For example,\n `1.23` is an invalid value, since it contains a fraction. Note that we validate the viewValue\n (the string value of the control), and not the modelValue. This is because input[number] converts\n the viewValue to a number when running the `$parsers`.\n\n * A `username` directive that asynchronously checks if a user-entered value is already taken.\n We mock the server request with a `$q` deferred.\n\n\n \n
    \n
    \n
    \n The value is not a valid integer!\n \n The value must be in range 0 to 10!\n
    \n\n
    \n
    \n Checking if this name is available...\n This username is already taken!\n
    \n\n \n     \n\n \n var app = angular.module('form-example1', []);\n\n var INTEGER_REGEXP = /^-?\\d+$/;\n app.directive('integer', function() {\n return {\n require: 'ngModel',\n link: function(scope, elm, attrs, ctrl) {\n ctrl.$validators.integer = function(modelValue, viewValue) {\n if (ctrl.$isEmpty(modelValue)) {\n // consider empty models to be valid\n return true;\n }\n\n if (INTEGER_REGEXP.test(viewValue)) {\n // it is valid\n return true;\n }\n\n // it is invalid\n return false;\n };\n }\n };\n });\n\n app.directive('username', function($q, $timeout) {\n return {\n require: 'ngModel',\n link: function(scope, elm, attrs, ctrl) {\n var usernames = ['Jim', 'John', 'Jill', 'Jackie'];\n\n ctrl.$asyncValidators.username = function(modelValue, viewValue) {\n\n if (ctrl.$isEmpty(modelValue)) {\n // consider empty model valid\n return $q.resolve();\n }\n\n var def = $q.defer();\n\n $timeout(function() {\n // Mock a delayed response\n if (usernames.indexOf(modelValue) === -1) {\n // The username is available\n def.resolve();\n } else {\n def.reject();\n }\n\n }, 2000);\n\n return def.promise;\n };\n }\n };\n });\n \n    \n\n## Modifying built-in validators\n\nSince AngularJS itself uses `$validators`, you can easily replace or remove built-in validators,\nshould you find it necessary. The following example shows you how to overwrite the email validator\nin `input[email]` from a custom directive so that it requires a specific top-level domain,\n`example.com` to be present.\nNote that you can alternatively use `ng-pattern` to further restrict the validation.\n\n\n \n
    \n
    \n \n This email format is invalid!
    \n Model: {{myEmail}}\n
    \n \n     \n\n \n var app = angular.module('form-example-modify-validators', []);\n\n app.directive('overwriteEmail', function() {\n var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\\.com$/i;\n\n return {\n require: '?ngModel',\n link: function(scope, elm, attrs, ctrl) {\n // only apply the validator if ngModel is present and AngularJS has added the email validator\n if (ctrl && ctrl.$validators.email) {\n\n // this will overwrite the default AngularJS email validator\n ctrl.$validators.email = function(modelValue) {\n return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);\n };\n }\n }\n };\n });\n \n    \n\n\n## Implementing custom form controls (using `ngModel`)\nAngularJS implements all of the basic HTML form controls ({@link ng.directive:input input},\n{@link ng.directive:select select}, {@link ng.directive:textarea textarea}),\nwhich should be sufficient for most cases. However, if you need more flexibility,\nyou can write your own form control as a directive.\n\nIn order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to:\n\n - implement `$render` method, which is responsible for rendering the data after it passed the\n {@link ngModel.NgModelController#$formatters `NgModelController.$formatters`},\n - call `$setViewValue` method, whenever the user interacts with the control and model\n needs to be updated. This is usually done inside a DOM Event listener.\n\nSee {@link guide/directive `$compileProvider.directive`} for more info.\n\nThe following example shows how to add two-way data-binding to contentEditable elements.\n\n\n \n
    Some
    \n 
    model = {{content}}
    \n\n \n     \n\n \n angular.module('form-example2', []).directive('contenteditable', function() {\n return {\n require: 'ngModel',\n link: function(scope, elm, attrs, ctrl) {\n // view -> model\n elm.on('blur', function() {\n ctrl.$setViewValue(elm.html());\n });\n\n // model -> view\n ctrl.$render = function() {\n elm.html(ctrl.$viewValue);\n };\n\n // load init value from DOM\n ctrl.$setViewValue(elm.html());\n }\n };\n });\n \n    \n" }, { "path": "docs/content/guide/i18n.ngdoc", "content": "@ngdoc overview\n@name i18n and l10n\n@sortOrder 520\n@description\n\n# i18n and l10n\n\nInternationalization (i18n) is the process of developing products in such a way that they can be\nlocalized for languages and cultures easily. Localization (l10n), is the process of adapting\napplications and text to enable their usability in a particular cultural or linguistic market. For\napplication developers, internationalizing an application means abstracting all of the strings and\nother locale-specific bits (such as date or currency formats) out of the application. Localizing an\napplication means providing translations and localized formats for the abstracted bits.\n\n\n## How does AngularJS support i18n/l10n?\n\nAngularJS supports i18n/l10n for {@link ng.filter:date date}, {@link ng.filter:number number} and\n{@link ng.filter:currency currency} filters.\n\nLocalizable pluralization is supported via the {@link ng.directive:ngPluralize `ngPluralize`\ndirective}. Additionally, you can use {@link guide/i18n#messageformat-extensions MessageFormat extensions} to\n`$interpolate` for localizable pluralization and gender support in all interpolations via the\n`ngMessageFormat` module.\n\nAll localizable AngularJS components depend on locale-specific rule sets managed by the {@link\nng.$locale `$locale` service}.\n\nThere are a few examples that showcase how to use AngularJS filters with various locale rule sets in the\n[`i18n/e2e` directory](https://github.com/angular/angular.js/tree/master/i18n/e2e) of the AngularJS\nsource code.\n\n\n## What is a locale ID?\n\nA locale is a specific geographical, political, or cultural region. The most commonly used locale\nID consists of two parts: language code and country code. For example, `en-US`, `en-AU`, and\n`zh-CN` are all valid locale IDs that have both language codes and country codes. Because\nspecifying a country code in locale ID is optional, locale IDs such as `en`, `zh`, and `sk` are\nalso valid. See the [ICU](http://userguide.icu-project.org/locale) website for more information\nabout using locale IDs.\n\n\n## Supported locales in AngularJS\n\nAngularJS separates number and datetime format rule sets into different files, each file for a\nparticular locale. You can find a list of currently supported locales\n[here](https://github.com/angular/angular.js/tree/master/src/ngLocale)\n\n\n## Providing locale rules to AngularJS\n\nThere are two approaches to providing locale rules to AngularJS:\n\n### 1. Pre-bundled rule sets\n\nYou can pre-bundle the desired locale file with AngularJS by concatenating the content of the\nlocale-specific file to the end of `angular.js` or `angular.min.js` file.\n\nFor example on *nix, to create an angular.js file that contains localization rules for german\nlocale, you can do the following:\n\n`cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js`\n\nWhen the application containing `angular_de-de.js` script instead of the generic angular.js script\nstarts, AngularJS is automatically pre-configured with localization rules for the german locale.\n\n### 2. Including a locale script in `index.html`\n\nYou can also include the locale specific js file in the index.html page. For example, if one client\nrequires German locale, you would serve index_de-de.html which will look something like this:\n\n```html\n\n \n….\n \n \n….\n \n\n```\n\n### Comparison of the two approaches\n\nBoth approaches described above require you to prepare different `index.html` pages or JavaScript\nfiles for each locale that your app may use. You also need to configure your server to serve\nthe correct file that corresponds to the desired locale.\n\nThe second approach (including the locale JavaScript file in `index.html`) may be slower because\nan extra script needs to be loaded.\n\n\n## Caveats\n\nAlthough AngularJS makes i18n convenient, there are several things you need to be conscious of as you\ndevelop your app.\n\n### Currency symbol\n\nAngularJS's {@link ng.filter:currency currency filter} allows you to use the default currency symbol\nfrom the {@link ng.$locale locale service}, or you can provide the filter with a custom currency\nsymbol.\n\n
    \n**Best Practice:** If your app will be used only in one locale, it is fine to rely on the default\ncurrency symbol. If you anticipate that viewers in other locales might use your app, you should\nexplicitly provide a currency symbol.\n
    \n\nLet's say you are writing a banking app and you want to display an account balance of 1000 dollars.\nYou write the following binding using the currency filter:\n\n```html\n{{ 1000 | currency }}\n```\n\nIf your app is currently in the `en-US` locale, the browser will show `$1000.00`. If someone in the\nJapanese locale (`ja`) views your app, their browser will show a balance of `¥1000.00` instead.\nThis is problematic because $1000 is not the same as ¥1000.\n\nIn this case, you need to override the default currency symbol by providing the\n{@link ng.filter:currency} currency filter with a currency symbol as a parameter.\n\nIf we change the above to `{{ 1000 | currency:\"USD$\"}}`, AngularJS will always show a balance of\n`USD$1000` regardless of locale.\n\n### Translation length\n\nTranslated strings/datetime formats can vary greatly in length. For example, `June 3, 1977` will be\ntranslated to Spanish as `3 de junio de 1977`.\n\nWhen internationalizing your app, you need to do thorough testing to make sure UI components behave\nas expected even when their contents vary greatly in content size.\n\n### Timezones\n\nThe AngularJS datetime filter uses the time zone settings of the browser. The same\napplication will show different time information depending on the time zone settings of the\ncomputer that the application is running on. Neither JavaScript nor AngularJS currently supports\ndisplaying the date with a timezone specified by the developer.\n\n\n\n## MessageFormat extensions\n\nYou can write localizable plural and gender based messages in AngularJS interpolation expressions and\n`$interpolate` calls.\n\nThis syntax extension is provided by way of the `ngMessageFormat` module that your application can\ndepend upon (shipped separately as `angular-message-format.min.js` and `angular-message-format.js`.)\nA current limitation of the `ngMessageFormat` module, is that it does not support redefining the\n`$interpolate` start and end symbols. Only the default `{{` and `}}` are allowed.\n\nThe syntax extension is based on a subset of the ICU MessageFormat syntax that covers plurals and\ngender selections. Please refer to the links in the “Further Reading” section at the bottom of this\nsection.\n\nYou may find it helpful to play with the following example as you read the explanations below:\n\n\n \n
    \n Set number of recipients\n \n \n \n \n\n\n

    \n Sender's name:   \n\n

    Recipients
    \n
    \n Name:   \n Gender: \n \n \n
    \n\n

    Message
    \n {{recipients.length, plural, offset:1\n =0 {You ({{sender.name}}) gave no gifts}\n =1 { {{ recipients[0].gender, select,\n male {You ({{sender.name}}) gave him ({{recipients[0].name}}) a gift.}\n female {You ({{sender.name}}) gave her ({{recipients[0].name}}) a gift.}\n other {You ({{sender.name}}) gave them ({{recipients[0].name}}) a gift.}\n }}\n }\n one { {{ recipients[0].gender, select,\n male {You ({{sender.name}}) gave him ({{recipients[0].name}}) and one other person a gift.}\n female {You ({{sender.name}}) gave her ({{recipients[0].name}}) and one other person a gift.}\n other {You ({{sender.name}}) gave them ({{recipients[0].name}}) and one other person a gift.}\n }}\n }\n other {You ({{sender.name}}) gave {{recipients.length}} people gifts. }\n }}\n\n

    In an attribute
    \n
    \n This div has an attribute interpolated with messageformat. Use the DOM inspector to check it out.\n
    \n
    \n     \n \n function Person(name, gender) {\n this.name = name;\n this.gender = gender;\n }\n\n angular.module('messageFormatExample', ['ngMessageFormat'])\n .controller('ckCtrl', function($scope, $injector, $parse) {\n var people = [new Person('Alice', 'female'),\n new Person('Bob', 'male'),\n new Person('Charlie', 'male')];\n\n $scope.sender = new Person('Harry Potter', 'male');\n $scope.recipients = people.slice();\n\n $scope.setNumRecipients = function(n) {\n n = n > people.length ? people.length : n;\n $scope.recipients = people.slice(0, n);\n };\n\n $scope.setGender = function(person, gender) {\n person.gender = gender;\n };\n });\n \n    \n\n### Plural Syntax\n\nThe syntax for plural based message selection looks like the following:\n\n```text\n{{NUMERIC_EXPRESSION, plural,\n =0 {MESSAGE_WHEN_VALUE_IS_0}\n =1 {MESSAGE_WHEN_VALUE_IS_1}\n =2 {MESSAGE_WHEN_VALUE_IS_2}\n =3 {MESSAGE_WHEN_VALUE_IS_3}\n ...\n zero {MESSAGE_WHEN_PLURAL_CATEGORY_IS_ZERO}\n one {MESSAGE_WHEN_PLURAL_CATEGORY_IS_ONE}\n two {MESSAGE_WHEN_PLURAL_CATEGORY_IS_TWO}\n few {MESSAGE_WHEN_PLURAL_CATEGORY_IS_FEW}\n many {MESSAGE_WHEN_PLURAL_CATEGORY_IS_MANY}\n other {MESSAGE_WHEN_THERE_IS_NO_MATCH}\n}}\n```\n\nPlease note that whitespace (including newline) is generally insignificant except as part of the\nactual message text that occurs in curly braces. Whitespace is generally used to aid readability.\n\nHere, `NUMERIC_EXPRESSION` is an expression that evaluates to a numeric value based on which the\ndisplayed message should change based on pluralization rules.\n\nFollowing the AngularJS expression, you would denote the plural extension syntax by the `, plural,`\nsyntax element. The spaces there are optional.\n\nThis is followed by a list of selection keyword and corresponding message pairs. The \"other\"\nkeyword and corresponding message are **required** but you may have as few or as many of the other\ncategories as you need.\n\n#### Selection Keywords\n\nThe selection keywords can be either exact matches or language dependent [plural\ncategories](http://cldr.unicode.org/index/cldr-spec/plural-rules).\n\nExact matches are written as the equal sign followed by the exact value. `=0`, `=1`, `=2` and\n`=123` are all examples of exact matches. Note that there should be no space between the equal sign\nand the numeric value.\n\nPlural category matches are single words corresponding to the [plural\ncategories](http://cldr.unicode.org/index/cldr-spec/plural-rules) of the CLDR plural category spec.\nThese categories vary by locale. The \"en\" (English) locale, for example, defines just \"one\" and\n\"other\" while the \"ga\" (Irish) locale defines \"one\", \"two\", \"few\", \"many\" and \"other\". Typically,\nyou would just write the categories for your language. During translation, the translators will add\nor remove more categories depending on the target locale.\n\nExact matches always win over keyword matches. Therefore, if you define both `=0` and `zero`, when\nthe value of the expression is zero, the `=0` message is the one that will be selected. (The\nduplicate keyword categories are helpful when used with the optional `offset` syntax described\nlater.)\n\n\n#### Messages\n\nMessages immediately follow a selection keyword and are optionally preceded by whitespace. They are\nwritten in single curly braces (`{}`). They may contain AngularJS interpolation syntax inside them.\nIn addition, the `#` symbol is a placeholder for the actual numeric value of the expression.\n\n### Simple plural example\n\n```text\n{{numMessages, plural,\n =0 {You have no new messages}\n =1 {You have one new message}\n other {You have # new messages}\n}}\n```\n\nBecause these messages can themselves contain AngularJS expressions, you could also write this as\nfollows:\n\n```text\n{{numMessages, plural,\n =0 {You have no new messages}\n =1 {You have one new message}\n other {You have {{numMessages}} new messages}\n}}\n```\n\n\n### Plural syntax with optional `offset`\n\nThe plural syntax supports an optional `offset` syntax that is used in matching. It's simpler to\nexplain this with an example.\n\n```text\n{{recipients.length, plural, offset:1\n =0 {You gave no gifts}\n =1 {You gave {{recipients[0].name}} a gift}\n one {You gave {{recipients[0].name}} and one other person a gift}\n other {You gave {{recipients[0].name}} and # other people a gift}\n}}\n```\n\nWhen an `offset` is specified, the matching works as follows. First, the exact value of the AngularJS\nexpression is matched against the exact matches (i.e. `=N` selectors) to find a match. If there is\none, that message is used. If there was no match, then the offset value is subtracted from the\nvalue of the expression and locale specific pluralization rules are applied to this new value to\nobtain its plural category (such as “one”, “few”, “many”, etc.) and a match is attempted against the\nkeyword selectors and the matching message is used. If there was no match, then the “other”\ncategory (required) is used. The value of the `#` character inside a message is the value of\noriginal expression reduced by the offset value that was specified.\n\n### Escaping / Quoting\n\nYou will need to escape curly braces or the `#` character inside message texts if you want them to\nbe treated literally with no special meaning. You may quote/escape any character in your message\ntext by preceding it with a `\\` (backslash) character. The backslash character removes any special\nmeaning to the character that immediately follows it. Therefore, you can escape or quote the\nbackslash itself by preceding it with another backslash character.\n\n\n### Gender (aka select) Syntax\n\nThe gender support is provided by the more generic \"select\" syntax that is more akin to a switch\nstatement. It is general enough to support use for gender based messages.\n\nThe syntax for gender based message selection looks like the following:\n\n```text\n{{EXPRESSION, select,\n male {MESSAGE_WHEN_EXPRESSION_IS_MALE}\n female {MESSAGE_WHEN_EXPRESSION_IS_FEMALE}\n ...\n other {MESSAGE_WHEN_THERE_IS_NO_GENDER_MATCH}\n}}\n```\n\nPlease note that whitespace (including newline) is generally insignificant except as part of the\nactual message text that occurs in curly braces. Whitespace is generally used to aid readability.\n\nHere, `EXPRESSION` is an AngularJS expression that evaluates to the gender of the person that\nis used to select the message that should be displayed.\n\nThe AngularJS expression is followed by `, select,` where the spaces are optional.\n\nThis is followed by a list of selection keyword and corresponding message pairs. The \"other\"\nkeyword and corresponding message are **required** but you may have as few or as many of the other\ngender values as you need (i.e. it isn't restricted to male/female.) Note however, that the\nmatching is **case-sensitive**.\n\n#### Selection Keywords\n\nSelection keywords are simple words like \"male\" and \"female\". The keyword, \"other\", and its\ncorresponding message are required while others are optional. It is used when the AngularJS\nexpression does not match (case-insensitively) any of the other keywords specified.\n\n#### Messages\n\nMessages immediately follow a selection keyword and are optionally preceded by whitespace. They are\nwritten in single curly braces (`{}`). They may contain AngularJS interpolation syntax inside them.\n\n### Simple gender example\n\n```text\n{{friendGender, select,\n male {Invite him}\n female {Invite her}\n other {Invite them}\n}}\n```\n\n### Nesting\n\nAs mentioned in the syntax for plural and select, the embedded messages can contain AngularJS\ninterpolation syntax. Since you can use MessageFormat extensions in AngularJS interpolation, this\nallows you to nest plural and gender expressions in any order.\n\nPlease note that if these are intended to reach a translator and be translated, it is recommended\nthat the messages appear as a whole and not be split up.\n\n### Demonstration of nesting\n\nThis is taken from the above example.\n\n```text\n{{recipients.length, plural, offset:1\n =0 {You ({{sender.name}}) gave no gifts}\n =1 { {{ recipients[0].gender, select,\n male {You ({{sender.name}}) gave him ({{recipients[0].name}}) a gift.}\n female {You ({{sender.name}}) gave her ({{recipients[0].name}}) a gift.}\n other {You ({{sender.name}}) gave them ({{recipients[0].name}}) a gift.}\n }}\n }\n one { {{ recipients[0].gender, select,\n male {You ({{sender.name}}) gave him ({{recipients[0].name}}) and one other person a gift.}\n female {You ({{sender.name}}) gave her ({{recipients[0].name}}) and one other person a gift.}\n other {You ({{sender.name}}) gave them ({{recipients[0].name}}) and one other person a gift.}\n }}\n }\n other {You ({{sender.name}}) gave {{recipients.length}} people gifts. }\n}}\n```\n\n### Differences from the ICU MessageFormat syntax\n\nThis section is useful to you if you're already familiar with the ICU MessageFormat syntax.\n\nThis syntax extension, while based on MessageFormat, has been designed to be backwards compatible\nwith existing AngularJS interpolation expressions. The key rule is simply this: **All\ninterpolations are done inside double curlies.** The top level comma operator after an expression\ninside the double curlies causes MessageFormat extensions to be recognized. Such a top level comma\nis otherwise illegal in an AngularJS expression and is used by MessageFormat to specify the function\n(such as plural/select) and it's related syntax.\n\nTo understand the extension, take a look at the ICU MessageFormat syntax as specified by the ICU\ndocumentation. Anywhere in that MessageFormat that you have regular message text and you want to\nsubstitute an expression, just put it in double curlies instead of single curlies that MessageFormat\ndictates. This has a huge advantage. **You are no longer limited to simple identifiers for\nsubstitutions**. Because you are using double curlies, you can stick in any arbitrary interpolation\nsyntax there, including nesting more MessageFormat expressions!\n\n### Further Reading\nFor more details, please refer to our [design doc](https://docs.google.com/a/google.com/document/d/1pbtW2yvtmFBikfRrJd8VAsabiFkKezmYZ_PbgdjQOVU/edit).\nYou can read more about the ICU MessageFormat syntax at\n[Formatting Messages | ICU User Guide](http://userguide.icu-project.org/formatparse/messages#TOC-MessageFormat).\n" }, { "path": "docs/content/guide/ie.ngdoc", "content": "@ngdoc overview\n@name Internet Explorer Compatibility\n@sortOrder 530\n@description\n\n# Internet Explorer Compatibility\n\n
    \n**Note:** AngularJS 1.3 has dropped support for IE8. Read more about it on\n[our blog](https://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html).\nAngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time\naddressing issues specific to IE8 or earlier.\n
    \n\nThis document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML\nattributes and tags. Read this document if you are planning on deploying your AngularJS application\non IE.\n\nThe project currently supports and will attempt to fix bugs for IE9 and above. The continuous\nintegration server runs all unit tests against IE9, IE10, and IE11. See\n[CircleCI](https://circleci.com/gh/angular/workflows/angular.js/tree/master).\n\nWe do not run tests on IE8 and below. A subset of the AngularJS functionality may work on these\nbrowsers, but it is up to you to test and decide whether it works for your particular app.\n\n\nTo ensure your AngularJS application works on IE please consider:\n\n1. Use `ng-style` tags instead of `style=\"{{ someCss }}\"`. The latter works in Chrome, Firefox,\n Safari and Edge but does not work in Internet Explorer (even 11).\n2. For the `type` attribute of buttons, use `ng-attr-type` tags instead of\n `type=\"{{ someExpression }}\"`. If using the latter, Internet Explorer overwrites the expression\n with `type=\"submit\"` before AngularJS has a chance to interpolate it.\n3. For the `value` attribute of progress, use `ng-attr-value` tags instead of\n `value=\"{{ someExpression}}\"`. If using the latter, Internet Explorer overwrites the expression\n with `value=\"0\"` before AngularJS has a chance to interpolate it.\n4. For the `placeholder` attribute of textarea, use `ng-attr-placeholder` tags instead\n of `placeholder=\"{{ someExpression }}\"`. If using the latter, Internet Explorer will error\n on accessing the `nodeValue` on a parentless `TextNode` in Internet Explorer 10 & 11\n (see [issue 5025](https://github.com/angular/angular.js/issues/5025)).\n5. Using the `disabled` attribute on an element that has\n descendant form controls can result in unexpected behavior in Internet Explorer 11.\n For example, the value of descendant input elements with `ng-model` will not reflect\n the model (or changes to the model), and the value of the `placeholder` attribute will be\n inserted as the input's value. Descendant select elements will also be inoperable, as if they\n had the `disabled` attribute applied to them, which may not be the intended effect.\n To work around this unexpected behavior, 1) avoid using the identifier `disabled` for custom attribute\n directives that are on elements with descendant form controls, and 2) avoid using `disabled` as an identifier\n for an attribute passed to a custom directive that has descendant form controls.\n" }, { "path": "docs/content/guide/index.ngdoc", "content": "@ngdoc overview\n@name Developer Guide\n@description\n\n# Guide to AngularJS Documentation\n\nOn this page, you will find a list of official AngularJS resources on various topics.\n\nJust starting out with AngularJS? Try working through our step by step tutorial or try\nbuilding on our seed project.\n\n* {@link tutorial/index Official AngularJS Tutorial}\n* [AngularJS Seed](https://github.com/angular/angular-seed)\n\nReady to find out more about AngularJS?\n\n* {@link guide/introduction What is AngularJS?}\n* {@link guide/concepts Conceptual Overview}\n\n## Core Concepts\n\n### Templates\n\nIn AngularJS applications, you move the job of filling page templates with data from the server to the client. The result is a system better structured for dynamic page updates. Below are the core features you'll use.\n\n* {@link guide/databinding Data binding}\n* {@link guide/expression Expressions}\n* {@link guide/interpolation Interpolation}\n* {@link guide/directive Directives}\n* {@link ngRoute.$route Views and routes (see the example)}\n* {@link guide/filter Filters}\n* {@link guide/compiler HTML compiler}\n* {@link guide/forms Forms}\n\n### Application Structure\n\n* **App wiring:** {@link guide/di Dependency injection}\n* **Exposing model to templates:** {@link guide/scope Scopes}\n* **Bootstrap:** {@link guide/bootstrap Bootstrapping an app}\n* **Communicating with servers:** {@link ng.$http $http}, {@link ngResource.$resource $resource}\n\n### Other Features\n\n* **Animation:** {@link guide/animations Core concepts}, {@link ngAnimate ngAnimate API}\n* **Security:** {@link guide/security Security Docs}, {@link ng.$sce Strict Contextual Escaping}, {@link ng.directive:ngCsp Content Security Policy}, {@link ngSanitize.$sanitize $sanitize}, [video](https://www.youtube.com/watch?v=18ifoT-Id54)\n* **Internationalization and Localization:** {@link guide/i18n AngularJS Guide to i18n and l10n}, {@link ng.filter:date date filter}, {@link ng.filter:currency currency filter}, [Creating multilingual support](https://blog.novanet.no/creating-multilingual-support-using-angularjs/)\n* **Touch events:** {@link ngTouch Touch events}\n* **Accessibility:** {@link guide/accessibility ngAria}\n\n### Testing\n\n* **Unit testing:** [Karma](http://karma-runner.github.io), {@link guide/unit-testing Unit testing}, {@link guide/services#unit-testing Testing services},\n* **End-to-End Testing:** [Protractor](https://github.com/angular/protractor), {@link guide/e2e-testing e2e testing guide}\n\n\n## Community Resources\n\nWe have set up a guide to many resources provided by the community, where you can find lots\nof additional information and material on these topics, a list of complimentary libraries, and much more.\n\n* {@link guide/external-resources External AngularJS resources}\n\n\n## Getting Help\n\nThe recipe for getting help on your unique issue is to create an example that could work (even if it doesn't) in a shareable example on [Plunker](http://plnkr.co/), [JSFiddle](http://jsfiddle.net/), or similar site and then post to one of the following:\n\n* [Stackoverflow.com](http://stackoverflow.com/search?q=angularjs)\n* [AngularJS mailing list](https://groups.google.com/forum/#!forum/angular)\n* [AngularJS IRC channel](http://webchat.freenode.net/?channels=angularjs&uio=d4)\n\n## Official Communications\n\nOfficial announcements, news and releases are posted to our blog, G+ and Twitter:\n\n* [AngularJS Blog](http://blog.angularjs.org/)\n* [Google+](https://plus.google.com/u/0/+AngularJS)\n* [Twitter](https://twitter.com/angular)\n* [AngularJS on YouTube](http://youtube.com/angularjs)\n\n## Contributing to AngularJS\n\nThough we have a core group of core contributors at Google, AngularJS is an open source project with hundreds of contributors.\nWe'd love you to be one of them. When you're ready, please read the {@link misc/contribute Guide for contributing to AngularJS}.\n\n## Something Missing?\n\nDidn't find what you're looking for here? Check out the {@link guide/external-resources External AngularJS resources guide}.\n\nIf you have awesome AngularJS resources that belong on that page, please tell us about them on\n[Google+](https://plus.google.com/u/0/+AngularJS) or [Twitter](https://twitter.com/angularjs).\n\n" }, { "path": "docs/content/guide/interpolation.ngdoc", "content": "@ngdoc overview\n@name Interpolation\n@sortOrder 275\n@description\n\n# Interpolation and data-binding\n\nInterpolation markup with embedded {@link guide/expression expressions} is used by AngularJS to\nprovide data-binding to text nodes and attribute values.\n\nAn example of interpolation is shown below:\n\n```html\nHello {{username}}!\n```\n\n### How text and attribute bindings work\n\nDuring the compilation process the {@link ng.$compile compiler} uses the {@link ng.$interpolate $interpolate}\nservice to see if text nodes and element attributes contain interpolation markup with embedded expressions.\n\nIf that is the case, the compiler adds an interpolateDirective to the node and\nregisters {@link ng.$rootScope.Scope#$watch watches} on the computed interpolation function,\nwhich will update the corresponding text nodes or attribute values as part of the\nnormal {@link ng.$rootScope.Scope#$digest digest} cycle.\n\nNote that the interpolateDirective has a priority of 100 and sets up the watch in the preLink function.\n\n### How the string representation is computed\n\nIf the interpolated value is not a `String`, it is computed as follows:\n- `undefined` and `null` are converted to `''`\n- if the value is an object that is not a `Number`, `Date` or `Array`, $interpolate looks for\na custom `toString()` function on the object, and uses that. Custom means that\n`myObject.toString !== Object.prototype.toString`.\n- if the above doesn't apply, `JSON.stringify` is used.\n\n### Binding to boolean attributes\n\nAttributes such as `disabled` are called `boolean` attributes, because their presence means `true` and\ntheir absence means `false`. We cannot use normal attribute bindings with them, because the HTML\nspecification does not require browsers to preserve the values of boolean attributes. This means that\nif we put an AngularJS interpolation expression into such an attribute then the binding information\nwould be lost, because the browser ignores the attribute value.\n\nIn the following example, the interpolation information would be ignored and the browser would simply\ninterpret the attribute as present, meaning that the button would always be disabled.\n\n```html\n Disabled: \n \n```\n\nFor this reason, AngularJS provides special `ng`-prefixed directives for the following boolean attributes:\n{@link ngDisabled `disabled`}, {@link ngRequired `required`}, {@link ngSelected `selected`},\n{@link ngChecked `checked`}, {@link ngReadonly `readOnly`} , and {@link ngOpen `open`}.\n\nThese directives take an expression inside the attribute, and set the corresponding boolean attribute\nto true when the expression evaluates to truthy.\n\n```html\n Disabled: \n \n```\n\n### `ngAttr` for binding to arbitrary attributes\n\nWeb browsers are sometimes picky about what values they consider valid for attributes.\n\nFor example, considering this template:\n\n```html\n\n \n\n```\n\nWe would expect AngularJS to be able to bind to this, but when we check the console we see\nsomething like `Error: Invalid value for attribute cx=\"{{cx}}\"`. Because of the SVG DOM API's\nrestrictions, you cannot simply write `cx=\"{{cx}}\"`.\n\nWith `ng-attr-cx` you can work around this problem.\n\nIf an attribute with a binding is prefixed with the `ngAttr` prefix (denormalized as `ng-attr-`)\nthen during the binding it will be applied to the corresponding unprefixed attribute. This allows\nyou to bind to attributes that would otherwise be eagerly processed by browsers\n(e.g. an SVG element's `circle[cx]` attributes). When using `ngAttr`, the `allOrNothing` flag of\n{@link ng.$interpolate $interpolate} is used, so if any expression in the interpolated string\nresults in `undefined`, the attribute is removed and not added to the element.\n\nFor example, we could fix the example above by instead writing:\n\n```html\n\n \n\n```\n\nIf one wants to modify a camelcased attribute (SVG elements have valid camelcased attributes),\nsuch as `viewBox` on the `svg` element, one can use underscores to denote that the attribute to bind\nto is naturally camelcased.\n\nFor example, to bind to `viewBox`, we can write:\n\n```html\n\n\n```\n\nOther attributes may also not work as expected when they contain interpolation markup, and\ncan be used with `ngAttr` instead. The following is a list of known problematic attributes:\n\n- **size** in `
    \n
    \n
    \n \n \n it('should auto compile', function() {\n var textarea = $('textarea');\n var output = $('div[compile]');\n // The initial state reads 'Hello AngularJS'.\n expect(output.getText()).toBe('Hello AngularJS');\n textarea.clear();\n textarea.sendKeys('{{name}}!');\n expect(output.getText()).toBe('AngularJS!');\n });\n \n \n\n *\n *\n * @param {string|DOMElement} element Element or HTML string to compile into a template function.\n * @param {function(angular.Scope, cloneAttachFn=)} transclude function available to directives - DEPRECATED.\n *\n *
    \n * **Note:** Passing a `transclude` function to the $compile function is deprecated, as it\n * e.g. will not use the right outer scope. Please pass the transclude function as a\n * `parentBoundTranscludeFn` to the link function instead.\n *
    \n *\n * @param {number} maxPriority only apply directives lower than given priority (Only effects the\n * root element(s), not their children)\n * @returns {function(scope, cloneAttachFn=, options=)} a link function which is used to bind template\n * (a DOM element/tree) to a scope. Where:\n *\n * * `scope` - A {@link ng.$rootScope.Scope Scope} to bind to.\n * * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the\n * `template` and call the `cloneAttachFn` function allowing the caller to attach the\n * cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is\n * called as:
    `cloneAttachFn(clonedElement, scope)` where:\n *\n * * `clonedElement` - is a clone of the original `element` passed into the compiler.\n * * `scope` - is the current scope with which the linking function is working with.\n *\n * * `options` - An optional object hash with linking options. If `options` is provided, then the following\n * keys may be used to control linking behavior:\n *\n * * `parentBoundTranscludeFn` - the transclude function made available to\n * directives; if given, it will be passed through to the link functions of\n * directives found in `element` during compilation.\n * * `transcludeControllers` - an object hash with keys that map controller names\n * to a hash with the key `instance`, which maps to the controller instance;\n * if given, it will make the controllers available to directives on the compileNode:\n * ```\n * {\n * parent: {\n * instance: parentControllerInstance\n * }\n * }\n * ```\n * * `futureParentElement` - defines the parent to which the `cloneAttachFn` will add\n * the cloned elements; only needed for transcludes that are allowed to contain non HTML\n * elements (e.g. SVG elements). See also the `directive.controller` property.\n *\n * Calling the linking function returns the element of the template. It is either the original\n * element passed in, or the clone of the element if the `cloneAttachFn` is provided.\n *\n * After linking the view is not updated until after a call to `$digest`, which typically is done by\n * AngularJS automatically.\n *\n * If you need access to the bound view, there are two ways to do it:\n *\n * - If you are not asking the linking function to clone the template, create the DOM element(s)\n * before you send them to the compiler and keep this reference around.\n * ```js\n * var element = angular.element('

    {{total}}

    ');\n * $compile(element)(scope);\n * ```\n *\n * - if on the other hand, you need the element to be cloned, the view reference from the original\n * example would not point to the clone, but rather to the original template that was cloned. In\n * this case, you can access the clone either via the `cloneAttachFn` or the value returned by the\n * linking function:\n * ```js\n * var templateElement = angular.element('

    {{total}}

    ');\n * var clonedElement = $compile(templateElement)(scope, function(clonedElement, scope) {\n * // Attach the clone to DOM document at the right place.\n * });\n *\n * // Now we have reference to the cloned DOM via `clonedElement`.\n * // NOTE: The `clonedElement` returned by the linking function is the same as the\n * // `clonedElement` passed to `cloneAttachFn`.\n * ```\n *\n *\n * For information on how the compiler works, see the\n * {@link guide/compiler AngularJS HTML Compiler} section of the Developer Guide.\n *\n * @knownIssue\n *\n * ### Double Compilation\n *\n Double compilation occurs when an already compiled part of the DOM gets\n compiled again. This is an undesired effect and can lead to misbehaving directives, performance issues,\n and memory leaks. Refer to the Compiler Guide {@link guide/compiler#double-compilation-and-how-to-avoid-it\n section on double compilation} for an in-depth explanation and ways to avoid it.\n\n * @knownIssue\n\n ### Issues with `replace: true`\n *\n *
    \n * **Note**: {@link $compile#-replace- `replace: true`} is deprecated and not recommended to use,\n * mainly due to the issues listed here. It has been completely removed in the new Angular.\n *
    \n *\n * #### Attribute values are not merged\n *\n * When a `replace` directive encounters the same attribute on the original and the replace node,\n * it will simply deduplicate the attribute and join the values with a space or with a `;` in case of\n * the `style` attribute.\n * ```html\n * Original Node: \n * Replace Template: \n * Result: \n * ```\n *\n * That means attributes that contain AngularJS expressions will not be merged correctly, e.g.\n * {@link ngShow} or {@link ngClass} will cause a {@link $parse} error:\n *\n * ```html\n * Original Node: \n * Replace Template: \n * Result: \n * ```\n *\n * See issue [#5695](https://github.com/angular/angular.js/issues/5695).\n *\n * #### Directives are not deduplicated before compilation\n *\n * When the original node and the replace template declare the same directive(s), they will be\n * {@link guide/compiler#double-compilation-and-how-to-avoid-it compiled twice} because the compiler\n * does not deduplicate them. In many cases, this is not noticeable, but e.g. {@link ngModel} will\n * attach `$formatters` and `$parsers` twice.\n *\n * See issue [#2573](https://github.com/angular/angular.js/issues/2573).\n *\n * #### `transclude: element` in the replace template root can have unexpected effects\n *\n * When the replace template has a directive at the root node that uses\n * {@link $compile#-transclude- `transclude: element`}, e.g.\n * {@link ngIf} or {@link ngRepeat}, the DOM structure or scope inheritance can be incorrect.\n * See the following issues:\n *\n * - Incorrect scope on replaced element:\n * [#9837](https://github.com/angular/angular.js/issues/9837)\n * - Different DOM between `template` and `templateUrl`:\n * [#10612](https://github.com/angular/angular.js/issues/14326)\n *\n */\n\n/**\n * @ngdoc directive\n * @name ngProp\n * @restrict A\n * @element ANY\n *\n * @usage\n *\n * ```html\n * \n * \n * ```\n *\n * or with uppercase letters in property (e.g. \"propName\"):\n *\n *\n * ```html\n * \n * \n * ```\n *\n *\n * @description\n * The `ngProp` directive binds an expression to a DOM element property.\n * `ngProp` allows writing to arbitrary properties by including\n * the property name in the attribute, e.g. `ng-prop-value=\"'my value'\"` binds 'my value' to\n * the `value` property.\n *\n * Usually, it's not necessary to write to properties in AngularJS, as the built-in directives\n * handle the most common use cases (instead of the above example, you would use {@link ngValue}).\n *\n * However, [custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)\n * often use custom properties to hold data, and `ngProp` can be used to provide input to these\n * custom elements.\n *\n * ## Binding to camelCase properties\n *\n * Since HTML attributes are case-insensitive, camelCase properties like `innerHTML` must be escaped.\n * AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so\n * `innerHTML` must be written as `ng-prop-inner_h_t_m_l=\"expression\"` (Note that this is just an\n * example, and for binding HTML {@link ngBindHtml} should be used.\n *\n * ## Security\n *\n * Binding expressions to arbitrary properties poses a security risk, as properties like `innerHTML`\n * can insert potentially dangerous HTML into the application, e.g. script tags that execute\n * malicious code.\n * For this reason, `ngProp` applies Strict Contextual Escaping with the {@link ng.$sce $sce service}.\n * This means vulnerable properties require their content to be \"trusted\", based on the\n * context of the property. For example, the `innerHTML` is in the `HTML` context, and the\n * `iframe.src` property is in the `RESOURCE_URL` context, which requires that values written to\n * this property are trusted as a `RESOURCE_URL`.\n *\n * This can be set explicitly by calling $sce.trustAs(type, value) on the value that is\n * trusted before passing it to the `ng-prop-*` directive. There are exist shorthand methods for\n * each context type in the form of {@link ng.$sce#trustAsResourceUrl $sce.trustAsResourceUrl()} et al.\n *\n * In some cases you can also rely upon automatic sanitization of untrusted values - see below.\n *\n * Based on the context, other options may exist to mark a value as trusted / configure the behavior\n * of {@link ng.$sce}. For example, to restrict the `RESOURCE_URL` context to specific origins, use\n * the {@link $sceDelegateProvider#trustedResourceUrlList trustedResourceUrlList()}\n * and {@link $sceDelegateProvider#bannedResourceUrlList bannedResourceUrlList()}.\n *\n * {@link ng.$sce#what-trusted-context-types-are-supported- Find out more about the different context types}.\n *\n * ### HTML Sanitization\n *\n * By default, `$sce` will throw an error if it detects untrusted HTML content, and will not bind the\n * content.\n * However, if you include the {@link ngSanitize ngSanitize module}, it will try to sanitize the\n * potentially dangerous HTML, e.g. strip non-trusted tags and attributes when binding to\n * `innerHTML`.\n *\n * @example\n * ### Binding to different contexts\n *\n * \n * \n * angular.module('exampleNgProp', [])\n * .component('main', {\n * templateUrl: 'main.html',\n * controller: function($sce) {\n * this.safeContent = 'Safe content';\n * this.unsafeContent = '';\n * this.trustedUnsafeContent = $sce.trustAsHtml(this.unsafeContent);\n * }\n * });\n * \n * \n *
    \n *
    \n * Binding to a property without security context:\n *
    \n * innerText (safeContent)\n *
    \n *\n *
    \n * \"Safe\" content that requires a security context will throw because the contents could potentially be dangerous ...\n *
    \n * innerHTML (safeContent)\n *
    \n *\n *
    \n * ... so that actually dangerous content cannot be executed:\n *
    \n * innerHTML (unsafeContent)\n *
    \n *\n *
    \n * ... but unsafe Content that has been trusted explicitly works - only do this if you are 100% sure!\n *
    \n * innerHTML (trustedUnsafeContent)\n *
    \n *
    \n *     \n * \n *
    \n *     \n * \n * .prop-unit {\n * margin-bottom: 10px;\n * }\n *\n * .prop-binding {\n * min-height: 30px;\n * border: 1px solid blue;\n * }\n *\n * .prop-note {\n * font-family: Monospace;\n * }\n * \n *     \n *\n *\n * @example\n * ### Binding to innerHTML with ngSanitize\n *\n * \n * \n * angular.module('exampleNgProp', ['ngSanitize'])\n * .component('main', {\n * templateUrl: 'main.html',\n * controller: function($sce) {\n * this.safeContent = 'Safe content';\n * this.unsafeContent = '';\n * this.trustedUnsafeContent = $sce.trustAsHtml(this.unsafeContent);\n * }\n * });\n * \n * \n *
    \n *
    \n * \"Safe\" content will be sanitized ...\n *
    \n * innerHTML (safeContent)\n *
    \n *\n *
    \n * ... as will dangerous content:\n *
    \n * innerHTML (unsafeContent)\n *
    \n *\n *
    \n * ... and content that has been trusted explicitly works the same as without ngSanitize:\n *
    \n * innerHTML (trustedUnsafeContent)\n *
    \n *
    \n *     \n * \n *
    \n *     \n * \n * .prop-unit {\n * margin-bottom: 10px;\n * }\n *\n * .prop-binding {\n * min-height: 30px;\n * border: 1px solid blue;\n * }\n *\n * .prop-note {\n * font-family: Monospace;\n * }\n * \n *     \n *\n */\n\n/** @ngdoc directive\n * @name ngOn\n * @restrict A\n * @element ANY\n *\n * @usage\n *\n * ```html\n * \n * \n * ```\n *\n * or with uppercase letters in property (e.g. \"eventName\"):\n *\n *\n * ```html\n * \n * \n * ```\n *\n * @description\n * The `ngOn` directive adds an event listener to a DOM element via\n * {@link angular.element angular.element().on()}, and evaluates an expression when the event is\n * fired.\n * `ngOn` allows adding listeners for arbitrary events by including\n * the event name in the attribute, e.g. `ng-on-drop=\"onDrop()\"` executes the 'onDrop()' expression\n * when the `drop` event is fired.\n *\n * AngularJS provides specific directives for many events, such as {@link ngClick}, so in most\n * cases it is not necessary to use `ngOn`. However, AngularJS does not support all events\n * (e.g. the `drop` event in the example above), and new events might be introduced in later DOM\n * standards.\n *\n * Another use-case for `ngOn` is listening to\n * [custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events)\n * fired by\n * [custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements).\n *\n * ## Binding to camelCase properties\n *\n * Since HTML attributes are case-insensitive, camelCase properties like `myEvent` must be escaped.\n * AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so\n * `myEvent` must be written as `ng-on-my_event=\"expression\"`.\n *\n * @example\n * ### Bind to built-in DOM events\n *\n * \n * \n * angular.module('exampleNgOn', [])\n * .component('main', {\n * templateUrl: 'main.html',\n * controller: function() {\n * this.clickCount = 0;\n * this.mouseoverCount = 0;\n *\n * this.loadingState = 0;\n * }\n * });\n * \n * \n *
    \n * This is equivalent to `ngClick` and `ngMouseover`:
    \n * Click or mouseover
    \n * clickCount: {{$ctrl.clickCount}}
    \n * mouseover: {{$ctrl.mouseoverCount}}\n *\n *
    \n *\n * For the `error` and `load` event on images no built-in AngularJS directives exist:
    \n *
    \n *
    \n * Image is loading\n * Image load error\n * Image loaded successfully\n *
    \n *
    \n *     \n * \n *
    \n *     \n *     \n *\n *\n * @example\n * ### Bind to custom DOM events\n *\n * \n * \n * angular.module('exampleNgOn', [])\n * .component('main', {\n * templateUrl: 'main.html',\n * controller: function() {\n * this.eventLog = '';\n *\n * this.listener = function($event) {\n * this.eventLog = 'Event with type \"' + $event.type + '\" fired at ' + $event.detail;\n * };\n * }\n * })\n * .component('childComponent', {\n * templateUrl: 'child.html',\n * controller: function($element) {\n * this.fireEvent = function() {\n * var event = new CustomEvent('customtype', { detail: new Date()});\n *\n * $element[0].dispatchEvent(event);\n * };\n * }\n * });\n * \n * \n *
    \n * Event log: {{$ctrl.eventLog}}\n *     \n * \n \n * \n * \n *
    \n *     \n *     \n */\n\nvar $compileMinErr = minErr('$compile');\n\nfunction UNINITIALIZED_VALUE() {}\nvar _UNINITIALIZED_VALUE = new UNINITIALIZED_VALUE();\n\n/**\n * @ngdoc provider\n * @name $compileProvider\n *\n * @description\n */\n$CompileProvider.$inject = ['$provide', '$$sanitizeUriProvider'];\n/** @this */\nfunction $CompileProvider($provide, $$sanitizeUriProvider) {\n var hasDirectives = {},\n Suffix = 'Directive',\n COMMENT_DIRECTIVE_REGEXP = /^\\s*directive:\\s*([\\w-]+)\\s+(.*)$/,\n CLASS_DIRECTIVE_REGEXP = /(([\\w-]+)(?::([^;]+))?;?)/,\n ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),\n REQUIRE_PREFIX_REGEXP = /^(?:(\\^\\^?)?(\\?)?(\\^\\^?)?)?/;\n\n // Ref: http://developers.whatwg.org/webappapis.html#event-handler-idl-attributes\n // The assumption is that future DOM event attribute names will begin with\n // 'on' and be composed of only English letters.\n var EVENT_HANDLER_ATTR_REGEXP = /^(on[a-z]+|formaction)$/;\n var bindingCache = createMap();\n\n function parseIsolateBindings(scope, directiveName, isController) {\n var LOCAL_REGEXP = /^([@&]|[=<](\\*?))(\\??)\\s*([\\w$]*)$/;\n\n var bindings = createMap();\n\n forEach(scope, function(definition, scopeName) {\n definition = definition.trim();\n\n if (definition in bindingCache) {\n bindings[scopeName] = bindingCache[definition];\n return;\n }\n var match = definition.match(LOCAL_REGEXP);\n\n if (!match) {\n throw $compileMinErr('iscp',\n 'Invalid {3} for directive \\'{0}\\'.' +\n ' Definition: {... {1}: \\'{2}\\' ...}',\n directiveName, scopeName, definition,\n (isController ? 'controller bindings definition' :\n 'isolate scope definition'));\n }\n\n bindings[scopeName] = {\n mode: match[1][0],\n collection: match[2] === '*',\n optional: match[3] === '?',\n attrName: match[4] || scopeName\n };\n if (match[4]) {\n bindingCache[definition] = bindings[scopeName];\n }\n });\n\n return bindings;\n }\n\n function parseDirectiveBindings(directive, directiveName) {\n var bindings = {\n isolateScope: null,\n bindToController: null\n };\n if (isObject(directive.scope)) {\n if (directive.bindToController === true) {\n bindings.bindToController = parseIsolateBindings(directive.scope,\n directiveName, true);\n bindings.isolateScope = {};\n } else {\n bindings.isolateScope = parseIsolateBindings(directive.scope,\n directiveName, false);\n }\n }\n if (isObject(directive.bindToController)) {\n bindings.bindToController =\n parseIsolateBindings(directive.bindToController, directiveName, true);\n }\n if (bindings.bindToController && !directive.controller) {\n // There is no controller\n throw $compileMinErr('noctrl',\n 'Cannot bind to controller without directive \\'{0}\\'s controller.',\n directiveName);\n }\n return bindings;\n }\n\n function assertValidDirectiveName(name) {\n var letter = name.charAt(0);\n if (!letter || letter !== lowercase(letter)) {\n throw $compileMinErr('baddir', 'Directive/Component name \\'{0}\\' is invalid. The first character must be a lowercase letter', name);\n }\n if (name !== name.trim()) {\n throw $compileMinErr('baddir',\n 'Directive/Component name \\'{0}\\' is invalid. The name should not contain leading or trailing whitespaces',\n name);\n }\n }\n\n function getDirectiveRequire(directive) {\n var require = directive.require || (directive.controller && directive.name);\n\n if (!isArray(require) && isObject(require)) {\n forEach(require, function(value, key) {\n var match = value.match(REQUIRE_PREFIX_REGEXP);\n var name = value.substring(match[0].length);\n if (!name) require[key] = match[0] + key;\n });\n }\n\n return require;\n }\n\n function getDirectiveRestrict(restrict, name) {\n if (restrict && !(isString(restrict) && /[EACM]/.test(restrict))) {\n throw $compileMinErr('badrestrict',\n 'Restrict property \\'{0}\\' of directive \\'{1}\\' is invalid',\n restrict,\n name);\n }\n\n return restrict || 'EA';\n }\n\n /**\n * @ngdoc method\n * @name $compileProvider#directive\n * @kind function\n *\n * @description\n * Register a new directive with the compiler.\n *\n * @param {string|Object} name Name of the directive in camel-case (i.e. `ngBind` which will match\n * as `ng-bind`), or an object map of directives where the keys are the names and the values\n * are the factories.\n * @param {Function|Array} directiveFactory An injectable directive factory function. See the\n * {@link guide/directive directive guide} and the {@link $compile compile API} for more info.\n * @returns {ng.$compileProvider} Self for chaining.\n */\n this.directive = function registerDirective(name, directiveFactory) {\n assertArg(name, 'name');\n assertNotHasOwnProperty(name, 'directive');\n if (isString(name)) {\n assertValidDirectiveName(name);\n assertArg(directiveFactory, 'directiveFactory');\n if (!hasDirectives.hasOwnProperty(name)) {\n hasDirectives[name] = [];\n $provide.factory(name + Suffix, ['$injector', '$exceptionHandler',\n function($injector, $exceptionHandler) {\n var directives = [];\n forEach(hasDirectives[name], function(directiveFactory, index) {\n try {\n var directive = $injector.invoke(directiveFactory);\n if (isFunction(directive)) {\n directive = { compile: valueFn(directive) };\n } else if (!directive.compile && directive.link) {\n directive.compile = valueFn(directive.link);\n }\n directive.priority = directive.priority || 0;\n directive.index = index;\n directive.name = directive.name || name;\n directive.require = getDirectiveRequire(directive);\n directive.restrict = getDirectiveRestrict(directive.restrict, name);\n directive.$$moduleName = directiveFactory.$$moduleName;\n directives.push(directive);\n } catch (e) {\n $exceptionHandler(e);\n }\n });\n return directives;\n }]);\n }\n hasDirectives[name].push(directiveFactory);\n } else {\n forEach(name, reverseParams(registerDirective));\n }\n return this;\n };\n\n /**\n * @ngdoc method\n * @name $compileProvider#component\n * @module ng\n * @param {string|Object} name Name of the component in camelCase (i.e. `myComp` which will match ``),\n * or an object map of components where the keys are the names and the values are the component definition objects.\n * @param {Object} options Component definition object (a simplified\n * {@link ng.$compile#directive-definition-object directive definition object}),\n * with the following properties (all optional):\n *\n * - `controller` – `{(string|function()=}` – controller constructor function that should be\n * associated with newly created scope or the name of a {@link ng.$compile#-controller-\n * registered controller} if passed as a string. An empty `noop` function by default.\n * - `controllerAs` – `{string=}` – identifier name for to reference the controller in the component's scope.\n * If present, the controller will be published to scope under the `controllerAs` name.\n * If not present, this will default to be `$ctrl`.\n * - `template` – `{string=|function()=}` – html template as a string or a function that\n * returns an html template as a string which should be used as the contents of this component.\n * Empty string by default.\n *\n * If `template` is a function, then it is {@link auto.$injector#invoke injected} with\n * the following locals:\n *\n * - `$element` - Current element\n * - `$attrs` - Current attributes object for the element\n *\n * - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html\n * template that should be used as the contents of this component.\n *\n * If `templateUrl` is a function, then it is {@link auto.$injector#invoke injected} with\n * the following locals:\n *\n * - `$element` - Current element\n * - `$attrs` - Current attributes object for the element\n *\n * - `bindings` – `{object=}` – defines bindings between DOM attributes and component properties.\n * Component properties are always bound to the component controller and not to the scope.\n * See {@link ng.$compile#-bindtocontroller- `bindToController`}.\n * - `transclude` – `{boolean=}` – whether {@link $compile#transclusion content transclusion} is enabled.\n * Disabled by default.\n * - `require` - `{Object=}` - requires the controllers of other directives and binds them to\n * this component's controller. The object keys specify the property names under which the required\n * controllers (object values) will be bound. See {@link ng.$compile#-require- `require`}.\n * - `$...` – additional properties to attach to the directive factory function and the controller\n * constructor function. (This is used by the component router to annotate)\n *\n * @returns {ng.$compileProvider} the compile provider itself, for chaining of function calls.\n * @description\n * Register a **component definition** with the compiler. This is a shorthand for registering a special\n * type of directive, which represents a self-contained UI component in your application. Such components\n * are always isolated (i.e. `scope: {}`) and are always restricted to elements (i.e. `restrict: 'E'`).\n *\n * Component definitions are very simple and do not require as much configuration as defining general\n * directives. Component definitions usually consist only of a template and a controller backing it.\n *\n * In order to make the definition easier, components enforce best practices like use of `controllerAs`,\n * `bindToController`. They always have **isolate scope** and are restricted to elements.\n *\n * Here are a few examples of how you would usually define components:\n *\n * ```js\n * var myMod = angular.module(...);\n * myMod.component('myComp', {\n * template: '
    My name is {{$ctrl.name}}
    ',\n * controller: function() {\n * this.name = 'shahar';\n * }\n * });\n *\n * myMod.component('myComp', {\n * template: '
    My name is {{$ctrl.name}}
    ',\n * bindings: {name: '@'}\n * });\n *\n * myMod.component('myComp', {\n * templateUrl: 'views/my-comp.html',\n * controller: 'MyCtrl',\n * controllerAs: 'ctrl',\n * bindings: {name: '@'}\n * });\n *\n * ```\n * For more examples, and an in-depth guide, see the {@link guide/component component guide}.\n *\n *
    \n * See also {@link ng.$compileProvider#directive $compileProvider.directive()}.\n */\n this.component = function registerComponent(name, options) {\n if (!isString(name)) {\n forEach(name, reverseParams(bind(this, registerComponent)));\n return this;\n }\n\n var controller = options.controller || function() {};\n\n function factory($injector) {\n function makeInjectable(fn) {\n if (isFunction(fn) || isArray(fn)) {\n return /** @this */ function(tElement, tAttrs) {\n return $injector.invoke(fn, this, {$element: tElement, $attrs: tAttrs});\n };\n } else {\n return fn;\n }\n }\n\n var template = (!options.template && !options.templateUrl ? '' : options.template);\n var ddo = {\n controller: controller,\n controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',\n template: makeInjectable(template),\n templateUrl: makeInjectable(options.templateUrl),\n transclude: options.transclude,\n scope: {},\n bindToController: options.bindings || {},\n restrict: 'E',\n require: options.require\n };\n\n // Copy annotations (starting with $) over to the DDO\n forEach(options, function(val, key) {\n if (key.charAt(0) === '$') ddo[key] = val;\n });\n\n return ddo;\n }\n\n // TODO(pete) remove the following `forEach` before we release 1.6.0\n // The component-router@0.2.0 looks for the annotations on the controller constructor\n // Nothing in AngularJS looks for annotations on the factory function but we can't remove\n // it from 1.5.x yet.\n\n // Copy any annotation properties (starting with $) over to the factory and controller constructor functions\n // These could be used by libraries such as the new component router\n forEach(options, function(val, key) {\n if (key.charAt(0) === '$') {\n factory[key] = val;\n // Don't try to copy over annotations to named controller\n if (isFunction(controller)) controller[key] = val;\n }\n });\n\n factory.$inject = ['$injector'];\n\n return this.directive(name, factory);\n };\n\n\n /**\n * @ngdoc method\n * @name $compileProvider#aHrefSanitizationTrustedUrlList\n * @kind function\n *\n * @description\n * Retrieves or overrides the default regular expression that is used for determining trusted safe\n * urls during a[href] sanitization.\n *\n * The sanitization is a security measure aimed at preventing XSS attacks via html links.\n *\n * Any url about to be assigned to a[href] via data-binding is first normalized and turned into\n * an absolute url. Afterwards, the url is matched against the `aHrefSanitizationTrustedUrlList`\n * regular expression. If a match is found, the original url is written into the dom. Otherwise,\n * the absolute url is prefixed with `'unsafe:'` string and only then is it written into the DOM.\n *\n * @param {RegExp=} regexp New regexp to trust urls with.\n * @returns {RegExp|ng.$compileProvider} Current RegExp if called without value or self for\n * chaining otherwise.\n */\n this.aHrefSanitizationTrustedUrlList = function(regexp) {\n if (isDefined(regexp)) {\n $$sanitizeUriProvider.aHrefSanitizationTrustedUrlList(regexp);\n return this;\n } else {\n return $$sanitizeUriProvider.aHrefSanitizationTrustedUrlList();\n }\n };\n\n\n /**\n * @ngdoc method\n * @name $compileProvider#aHrefSanitizationWhitelist\n * @kind function\n *\n * @deprecated\n * sinceVersion=\"1.8.1\"\n *\n * This method is deprecated. Use {@link $compileProvider#aHrefSanitizationTrustedUrlList\n * aHrefSanitizationTrustedUrlList} instead.\n */\n Object.defineProperty(this, 'aHrefSanitizationWhitelist', {\n get: function() {\n return this.aHrefSanitizationTrustedUrlList;\n },\n set: function(value) {\n this.aHrefSanitizationTrustedUrlList = value;\n }\n });\n\n\n /**\n * @ngdoc method\n * @name $compileProvider#imgSrcSanitizationTrustedUrlList\n * @kind function\n *\n * @description\n * Retrieves or overrides the default regular expression that is used for determining trusted safe\n * urls during img[src] sanitization.\n *\n * The sanitization is a security measure aimed at prevent XSS attacks via html links.\n *\n * Any url about to be assigned to img[src] via data-binding is first normalized and turned into\n * an absolute url. Afterwards, the url is matched against the `imgSrcSanitizationTrustedUrlList`\n * regular expression. If a match is found, the original url is written into the dom. Otherwise,\n * the absolute url is prefixed with `'unsafe:'` string and only then is it written into the DOM.\n *\n * @param {RegExp=} regexp New regexp to trust urls with.\n * @returns {RegExp|ng.$compileProvider} Current RegExp if called without value or self for\n * chaining otherwise.\n */\n this.imgSrcSanitizationTrustedUrlList = function(regexp) {\n if (isDefined(regexp)) {\n $$sanitizeUriProvider.imgSrcSanitizationTrustedUrlList(regexp);\n return this;\n } else {\n return $$sanitizeUriProvider.imgSrcSanitizationTrustedUrlList();\n }\n };\n\n\n /**\n * @ngdoc method\n * @name $compileProvider#imgSrcSanitizationWhitelist\n * @kind function\n *\n * @deprecated\n * sinceVersion=\"1.8.1\"\n *\n * This method is deprecated. Use {@link $compileProvider#imgSrcSanitizationTrustedUrlList\n * imgSrcSanitizationTrustedUrlList} instead.\n */\n Object.defineProperty(this, 'imgSrcSanitizationWhitelist', {\n get: function() {\n return this.imgSrcSanitizationTrustedUrlList;\n },\n set: function(value) {\n this.imgSrcSanitizationTrustedUrlList = value;\n }\n });\n\n /**\n * @ngdoc method\n * @name $compileProvider#debugInfoEnabled\n *\n * @param {boolean=} enabled update the debugInfoEnabled state if provided, otherwise just return the\n * current debugInfoEnabled state\n * @returns {*} current value if used as getter or itself (chaining) if used as setter\n *\n * @kind function\n *\n * @description\n * Call this method to enable/disable various debug runtime information in the compiler such as adding\n * binding information and a reference to the current scope on to DOM elements.\n * If enabled, the compiler will add the following to DOM elements that have been bound to the scope\n * * `ng-binding` CSS class\n * * `ng-scope` and `ng-isolated-scope` CSS classes\n * * `$binding` data property containing an array of the binding expressions\n * * Data properties used by the {@link angular.element#methods `scope()`/`isolateScope()` methods} to return\n * the element's scope.\n * * Placeholder comments will contain information about what directive and binding caused the placeholder.\n * E.g. ``.\n *\n * You may want to disable this in production for a significant performance boost. See\n * {@link guide/production#disabling-debug-data Disabling Debug Data} for more.\n *\n * The default value is true.\n */\n var debugInfoEnabled = true;\n this.debugInfoEnabled = function(enabled) {\n if (isDefined(enabled)) {\n debugInfoEnabled = enabled;\n return this;\n }\n return debugInfoEnabled;\n };\n\n /**\n * @ngdoc method\n * @name $compileProvider#strictComponentBindingsEnabled\n *\n * @param {boolean=} enabled update the strictComponentBindingsEnabled state if provided,\n * otherwise return the current strictComponentBindingsEnabled state.\n * @returns {*} current value if used as getter or itself (chaining) if used as setter\n *\n * @kind function\n *\n * @description\n * Call this method to enable / disable the strict component bindings check. If enabled, the\n * compiler will enforce that all scope / controller bindings of a\n * {@link $compileProvider#directive directive} / {@link $compileProvider#component component}\n * that are not set as optional with `?`, must be provided when the directive is instantiated.\n * If not provided, the compiler will throw the\n * {@link error/$compile/missingattr $compile:missingattr error}.\n *\n * The default value is false.\n */\n var strictComponentBindingsEnabled = false;\n this.strictComponentBindingsEnabled = function(enabled) {\n if (isDefined(enabled)) {\n strictComponentBindingsEnabled = enabled;\n return this;\n }\n return strictComponentBindingsEnabled;\n };\n\n var TTL = 10;\n /**\n * @ngdoc method\n * @name $compileProvider#onChangesTtl\n * @description\n *\n * Sets the number of times `$onChanges` hooks can trigger new changes before giving up and\n * assuming that the model is unstable.\n *\n * The current default is 10 iterations.\n *\n * In complex applications it's possible that dependencies between `$onChanges` hooks and bindings will result\n * in several iterations of calls to these hooks. However if an application needs more than the default 10\n * iterations to stabilize then you should investigate what is causing the model to continuously change during\n * the `$onChanges` hook execution.\n *\n * Increasing the TTL could have performance implications, so you should not change it without proper justification.\n *\n * @param {number} limit The number of `$onChanges` hook iterations.\n * @returns {number|object} the current limit (or `this` if called as a setter for chaining)\n */\n this.onChangesTtl = function(value) {\n if (arguments.length) {\n TTL = value;\n return this;\n }\n return TTL;\n };\n\n var commentDirectivesEnabledConfig = true;\n /**\n * @ngdoc method\n * @name $compileProvider#commentDirectivesEnabled\n * @description\n *\n * It indicates to the compiler\n * whether or not directives on comments should be compiled.\n * Defaults to `true`.\n *\n * Calling this function with false disables the compilation of directives\n * on comments for the whole application.\n * This results in a compilation performance gain,\n * as the compiler doesn't have to check comments when looking for directives.\n * This should however only be used if you are sure that no comment directives are used in\n * the application (including any 3rd party directives).\n *\n * @param {boolean} enabled `false` if the compiler may ignore directives on comments\n * @returns {boolean|object} the current value (or `this` if called as a setter for chaining)\n */\n this.commentDirectivesEnabled = function(value) {\n if (arguments.length) {\n commentDirectivesEnabledConfig = value;\n return this;\n }\n return commentDirectivesEnabledConfig;\n };\n\n\n var cssClassDirectivesEnabledConfig = true;\n /**\n * @ngdoc method\n * @name $compileProvider#cssClassDirectivesEnabled\n * @description\n *\n * It indicates to the compiler\n * whether or not directives on element classes should be compiled.\n * Defaults to `true`.\n *\n * Calling this function with false disables the compilation of directives\n * on element classes for the whole application.\n * This results in a compilation performance gain,\n * as the compiler doesn't have to check element classes when looking for directives.\n * This should however only be used if you are sure that no class directives are used in\n * the application (including any 3rd party directives).\n *\n * @param {boolean} enabled `false` if the compiler may ignore directives on element classes\n * @returns {boolean|object} the current value (or `this` if called as a setter for chaining)\n */\n this.cssClassDirectivesEnabled = function(value) {\n if (arguments.length) {\n cssClassDirectivesEnabledConfig = value;\n return this;\n }\n return cssClassDirectivesEnabledConfig;\n };\n\n\n /**\n * The security context of DOM Properties.\n * @private\n */\n var PROP_CONTEXTS = createMap();\n\n /**\n * @ngdoc method\n * @name $compileProvider#addPropertySecurityContext\n * @description\n *\n * Defines the security context for DOM properties bound by ng-prop-*.\n *\n * @param {string} elementName The element name or '*' to match any element.\n * @param {string} propertyName The DOM property name.\n * @param {string} ctx The {@link $sce} security context in which this value is safe for use, e.g. `$sce.URL`\n * @returns {object} `this` for chaining\n */\n this.addPropertySecurityContext = function(elementName, propertyName, ctx) {\n var key = (elementName.toLowerCase() + '|' + propertyName.toLowerCase());\n\n if (key in PROP_CONTEXTS && PROP_CONTEXTS[key] !== ctx) {\n throw $compileMinErr('ctxoverride', 'Property context \\'{0}.{1}\\' already set to \\'{2}\\', cannot override to \\'{3}\\'.', elementName, propertyName, PROP_CONTEXTS[key], ctx);\n }\n\n PROP_CONTEXTS[key] = ctx;\n return this;\n };\n\n /* Default property contexts.\n *\n * Copy of https://github.com/angular/angular/blob/6.0.6/packages/compiler/src/schema/dom_security_schema.ts#L31-L58\n * Changing:\n * - SecurityContext.* => SCE_CONTEXTS/$sce.*\n * - STYLE => CSS\n * - various URL => MEDIA_URL\n * - *|formAction, form|action URL => RESOURCE_URL (like the attribute)\n */\n (function registerNativePropertyContexts() {\n function registerContext(ctx, values) {\n forEach(values, function(v) { PROP_CONTEXTS[v.toLowerCase()] = ctx; });\n }\n\n registerContext(SCE_CONTEXTS.HTML, [\n 'iframe|srcdoc',\n '*|innerHTML',\n '*|outerHTML'\n ]);\n registerContext(SCE_CONTEXTS.CSS, ['*|style']);\n registerContext(SCE_CONTEXTS.URL, [\n 'area|href', 'area|ping',\n 'a|href', 'a|ping',\n 'blockquote|cite',\n 'body|background',\n 'del|cite',\n 'input|src',\n 'ins|cite',\n 'q|cite'\n ]);\n registerContext(SCE_CONTEXTS.MEDIA_URL, [\n 'audio|src',\n 'img|src', 'img|srcset',\n 'source|src', 'source|srcset',\n 'track|src',\n 'video|src', 'video|poster'\n ]);\n registerContext(SCE_CONTEXTS.RESOURCE_URL, [\n '*|formAction',\n 'applet|code', 'applet|codebase',\n 'base|href',\n 'embed|src',\n 'frame|src',\n 'form|action',\n 'head|profile',\n 'html|manifest',\n 'iframe|src',\n 'link|href',\n 'media|src',\n 'object|codebase', 'object|data',\n 'script|src'\n ]);\n })();\n\n\n this.$get = [\n '$injector', '$interpolate', '$exceptionHandler', '$templateRequest', '$parse',\n '$controller', '$rootScope', '$sce', '$animate',\n function($injector, $interpolate, $exceptionHandler, $templateRequest, $parse,\n $controller, $rootScope, $sce, $animate) {\n\n var SIMPLE_ATTR_NAME = /^\\w/;\n var specialAttrHolder = window.document.createElement('div');\n\n\n var commentDirectivesEnabled = commentDirectivesEnabledConfig;\n var cssClassDirectivesEnabled = cssClassDirectivesEnabledConfig;\n\n\n var onChangesTtl = TTL;\n // The onChanges hooks should all be run together in a single digest\n // When changes occur, the call to trigger their hooks will be added to this queue\n var onChangesQueue;\n\n // This function is called in a $$postDigest to trigger all the onChanges hooks in a single digest\n function flushOnChangesQueue() {\n try {\n if (!(--onChangesTtl)) {\n // We have hit the TTL limit so reset everything\n onChangesQueue = undefined;\n throw $compileMinErr('infchng', '{0} $onChanges() iterations reached. Aborting!\\n', TTL);\n }\n // We must run this hook in an apply since the $$postDigest runs outside apply\n $rootScope.$apply(function() {\n for (var i = 0, ii = onChangesQueue.length; i < ii; ++i) {\n try {\n onChangesQueue[i]();\n } catch (e) {\n $exceptionHandler(e);\n }\n }\n // Reset the queue to trigger a new schedule next time there is a change\n onChangesQueue = undefined;\n });\n } finally {\n onChangesTtl++;\n }\n }\n\n\n function sanitizeSrcset(value, invokeType) {\n if (!value) {\n return value;\n }\n if (!isString(value)) {\n throw $compileMinErr('srcset', 'Can\\'t pass trusted values to `{0}`: \"{1}\"', invokeType, value.toString());\n }\n\n // Such values are a bit too complex to handle automatically inside $sce.\n // Instead, we sanitize each of the URIs individually, which works, even dynamically.\n\n // It's not possible to work around this using `$sce.trustAsMediaUrl`.\n // If you want to programmatically set explicitly trusted unsafe URLs, you should use\n // `$sce.trustAsHtml` on the whole `img` tag and inject it into the DOM using the\n // `ng-bind-html` directive.\n\n var result = '';\n\n // first check if there are spaces because it's not the same pattern\n var trimmedSrcset = trim(value);\n // ( 999x ,| 999w ,| ,|, )\n var srcPattern = /(\\s+\\d+x\\s*,|\\s+\\d+w\\s*,|\\s+,|,\\s+)/;\n var pattern = /\\s/.test(trimmedSrcset) ? srcPattern : /(,)/;\n\n // split srcset into tuple of uri and descriptor except for the last item\n var rawUris = trimmedSrcset.split(pattern);\n\n // for each tuples\n var nbrUrisWith2parts = Math.floor(rawUris.length / 2);\n for (var i = 0; i < nbrUrisWith2parts; i++) {\n var innerIdx = i * 2;\n // sanitize the uri\n result += $sce.getTrustedMediaUrl(trim(rawUris[innerIdx]));\n // add the descriptor\n result += ' ' + trim(rawUris[innerIdx + 1]);\n }\n\n // split the last item into uri and descriptor\n var lastTuple = trim(rawUris[i * 2]).split(/\\s/);\n\n // sanitize the last uri\n result += $sce.getTrustedMediaUrl(trim(lastTuple[0]));\n\n // and add the last descriptor if any\n if (lastTuple.length === 2) {\n result += (' ' + trim(lastTuple[1]));\n }\n return result;\n }\n\n\n function Attributes(element, attributesToCopy) {\n if (attributesToCopy) {\n var keys = Object.keys(attributesToCopy);\n var i, l, key;\n\n for (i = 0, l = keys.length; i < l; i++) {\n key = keys[i];\n this[key] = attributesToCopy[key];\n }\n } else {\n this.$attr = {};\n }\n\n this.$$element = element;\n }\n\n Attributes.prototype = {\n /**\n * @ngdoc method\n * @name $compile.directive.Attributes#$normalize\n * @kind function\n *\n * @description\n * Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with `x-` or\n * `data-`) to its normalized, camelCase form.\n *\n * Also there is special case for Moz prefix starting with upper case letter.\n *\n * For further information check out the guide on {@link guide/directive#matching-directives Matching Directives}\n *\n * @param {string} name Name to normalize\n */\n $normalize: directiveNormalize,\n\n\n /**\n * @ngdoc method\n * @name $compile.directive.Attributes#$addClass\n * @kind function\n *\n * @description\n * Adds the CSS class value specified by the classVal parameter to the element. If animations\n * are enabled then an animation will be triggered for the class addition.\n *\n * @param {string} classVal The className value that will be added to the element\n */\n $addClass: function(classVal) {\n if (classVal && classVal.length > 0) {\n $animate.addClass(this.$$element, classVal);\n }\n },\n\n /**\n * @ngdoc method\n * @name $compile.directive.Attributes#$removeClass\n * @kind function\n *\n * @description\n * Removes the CSS class value specified by the classVal parameter from the element. If\n * animations are enabled then an animation will be triggered for the class removal.\n *\n * @param {string} classVal The className value that will be removed from the element\n */\n $removeClass: function(classVal) {\n if (classVal && classVal.length > 0) {\n $animate.removeClass(this.$$element, classVal);\n }\n },\n\n /**\n * @ngdoc method\n * @name $compile.directive.Attributes#$updateClass\n * @kind function\n *\n * @description\n * Adds and removes the appropriate CSS class values to the element based on the difference\n * between the new and old CSS class values (specified as newClasses and oldClasses).\n *\n * @param {string} newClasses The current CSS className value\n * @param {string} oldClasses The former CSS className value\n */\n $updateClass: function(newClasses, oldClasses) {\n var toAdd = tokenDifference(newClasses, oldClasses);\n if (toAdd && toAdd.length) {\n $animate.addClass(this.$$element, toAdd);\n }\n\n var toRemove = tokenDifference(oldClasses, newClasses);\n if (toRemove && toRemove.length) {\n $animate.removeClass(this.$$element, toRemove);\n }\n },\n\n /**\n * Set a normalized attribute on the element in a way such that all directives\n * can share the attribute. This function properly handles boolean attributes.\n * @param {string} key Normalized key. (ie ngAttribute)\n * @param {string|boolean} value The value to set. If `null` attribute will be deleted.\n * @param {boolean=} writeAttr If false, does not write the value to DOM element attribute.\n * Defaults to true.\n * @param {string=} attrName Optional none normalized name. Defaults to key.\n */\n $set: function(key, value, writeAttr, attrName) {\n // TODO: decide whether or not to throw an error if \"class\"\n // is set through this function since it may cause $updateClass to\n // become unstable.\n\n var node = this.$$element[0],\n booleanKey = getBooleanAttrName(node, key),\n aliasedKey = getAliasedAttrName(key),\n observer = key,\n nodeName;\n\n if (booleanKey) {\n this.$$element.prop(key, value);\n attrName = booleanKey;\n } else if (aliasedKey) {\n this[aliasedKey] = value;\n observer = aliasedKey;\n }\n\n this[key] = value;\n\n // translate normalized key to actual key\n if (attrName) {\n this.$attr[key] = attrName;\n } else {\n attrName = this.$attr[key];\n if (!attrName) {\n this.$attr[key] = attrName = snake_case(key, '-');\n }\n }\n\n nodeName = nodeName_(this.$$element);\n\n // Sanitize img[srcset] values.\n if (nodeName === 'img' && key === 'srcset') {\n this[key] = value = sanitizeSrcset(value, '$set(\\'srcset\\', value)');\n }\n\n if (writeAttr !== false) {\n if (value === null || isUndefined(value)) {\n this.$$element.removeAttr(attrName);\n } else {\n if (SIMPLE_ATTR_NAME.test(attrName)) {\n // jQuery skips special boolean attrs treatment in XML nodes for\n // historical reasons and hence AngularJS cannot freely call\n // `.attr(attrName, false) with such attributes. To avoid issues\n // in XHTML, call `removeAttr` in such cases instead.\n // See https://github.com/jquery/jquery/issues/4249\n if (booleanKey && value === false) {\n this.$$element.removeAttr(attrName);\n } else {\n this.$$element.attr(attrName, value);\n }\n } else {\n setSpecialAttr(this.$$element[0], attrName, value);\n }\n }\n }\n\n // fire observers\n var $$observers = this.$$observers;\n if ($$observers) {\n forEach($$observers[observer], function(fn) {\n try {\n fn(value);\n } catch (e) {\n $exceptionHandler(e);\n }\n });\n }\n },\n\n\n /**\n * @ngdoc method\n * @name $compile.directive.Attributes#$observe\n * @kind function\n *\n * @description\n * Observes an interpolated attribute.\n *\n * The observer function will be invoked once during the next `$digest` following\n * compilation. The observer is then invoked whenever the interpolated value\n * changes.\n *\n * @param {string} key Normalized key. (ie ngAttribute) .\n * @param {function(interpolatedValue)} fn Function that will be called whenever\n the interpolated value of the attribute changes.\n * See the {@link guide/interpolation#how-text-and-attribute-bindings-work Interpolation\n * guide} for more info.\n * @returns {function()} Returns a deregistration function for this observer.\n */\n $observe: function(key, fn) {\n var attrs = this,\n $$observers = (attrs.$$observers || (attrs.$$observers = createMap())),\n listeners = ($$observers[key] || ($$observers[key] = []));\n\n listeners.push(fn);\n $rootScope.$evalAsync(function() {\n if (!listeners.$$inter && attrs.hasOwnProperty(key) && !isUndefined(attrs[key])) {\n // no one registered attribute interpolation function, so lets call it manually\n fn(attrs[key]);\n }\n });\n\n return function() {\n arrayRemove(listeners, fn);\n };\n }\n };\n\n function setSpecialAttr(element, attrName, value) {\n // Attributes names that do not start with letters (such as `(click)`) cannot be set using `setAttribute`\n // so we have to jump through some hoops to get such an attribute\n // https://github.com/angular/angular.js/pull/13318\n specialAttrHolder.innerHTML = '';\n var attributes = specialAttrHolder.firstChild.attributes;\n var attribute = attributes[0];\n // We have to remove the attribute from its container element before we can add it to the destination element\n attributes.removeNamedItem(attribute.name);\n attribute.value = value;\n element.attributes.setNamedItem(attribute);\n }\n\n function safeAddClass($element, className) {\n try {\n $element.addClass(className);\n } catch (e) {\n // ignore, since it means that we are trying to set class on\n // SVG element, where class name is read-only.\n }\n }\n\n\n var startSymbol = $interpolate.startSymbol(),\n endSymbol = $interpolate.endSymbol(),\n denormalizeTemplate = (startSymbol === '{{' && endSymbol === '}}')\n ? identity\n : function denormalizeTemplate(template) {\n return template.replace(/\\{\\{/g, startSymbol).replace(/}}/g, endSymbol);\n },\n NG_PREFIX_BINDING = /^ng(Attr|Prop|On)([A-Z].*)$/;\n var MULTI_ELEMENT_DIR_RE = /^(.+)Start$/;\n\n compile.$$addBindingInfo = debugInfoEnabled ? function $$addBindingInfo($element, binding) {\n var bindings = $element.data('$binding') || [];\n\n if (isArray(binding)) {\n bindings = bindings.concat(binding);\n } else {\n bindings.push(binding);\n }\n\n $element.data('$binding', bindings);\n } : noop;\n\n compile.$$addBindingClass = debugInfoEnabled ? function $$addBindingClass($element) {\n safeAddClass($element, 'ng-binding');\n } : noop;\n\n compile.$$addScopeInfo = debugInfoEnabled ? function $$addScopeInfo($element, scope, isolated, noTemplate) {\n var dataName = isolated ? (noTemplate ? '$isolateScopeNoTemplate' : '$isolateScope') : '$scope';\n $element.data(dataName, scope);\n } : noop;\n\n compile.$$addScopeClass = debugInfoEnabled ? function $$addScopeClass($element, isolated) {\n safeAddClass($element, isolated ? 'ng-isolate-scope' : 'ng-scope');\n } : noop;\n\n compile.$$createComment = function(directiveName, comment) {\n var content = '';\n if (debugInfoEnabled) {\n content = ' ' + (directiveName || '') + ': ';\n if (comment) content += comment + ' ';\n }\n return window.document.createComment(content);\n };\n\n return compile;\n\n //================================\n\n function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,\n previousCompileContext) {\n if (!($compileNodes instanceof jqLite)) {\n // jquery always rewraps, whereas we need to preserve the original selector so that we can\n // modify it.\n $compileNodes = jqLite($compileNodes);\n }\n var compositeLinkFn =\n compileNodes($compileNodes, transcludeFn, $compileNodes,\n maxPriority, ignoreDirective, previousCompileContext);\n compile.$$addScopeClass($compileNodes);\n var namespace = null;\n return function publicLinkFn(scope, cloneConnectFn, options) {\n if (!$compileNodes) {\n throw $compileMinErr('multilink', 'This element has already been linked.');\n }\n assertArg(scope, 'scope');\n\n if (previousCompileContext && previousCompileContext.needsNewScope) {\n // A parent directive did a replace and a directive on this element asked\n // for transclusion, which caused us to lose a layer of element on which\n // we could hold the new transclusion scope, so we will create it manually\n // here.\n scope = scope.$parent.$new();\n }\n\n options = options || {};\n var parentBoundTranscludeFn = options.parentBoundTranscludeFn,\n transcludeControllers = options.transcludeControllers,\n futureParentElement = options.futureParentElement;\n\n // When `parentBoundTranscludeFn` is passed, it is a\n // `controllersBoundTransclude` function (it was previously passed\n // as `transclude` to directive.link) so we must unwrap it to get\n // its `boundTranscludeFn`\n if (parentBoundTranscludeFn && parentBoundTranscludeFn.$$boundTransclude) {\n parentBoundTranscludeFn = parentBoundTranscludeFn.$$boundTransclude;\n }\n\n if (!namespace) {\n namespace = detectNamespaceForChildElements(futureParentElement);\n }\n var $linkNode;\n if (namespace !== 'html') {\n // When using a directive with replace:true and templateUrl the $compileNodes\n // (or a child element inside of them)\n // might change, so we need to recreate the namespace adapted compileNodes\n // for call to the link function.\n // Note: This will already clone the nodes...\n $linkNode = jqLite(\n wrapTemplate(namespace, jqLite('
    ').append($compileNodes).html())\n );\n } else if (cloneConnectFn) {\n // important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart\n // and sometimes changes the structure of the DOM.\n $linkNode = JQLitePrototype.clone.call($compileNodes);\n } else {\n $linkNode = $compileNodes;\n }\n\n if (transcludeControllers) {\n for (var controllerName in transcludeControllers) {\n $linkNode.data('$' + controllerName + 'Controller', transcludeControllers[controllerName].instance);\n }\n }\n\n compile.$$addScopeInfo($linkNode, scope);\n\n if (cloneConnectFn) cloneConnectFn($linkNode, scope);\n if (compositeLinkFn) compositeLinkFn(scope, $linkNode, $linkNode, parentBoundTranscludeFn);\n\n if (!cloneConnectFn) {\n $compileNodes = compositeLinkFn = null;\n }\n return $linkNode;\n };\n }\n\n function detectNamespaceForChildElements(parentElement) {\n // TODO: Make this detect MathML as well...\n var node = parentElement && parentElement[0];\n if (!node) {\n return 'html';\n } else {\n return nodeName_(node) !== 'foreignobject' && toString.call(node).match(/SVG/) ? 'svg' : 'html';\n }\n }\n\n /**\n * Compile function matches each node in nodeList against the directives. Once all directives\n * for a particular node are collected their compile functions are executed. The compile\n * functions return values - the linking functions - are combined into a composite linking\n * function, which is the a linking function for the node.\n *\n * @param {NodeList} nodeList an array of nodes or NodeList to compile\n * @param {function(angular.Scope, cloneAttachFn=)} transcludeFn A linking function, where the\n * scope argument is auto-generated to the new child of the transcluded parent scope.\n * @param {DOMElement=} $rootElement If the nodeList is the root of the compilation tree then\n * the rootElement must be set the jqLite collection of the compile root. This is\n * needed so that the jqLite collection items can be replaced with widgets.\n * @param {number=} maxPriority Max directive priority.\n * @returns {Function} A composite linking function of all of the matched directives or null.\n */\n function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective,\n previousCompileContext) {\n var linkFns = [],\n // `nodeList` can be either an element's `.childNodes` (live NodeList)\n // or a jqLite/jQuery collection or an array\n notLiveList = isArray(nodeList) || (nodeList instanceof jqLite),\n attrs, directives, nodeLinkFn, childNodes, childLinkFn, linkFnFound, nodeLinkFnFound;\n\n\n for (var i = 0; i < nodeList.length; i++) {\n attrs = new Attributes();\n\n // Support: IE 11 only\n // Workaround for #11781 and #14924\n if (msie === 11) {\n mergeConsecutiveTextNodes(nodeList, i, notLiveList);\n }\n\n // We must always refer to `nodeList[i]` hereafter,\n // since the nodes can be replaced underneath us.\n directives = collectDirectives(nodeList[i], [], attrs, i === 0 ? maxPriority : undefined,\n ignoreDirective);\n\n nodeLinkFn = (directives.length)\n ? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement,\n null, [], [], previousCompileContext)\n : null;\n\n if (nodeLinkFn && nodeLinkFn.scope) {\n compile.$$addScopeClass(attrs.$$element);\n }\n\n childLinkFn = (nodeLinkFn && nodeLinkFn.terminal ||\n !(childNodes = nodeList[i].childNodes) ||\n !childNodes.length)\n ? null\n : compileNodes(childNodes,\n nodeLinkFn ? (\n (nodeLinkFn.transcludeOnThisElement || !nodeLinkFn.templateOnThisElement)\n && nodeLinkFn.transclude) : transcludeFn);\n\n if (nodeLinkFn || childLinkFn) {\n linkFns.push(i, nodeLinkFn, childLinkFn);\n linkFnFound = true;\n nodeLinkFnFound = nodeLinkFnFound || nodeLinkFn;\n }\n\n //use the previous context only for the first element in the virtual group\n previousCompileContext = null;\n }\n\n // return a linking function if we have found anything, null otherwise\n return linkFnFound ? compositeLinkFn : null;\n\n function compositeLinkFn(scope, nodeList, $rootElement, parentBoundTranscludeFn) {\n var nodeLinkFn, childLinkFn, node, childScope, i, ii, idx, childBoundTranscludeFn;\n var stableNodeList;\n\n\n if (nodeLinkFnFound) {\n // copy nodeList so that if a nodeLinkFn removes or adds an element at this DOM level our\n // offsets don't get screwed up\n var nodeListLength = nodeList.length;\n stableNodeList = new Array(nodeListLength);\n\n // create a sparse array by only copying the elements which have a linkFn\n for (i = 0; i < linkFns.length; i += 3) {\n idx = linkFns[i];\n stableNodeList[idx] = nodeList[idx];\n }\n } else {\n stableNodeList = nodeList;\n }\n\n for (i = 0, ii = linkFns.length; i < ii;) {\n node = stableNodeList[linkFns[i++]];\n nodeLinkFn = linkFns[i++];\n childLinkFn = linkFns[i++];\n\n if (nodeLinkFn) {\n if (nodeLinkFn.scope) {\n childScope = scope.$new();\n compile.$$addScopeInfo(jqLite(node), childScope);\n } else {\n childScope = scope;\n }\n\n if (nodeLinkFn.transcludeOnThisElement) {\n childBoundTranscludeFn = createBoundTranscludeFn(\n scope, nodeLinkFn.transclude, parentBoundTranscludeFn);\n\n } else if (!nodeLinkFn.templateOnThisElement && parentBoundTranscludeFn) {\n childBoundTranscludeFn = parentBoundTranscludeFn;\n\n } else if (!parentBoundTranscludeFn && transcludeFn) {\n childBoundTranscludeFn = createBoundTranscludeFn(scope, transcludeFn);\n\n } else {\n childBoundTranscludeFn = null;\n }\n\n nodeLinkFn(childLinkFn, childScope, node, $rootElement, childBoundTranscludeFn);\n\n } else if (childLinkFn) {\n childLinkFn(scope, node.childNodes, undefined, parentBoundTranscludeFn);\n }\n }\n }\n }\n\n function mergeConsecutiveTextNodes(nodeList, idx, notLiveList) {\n var node = nodeList[idx];\n var parent = node.parentNode;\n var sibling;\n\n if (node.nodeType !== NODE_TYPE_TEXT) {\n return;\n }\n\n while (true) {\n sibling = parent ? node.nextSibling : nodeList[idx + 1];\n if (!sibling || sibling.nodeType !== NODE_TYPE_TEXT) {\n break;\n }\n\n node.nodeValue = node.nodeValue + sibling.nodeValue;\n\n if (sibling.parentNode) {\n sibling.parentNode.removeChild(sibling);\n }\n if (notLiveList && sibling === nodeList[idx + 1]) {\n nodeList.splice(idx + 1, 1);\n }\n }\n }\n\n function createBoundTranscludeFn(scope, transcludeFn, previousBoundTranscludeFn) {\n function boundTranscludeFn(transcludedScope, cloneFn, controllers, futureParentElement, containingScope) {\n\n if (!transcludedScope) {\n transcludedScope = scope.$new(false, containingScope);\n transcludedScope.$$transcluded = true;\n }\n\n return transcludeFn(transcludedScope, cloneFn, {\n parentBoundTranscludeFn: previousBoundTranscludeFn,\n transcludeControllers: controllers,\n futureParentElement: futureParentElement\n });\n }\n\n // We need to attach the transclusion slots onto the `boundTranscludeFn`\n // so that they are available inside the `controllersBoundTransclude` function\n var boundSlots = boundTranscludeFn.$$slots = createMap();\n for (var slotName in transcludeFn.$$slots) {\n if (transcludeFn.$$slots[slotName]) {\n boundSlots[slotName] = createBoundTranscludeFn(scope, transcludeFn.$$slots[slotName], previousBoundTranscludeFn);\n } else {\n boundSlots[slotName] = null;\n }\n }\n\n return boundTranscludeFn;\n }\n\n /**\n * Looks for directives on the given node and adds them to the directive collection which is\n * sorted.\n *\n * @param node Node to search.\n * @param directives An array to which the directives are added to. This array is sorted before\n * the function returns.\n * @param attrs The shared attrs object which is used to populate the normalized attributes.\n * @param {number=} maxPriority Max directive priority.\n */\n function collectDirectives(node, directives, attrs, maxPriority, ignoreDirective) {\n var nodeType = node.nodeType,\n attrsMap = attrs.$attr,\n match,\n nodeName,\n className;\n\n switch (nodeType) {\n case NODE_TYPE_ELEMENT: /* Element */\n\n nodeName = nodeName_(node);\n\n // use the node name: \n addDirective(directives,\n directiveNormalize(nodeName), 'E', maxPriority, ignoreDirective);\n\n // iterate over the attributes\n for (var attr, name, nName, value, ngPrefixMatch, nAttrs = node.attributes,\n j = 0, jj = nAttrs && nAttrs.length; j < jj; j++) {\n var attrStartName = false;\n var attrEndName = false;\n\n var isNgAttr = false, isNgProp = false, isNgEvent = false;\n var multiElementMatch;\n\n attr = nAttrs[j];\n name = attr.name;\n value = attr.value;\n\n nName = directiveNormalize(name.toLowerCase());\n\n // Support ng-attr-*, ng-prop-* and ng-on-*\n if ((ngPrefixMatch = nName.match(NG_PREFIX_BINDING))) {\n isNgAttr = ngPrefixMatch[1] === 'Attr';\n isNgProp = ngPrefixMatch[1] === 'Prop';\n isNgEvent = ngPrefixMatch[1] === 'On';\n\n // Normalize the non-prefixed name\n name = name.replace(PREFIX_REGEXP, '')\n .toLowerCase()\n .substr(4 + ngPrefixMatch[1].length).replace(/_(.)/g, function(match, letter) {\n return letter.toUpperCase();\n });\n\n // Support *-start / *-end multi element directives\n } else if ((multiElementMatch = nName.match(MULTI_ELEMENT_DIR_RE)) && directiveIsMultiElement(multiElementMatch[1])) {\n attrStartName = name;\n attrEndName = name.substr(0, name.length - 5) + 'end';\n name = name.substr(0, name.length - 6);\n }\n\n if (isNgProp || isNgEvent) {\n attrs[nName] = value;\n attrsMap[nName] = attr.name;\n\n if (isNgProp) {\n addPropertyDirective(node, directives, nName, name);\n } else {\n addEventDirective(directives, nName, name);\n }\n } else {\n // Update nName for cases where a prefix was removed\n // NOTE: the .toLowerCase() is unnecessary and causes https://github.com/angular/angular.js/issues/16624 for ng-attr-*\n nName = directiveNormalize(name.toLowerCase());\n attrsMap[nName] = name;\n\n if (isNgAttr || !attrs.hasOwnProperty(nName)) {\n attrs[nName] = value;\n if (getBooleanAttrName(node, nName)) {\n attrs[nName] = true; // presence means true\n }\n }\n\n addAttrInterpolateDirective(node, directives, value, nName, isNgAttr);\n addDirective(directives, nName, 'A', maxPriority, ignoreDirective, attrStartName,\n attrEndName);\n }\n }\n\n if (nodeName === 'input' && node.getAttribute('type') === 'hidden') {\n // Hidden input elements can have strange behaviour when navigating back to the page\n // This tells the browser not to try to cache and reinstate previous values\n node.setAttribute('autocomplete', 'off');\n }\n\n // use class as directive\n if (!cssClassDirectivesEnabled) break;\n className = node.className;\n if (isObject(className)) {\n // Maybe SVGAnimatedString\n className = className.animVal;\n }\n if (isString(className) && className !== '') {\n while ((match = CLASS_DIRECTIVE_REGEXP.exec(className))) {\n nName = directiveNormalize(match[2]);\n if (addDirective(directives, nName, 'C', maxPriority, ignoreDirective)) {\n attrs[nName] = trim(match[3]);\n }\n className = className.substr(match.index + match[0].length);\n }\n }\n break;\n case NODE_TYPE_TEXT: /* Text Node */\n addTextInterpolateDirective(directives, node.nodeValue);\n break;\n case NODE_TYPE_COMMENT: /* Comment */\n if (!commentDirectivesEnabled) break;\n collectCommentDirectives(node, directives, attrs, maxPriority, ignoreDirective);\n break;\n }\n\n directives.sort(byPriority);\n return directives;\n }\n\n function collectCommentDirectives(node, directives, attrs, maxPriority, ignoreDirective) {\n // function created because of performance, try/catch disables\n // the optimization of the whole function #14848\n try {\n var match = COMMENT_DIRECTIVE_REGEXP.exec(node.nodeValue);\n if (match) {\n var nName = directiveNormalize(match[1]);\n if (addDirective(directives, nName, 'M', maxPriority, ignoreDirective)) {\n attrs[nName] = trim(match[2]);\n }\n }\n } catch (e) {\n // turns out that under some circumstances IE9 throws errors when one attempts to read\n // comment's node value.\n // Just ignore it and continue. (Can't seem to reproduce in test case.)\n }\n }\n\n /**\n * Given a node with a directive-start it collects all of the siblings until it finds\n * directive-end.\n * @param node\n * @param attrStart\n * @param attrEnd\n * @returns {*}\n */\n function groupScan(node, attrStart, attrEnd) {\n var nodes = [];\n var depth = 0;\n if (attrStart && node.hasAttribute && node.hasAttribute(attrStart)) {\n do {\n if (!node) {\n throw $compileMinErr('uterdir',\n 'Unterminated attribute, found \\'{0}\\' but no matching \\'{1}\\' found.',\n attrStart, attrEnd);\n }\n if (node.nodeType === NODE_TYPE_ELEMENT) {\n if (node.hasAttribute(attrStart)) depth++;\n if (node.hasAttribute(attrEnd)) depth--;\n }\n nodes.push(node);\n node = node.nextSibling;\n } while (depth > 0);\n } else {\n nodes.push(node);\n }\n\n return jqLite(nodes);\n }\n\n /**\n * Wrapper for linking function which converts normal linking function into a grouped\n * linking function.\n * @param linkFn\n * @param attrStart\n * @param attrEnd\n * @returns {Function}\n */\n function groupElementsLinkFnWrapper(linkFn, attrStart, attrEnd) {\n return function groupedElementsLink(scope, element, attrs, controllers, transcludeFn) {\n element = groupScan(element[0], attrStart, attrEnd);\n return linkFn(scope, element, attrs, controllers, transcludeFn);\n };\n }\n\n /**\n * A function generator that is used to support both eager and lazy compilation\n * linking function.\n * @param eager\n * @param $compileNodes\n * @param transcludeFn\n * @param maxPriority\n * @param ignoreDirective\n * @param previousCompileContext\n * @returns {Function}\n */\n function compilationGenerator(eager, $compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) {\n var compiled;\n\n if (eager) {\n return compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext);\n }\n return /** @this */ function lazyCompilation() {\n if (!compiled) {\n compiled = compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext);\n\n // Null out all of these references in order to make them eligible for garbage collection\n // since this is a potentially long lived closure\n $compileNodes = transcludeFn = previousCompileContext = null;\n }\n return compiled.apply(this, arguments);\n };\n }\n\n /**\n * Once the directives have been collected, their compile functions are executed. This method\n * is responsible for inlining directive templates as well as terminating the application\n * of the directives if the terminal directive has been reached.\n *\n * @param {Array} directives Array of collected directives to execute their compile function.\n * this needs to be pre-sorted by priority order.\n * @param {Node} compileNode The raw DOM node to apply the compile functions to\n * @param {Object} templateAttrs The shared attribute function\n * @param {function(angular.Scope, cloneAttachFn=)} transcludeFn A linking function, where the\n * scope argument is auto-generated to the new\n * child of the transcluded parent scope.\n * @param {JQLite} jqCollection If we are working on the root of the compile tree then this\n * argument has the root jqLite array so that we can replace nodes\n * on it.\n * @param {Object=} originalReplaceDirective An optional directive that will be ignored when\n * compiling the transclusion.\n * @param {Array.} preLinkFns\n * @param {Array.} postLinkFns\n * @param {Object} previousCompileContext Context used for previous compilation of the current\n * node\n * @returns {Function} linkFn\n */\n function applyDirectivesToNode(directives, compileNode, templateAttrs, transcludeFn,\n jqCollection, originalReplaceDirective, preLinkFns, postLinkFns,\n previousCompileContext) {\n previousCompileContext = previousCompileContext || {};\n\n var terminalPriority = -Number.MAX_VALUE,\n newScopeDirective = previousCompileContext.newScopeDirective,\n controllerDirectives = previousCompileContext.controllerDirectives,\n newIsolateScopeDirective = previousCompileContext.newIsolateScopeDirective,\n templateDirective = previousCompileContext.templateDirective,\n nonTlbTranscludeDirective = previousCompileContext.nonTlbTranscludeDirective,\n hasTranscludeDirective = false,\n hasTemplate = false,\n hasElementTranscludeDirective = previousCompileContext.hasElementTranscludeDirective,\n $compileNode = templateAttrs.$$element = jqLite(compileNode),\n directive,\n directiveName,\n $template,\n replaceDirective = originalReplaceDirective,\n childTranscludeFn = transcludeFn,\n linkFn,\n didScanForMultipleTransclusion = false,\n mightHaveMultipleTransclusionError = false,\n directiveValue;\n\n // executes all directives on the current element\n for (var i = 0, ii = directives.length; i < ii; i++) {\n directive = directives[i];\n var attrStart = directive.$$start;\n var attrEnd = directive.$$end;\n\n // collect multiblock sections\n if (attrStart) {\n $compileNode = groupScan(compileNode, attrStart, attrEnd);\n }\n $template = undefined;\n\n if (terminalPriority > directive.priority) {\n break; // prevent further processing of directives\n }\n\n directiveValue = directive.scope;\n\n if (directiveValue) {\n\n // skip the check for directives with async templates, we'll check the derived sync\n // directive when the template arrives\n if (!directive.templateUrl) {\n if (isObject(directiveValue)) {\n // This directive is trying to add an isolated scope.\n // Check that there is no scope of any kind already\n assertNoDuplicate('new/isolated scope', newIsolateScopeDirective || newScopeDirective,\n directive, $compileNode);\n newIsolateScopeDirective = directive;\n } else {\n // This directive is trying to add a child scope.\n // Check that there is no isolated scope already\n assertNoDuplicate('new/isolated scope', newIsolateScopeDirective, directive,\n $compileNode);\n }\n }\n\n newScopeDirective = newScopeDirective || directive;\n }\n\n directiveName = directive.name;\n\n // If we encounter a condition that can result in transclusion on the directive,\n // then scan ahead in the remaining directives for others that may cause a multiple\n // transclusion error to be thrown during the compilation process. If a matching directive\n // is found, then we know that when we encounter a transcluded directive, we need to eagerly\n // compile the `transclude` function rather than doing it lazily in order to throw\n // exceptions at the correct time\n if (!didScanForMultipleTransclusion && ((directive.replace && (directive.templateUrl || directive.template))\n || (directive.transclude && !directive.$$tlb))) {\n var candidateDirective;\n\n for (var scanningIndex = i + 1; (candidateDirective = directives[scanningIndex++]);) {\n if ((candidateDirective.transclude && !candidateDirective.$$tlb)\n || (candidateDirective.replace && (candidateDirective.templateUrl || candidateDirective.template))) {\n mightHaveMultipleTransclusionError = true;\n break;\n }\n }\n\n didScanForMultipleTransclusion = true;\n }\n\n if (!directive.templateUrl && directive.controller) {\n controllerDirectives = controllerDirectives || createMap();\n assertNoDuplicate('\\'' + directiveName + '\\' controller',\n controllerDirectives[directiveName], directive, $compileNode);\n controllerDirectives[directiveName] = directive;\n }\n\n directiveValue = directive.transclude;\n\n if (directiveValue) {\n hasTranscludeDirective = true;\n\n // Special case ngIf and ngRepeat so that we don't complain about duplicate transclusion.\n // This option should only be used by directives that know how to safely handle element transclusion,\n // where the transcluded nodes are added or replaced after linking.\n if (!directive.$$tlb) {\n assertNoDuplicate('transclusion', nonTlbTranscludeDirective, directive, $compileNode);\n nonTlbTranscludeDirective = directive;\n }\n\n if (directiveValue === 'element') {\n hasElementTranscludeDirective = true;\n terminalPriority = directive.priority;\n $template = $compileNode;\n $compileNode = templateAttrs.$$element =\n jqLite(compile.$$createComment(directiveName, templateAttrs[directiveName]));\n compileNode = $compileNode[0];\n replaceWith(jqCollection, sliceArgs($template), compileNode);\n\n childTranscludeFn = compilationGenerator(mightHaveMultipleTransclusionError, $template, transcludeFn, terminalPriority,\n replaceDirective && replaceDirective.name, {\n // Don't pass in:\n // - controllerDirectives - otherwise we'll create duplicates controllers\n // - newIsolateScopeDirective or templateDirective - combining templates with\n // element transclusion doesn't make sense.\n //\n // We need only nonTlbTranscludeDirective so that we prevent putting transclusion\n // on the same element more than once.\n nonTlbTranscludeDirective: nonTlbTranscludeDirective\n });\n } else {\n\n var slots = createMap();\n\n if (!isObject(directiveValue)) {\n $template = jqLite(jqLiteClone(compileNode)).contents();\n } else {\n\n // We have transclusion slots,\n // collect them up, compile them and store their transclusion functions\n $template = window.document.createDocumentFragment();\n\n var slotMap = createMap();\n var filledSlots = createMap();\n\n // Parse the element selectors\n forEach(directiveValue, function(elementSelector, slotName) {\n // If an element selector starts with a ? then it is optional\n var optional = (elementSelector.charAt(0) === '?');\n elementSelector = optional ? elementSelector.substring(1) : elementSelector;\n\n slotMap[elementSelector] = slotName;\n\n // We explicitly assign `null` since this implies that a slot was defined but not filled.\n // Later when calling boundTransclusion functions with a slot name we only error if the\n // slot is `undefined`\n slots[slotName] = null;\n\n // filledSlots contains `true` for all slots that are either optional or have been\n // filled. This is used to check that we have not missed any required slots\n filledSlots[slotName] = optional;\n });\n\n // Add the matching elements into their slot\n forEach($compileNode.contents(), function(node) {\n var slotName = slotMap[directiveNormalize(nodeName_(node))];\n if (slotName) {\n filledSlots[slotName] = true;\n slots[slotName] = slots[slotName] || window.document.createDocumentFragment();\n slots[slotName].appendChild(node);\n } else {\n $template.appendChild(node);\n }\n });\n\n // Check for required slots that were not filled\n forEach(filledSlots, function(filled, slotName) {\n if (!filled) {\n throw $compileMinErr('reqslot', 'Required transclusion slot `{0}` was not filled.', slotName);\n }\n });\n\n for (var slotName in slots) {\n if (slots[slotName]) {\n // Only define a transclusion function if the slot was filled\n var slotCompileNodes = jqLite(slots[slotName].childNodes);\n slots[slotName] = compilationGenerator(mightHaveMultipleTransclusionError, slotCompileNodes, transcludeFn);\n }\n }\n\n $template = jqLite($template.childNodes);\n }\n\n $compileNode.empty(); // clear contents\n childTranscludeFn = compilationGenerator(mightHaveMultipleTransclusionError, $template, transcludeFn, undefined,\n undefined, { needsNewScope: directive.$$isolateScope || directive.$$newScope});\n childTranscludeFn.$$slots = slots;\n }\n }\n\n if (directive.template) {\n hasTemplate = true;\n assertNoDuplicate('template', templateDirective, directive, $compileNode);\n templateDirective = directive;\n\n directiveValue = (isFunction(directive.template))\n ? directive.template($compileNode, templateAttrs)\n : directive.template;\n\n directiveValue = denormalizeTemplate(directiveValue);\n\n if (directive.replace) {\n replaceDirective = directive;\n if (jqLiteIsTextNode(directiveValue)) {\n $template = [];\n } else {\n $template = removeComments(wrapTemplate(directive.templateNamespace, trim(directiveValue)));\n }\n compileNode = $template[0];\n\n if ($template.length !== 1 || compileNode.nodeType !== NODE_TYPE_ELEMENT) {\n throw $compileMinErr('tplrt',\n 'Template for directive \\'{0}\\' must have exactly one root element. {1}',\n directiveName, '');\n }\n\n replaceWith(jqCollection, $compileNode, compileNode);\n\n var newTemplateAttrs = {$attr: {}};\n\n // combine directives from the original node and from the template:\n // - take the array of directives for this element\n // - split it into two parts, those that already applied (processed) and those that weren't (unprocessed)\n // - collect directives from the template and sort them by priority\n // - combine directives as: processed + template + unprocessed\n var templateDirectives = collectDirectives(compileNode, [], newTemplateAttrs);\n var unprocessedDirectives = directives.splice(i + 1, directives.length - (i + 1));\n\n if (newIsolateScopeDirective || newScopeDirective) {\n // The original directive caused the current element to be replaced but this element\n // also needs to have a new scope, so we need to tell the template directives\n // that they would need to get their scope from further up, if they require transclusion\n markDirectiveScope(templateDirectives, newIsolateScopeDirective, newScopeDirective);\n }\n directives = directives.concat(templateDirectives).concat(unprocessedDirectives);\n mergeTemplateAttributes(templateAttrs, newTemplateAttrs);\n\n ii = directives.length;\n } else {\n $compileNode.html(directiveValue);\n }\n }\n\n if (directive.templateUrl) {\n hasTemplate = true;\n assertNoDuplicate('template', templateDirective, directive, $compileNode);\n templateDirective = directive;\n\n if (directive.replace) {\n replaceDirective = directive;\n }\n\n // eslint-disable-next-line no-func-assign\n nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode,\n templateAttrs, jqCollection, hasTranscludeDirective && childTranscludeFn, preLinkFns, postLinkFns, {\n controllerDirectives: controllerDirectives,\n newScopeDirective: (newScopeDirective !== directive) && newScopeDirective,\n newIsolateScopeDirective: newIsolateScopeDirective,\n templateDirective: templateDirective,\n nonTlbTranscludeDirective: nonTlbTranscludeDirective\n });\n ii = directives.length;\n } else if (directive.compile) {\n try {\n linkFn = directive.compile($compileNode, templateAttrs, childTranscludeFn);\n var context = directive.$$originalDirective || directive;\n if (isFunction(linkFn)) {\n addLinkFns(null, bind(context, linkFn), attrStart, attrEnd);\n } else if (linkFn) {\n addLinkFns(bind(context, linkFn.pre), bind(context, linkFn.post), attrStart, attrEnd);\n }\n } catch (e) {\n $exceptionHandler(e, startingTag($compileNode));\n }\n }\n\n if (directive.terminal) {\n nodeLinkFn.terminal = true;\n terminalPriority = Math.max(terminalPriority, directive.priority);\n }\n\n }\n\n nodeLinkFn.scope = newScopeDirective && newScopeDirective.scope === true;\n nodeLinkFn.transcludeOnThisElement = hasTranscludeDirective;\n nodeLinkFn.templateOnThisElement = hasTemplate;\n nodeLinkFn.transclude = childTranscludeFn;\n\n previousCompileContext.hasElementTranscludeDirective = hasElementTranscludeDirective;\n\n // might be normal or delayed nodeLinkFn depending on if templateUrl is present\n return nodeLinkFn;\n\n ////////////////////\n\n function addLinkFns(pre, post, attrStart, attrEnd) {\n if (pre) {\n if (attrStart) pre = groupElementsLinkFnWrapper(pre, attrStart, attrEnd);\n pre.require = directive.require;\n pre.directiveName = directiveName;\n if (newIsolateScopeDirective === directive || directive.$$isolateScope) {\n pre = cloneAndAnnotateFn(pre, {isolateScope: true});\n }\n preLinkFns.push(pre);\n }\n if (post) {\n if (attrStart) post = groupElementsLinkFnWrapper(post, attrStart, attrEnd);\n post.require = directive.require;\n post.directiveName = directiveName;\n if (newIsolateScopeDirective === directive || directive.$$isolateScope) {\n post = cloneAndAnnotateFn(post, {isolateScope: true});\n }\n postLinkFns.push(post);\n }\n }\n\n function nodeLinkFn(childLinkFn, scope, linkNode, $rootElement, boundTranscludeFn) {\n var i, ii, linkFn, isolateScope, controllerScope, elementControllers, transcludeFn, $element,\n attrs, scopeBindingInfo;\n\n if (compileNode === linkNode) {\n attrs = templateAttrs;\n $element = templateAttrs.$$element;\n } else {\n $element = jqLite(linkNode);\n attrs = new Attributes($element, templateAttrs);\n }\n\n controllerScope = scope;\n if (newIsolateScopeDirective) {\n isolateScope = scope.$new(true);\n } else if (newScopeDirective) {\n controllerScope = scope.$parent;\n }\n\n if (boundTranscludeFn) {\n // track `boundTranscludeFn` so it can be unwrapped if `transcludeFn`\n // is later passed as `parentBoundTranscludeFn` to `publicLinkFn`\n transcludeFn = controllersBoundTransclude;\n transcludeFn.$$boundTransclude = boundTranscludeFn;\n // expose the slots on the `$transclude` function\n transcludeFn.isSlotFilled = function(slotName) {\n return !!boundTranscludeFn.$$slots[slotName];\n };\n }\n\n if (controllerDirectives) {\n elementControllers = setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope, newIsolateScopeDirective);\n }\n\n if (newIsolateScopeDirective) {\n // Initialize isolate scope bindings for new isolate scope directive.\n compile.$$addScopeInfo($element, isolateScope, true, !(templateDirective && (templateDirective === newIsolateScopeDirective ||\n templateDirective === newIsolateScopeDirective.$$originalDirective)));\n compile.$$addScopeClass($element, true);\n isolateScope.$$isolateBindings =\n newIsolateScopeDirective.$$isolateBindings;\n scopeBindingInfo = initializeDirectiveBindings(scope, attrs, isolateScope,\n isolateScope.$$isolateBindings,\n newIsolateScopeDirective);\n if (scopeBindingInfo.removeWatches) {\n isolateScope.$on('$destroy', scopeBindingInfo.removeWatches);\n }\n }\n\n // Initialize bindToController bindings\n for (var name in elementControllers) {\n var controllerDirective = controllerDirectives[name];\n var controller = elementControllers[name];\n var bindings = controllerDirective.$$bindings.bindToController;\n\n controller.instance = controller();\n $element.data('$' + controllerDirective.name + 'Controller', controller.instance);\n controller.bindingInfo =\n initializeDirectiveBindings(controllerScope, attrs, controller.instance, bindings, controllerDirective);\n }\n\n // Bind the required controllers to the controller, if `require` is an object and `bindToController` is truthy\n forEach(controllerDirectives, function(controllerDirective, name) {\n var require = controllerDirective.require;\n if (controllerDirective.bindToController && !isArray(require) && isObject(require)) {\n extend(elementControllers[name].instance, getControllers(name, require, $element, elementControllers));\n }\n });\n\n // Handle the init and destroy lifecycle hooks on all controllers that have them\n forEach(elementControllers, function(controller) {\n var controllerInstance = controller.instance;\n if (isFunction(controllerInstance.$onChanges)) {\n try {\n controllerInstance.$onChanges(controller.bindingInfo.initialChanges);\n } catch (e) {\n $exceptionHandler(e);\n }\n }\n if (isFunction(controllerInstance.$onInit)) {\n try {\n controllerInstance.$onInit();\n } catch (e) {\n $exceptionHandler(e);\n }\n }\n if (isFunction(controllerInstance.$doCheck)) {\n controllerScope.$watch(function() { controllerInstance.$doCheck(); });\n controllerInstance.$doCheck();\n }\n if (isFunction(controllerInstance.$onDestroy)) {\n controllerScope.$on('$destroy', function callOnDestroyHook() {\n controllerInstance.$onDestroy();\n });\n }\n });\n\n // PRELINKING\n for (i = 0, ii = preLinkFns.length; i < ii; i++) {\n linkFn = preLinkFns[i];\n invokeLinkFn(linkFn,\n linkFn.isolateScope ? isolateScope : scope,\n $element,\n attrs,\n linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),\n transcludeFn\n );\n }\n\n // RECURSION\n // We only pass the isolate scope, if the isolate directive has a template,\n // otherwise the child elements do not belong to the isolate directive.\n var scopeToChild = scope;\n if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) {\n scopeToChild = isolateScope;\n }\n if (childLinkFn) {\n childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);\n }\n\n // POSTLINKING\n for (i = postLinkFns.length - 1; i >= 0; i--) {\n linkFn = postLinkFns[i];\n invokeLinkFn(linkFn,\n linkFn.isolateScope ? isolateScope : scope,\n $element,\n attrs,\n linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),\n transcludeFn\n );\n }\n\n // Trigger $postLink lifecycle hooks\n forEach(elementControllers, function(controller) {\n var controllerInstance = controller.instance;\n if (isFunction(controllerInstance.$postLink)) {\n controllerInstance.$postLink();\n }\n });\n\n // This is the function that is injected as `$transclude`.\n // Note: all arguments are optional!\n function controllersBoundTransclude(scope, cloneAttachFn, futureParentElement, slotName) {\n var transcludeControllers;\n // No scope passed in:\n if (!isScope(scope)) {\n slotName = futureParentElement;\n futureParentElement = cloneAttachFn;\n cloneAttachFn = scope;\n scope = undefined;\n }\n\n if (hasElementTranscludeDirective) {\n transcludeControllers = elementControllers;\n }\n if (!futureParentElement) {\n futureParentElement = hasElementTranscludeDirective ? $element.parent() : $element;\n }\n if (slotName) {\n // slotTranscludeFn can be one of three things:\n // * a transclude function - a filled slot\n // * `null` - an optional slot that was not filled\n // * `undefined` - a slot that was not declared (i.e. invalid)\n var slotTranscludeFn = boundTranscludeFn.$$slots[slotName];\n if (slotTranscludeFn) {\n return slotTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);\n } else if (isUndefined(slotTranscludeFn)) {\n throw $compileMinErr('noslot',\n 'No parent directive that requires a transclusion with slot name \"{0}\". ' +\n 'Element: {1}',\n slotName, startingTag($element));\n }\n } else {\n return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);\n }\n }\n }\n }\n\n function getControllers(directiveName, require, $element, elementControllers) {\n var value;\n\n if (isString(require)) {\n var match = require.match(REQUIRE_PREFIX_REGEXP);\n var name = require.substring(match[0].length);\n var inheritType = match[1] || match[3];\n var optional = match[2] === '?';\n\n //If only parents then start at the parent element\n if (inheritType === '^^') {\n $element = $element.parent();\n //Otherwise attempt getting the controller from elementControllers in case\n //the element is transcluded (and has no data) and to avoid .data if possible\n } else {\n value = elementControllers && elementControllers[name];\n value = value && value.instance;\n }\n\n if (!value) {\n var dataName = '$' + name + 'Controller';\n\n if (inheritType === '^^' && $element[0] && $element[0].nodeType === NODE_TYPE_DOCUMENT) {\n // inheritedData() uses the documentElement when it finds the document, so we would\n // require from the element itself.\n value = null;\n } else {\n value = inheritType ? $element.inheritedData(dataName) : $element.data(dataName);\n }\n }\n\n if (!value && !optional) {\n throw $compileMinErr('ctreq',\n 'Controller \\'{0}\\', required by directive \\'{1}\\', can\\'t be found!',\n name, directiveName);\n }\n } else if (isArray(require)) {\n value = [];\n for (var i = 0, ii = require.length; i < ii; i++) {\n value[i] = getControllers(directiveName, require[i], $element, elementControllers);\n }\n } else if (isObject(require)) {\n value = {};\n forEach(require, function(controller, property) {\n value[property] = getControllers(directiveName, controller, $element, elementControllers);\n });\n }\n\n return value || null;\n }\n\n function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope, newIsolateScopeDirective) {\n var elementControllers = createMap();\n for (var controllerKey in controllerDirectives) {\n var directive = controllerDirectives[controllerKey];\n var locals = {\n $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,\n $element: $element,\n $attrs: attrs,\n $transclude: transcludeFn\n };\n\n var controller = directive.controller;\n if (controller === '@') {\n controller = attrs[directive.name];\n }\n\n var controllerInstance = $controller(controller, locals, true, directive.controllerAs);\n\n // For directives with element transclusion the element is a comment.\n // In this case .data will not attach any data.\n // Instead, we save the controllers for the element in a local hash and attach to .data\n // later, once we have the actual element.\n elementControllers[directive.name] = controllerInstance;\n $element.data('$' + directive.name + 'Controller', controllerInstance.instance);\n }\n return elementControllers;\n }\n\n // Depending upon the context in which a directive finds itself it might need to have a new isolated\n // or child scope created. For instance:\n // * if the directive has been pulled into a template because another directive with a higher priority\n // asked for element transclusion\n // * if the directive itself asks for transclusion but it is at the root of a template and the original\n // element was replaced. See https://github.com/angular/angular.js/issues/12936\n function markDirectiveScope(directives, isolateScope, newScope) {\n for (var j = 0, jj = directives.length; j < jj; j++) {\n directives[j] = inherit(directives[j], {$$isolateScope: isolateScope, $$newScope: newScope});\n }\n }\n\n /**\n * looks up the directive and decorates it with exception handling and proper parameters. We\n * call this the boundDirective.\n *\n * @param {string} name name of the directive to look up.\n * @param {string} location The directive must be found in specific format.\n * String containing any of theses characters:\n *\n * * `E`: element name\n * * `A': attribute\n * * `C`: class\n * * `M`: comment\n * @returns {boolean} true if directive was added.\n */\n function addDirective(tDirectives, name, location, maxPriority, ignoreDirective, startAttrName,\n endAttrName) {\n if (name === ignoreDirective) return null;\n var match = null;\n if (hasDirectives.hasOwnProperty(name)) {\n for (var directive, directives = $injector.get(name + Suffix),\n i = 0, ii = directives.length; i < ii; i++) {\n directive = directives[i];\n if ((isUndefined(maxPriority) || maxPriority > directive.priority) &&\n directive.restrict.indexOf(location) !== -1) {\n if (startAttrName) {\n directive = inherit(directive, {$$start: startAttrName, $$end: endAttrName});\n }\n if (!directive.$$bindings) {\n var bindings = directive.$$bindings =\n parseDirectiveBindings(directive, directive.name);\n if (isObject(bindings.isolateScope)) {\n directive.$$isolateBindings = bindings.isolateScope;\n }\n }\n tDirectives.push(directive);\n match = directive;\n }\n }\n }\n return match;\n }\n\n\n /**\n * looks up the directive and returns true if it is a multi-element directive,\n * and therefore requires DOM nodes between -start and -end markers to be grouped\n * together.\n *\n * @param {string} name name of the directive to look up.\n * @returns true if directive was registered as multi-element.\n */\n function directiveIsMultiElement(name) {\n if (hasDirectives.hasOwnProperty(name)) {\n for (var directive, directives = $injector.get(name + Suffix),\n i = 0, ii = directives.length; i < ii; i++) {\n directive = directives[i];\n if (directive.multiElement) {\n return true;\n }\n }\n }\n return false;\n }\n\n /**\n * When the element is replaced with HTML template then the new attributes\n * on the template need to be merged with the existing attributes in the DOM.\n * The desired effect is to have both of the attributes present.\n *\n * @param {object} dst destination attributes (original DOM)\n * @param {object} src source attributes (from the directive template)\n */\n function mergeTemplateAttributes(dst, src) {\n var srcAttr = src.$attr,\n dstAttr = dst.$attr;\n\n // reapply the old attributes to the new element\n forEach(dst, function(value, key) {\n if (key.charAt(0) !== '$') {\n if (src[key] && src[key] !== value) {\n if (value.length) {\n value += (key === 'style' ? ';' : ' ') + src[key];\n } else {\n value = src[key];\n }\n }\n dst.$set(key, value, true, srcAttr[key]);\n }\n });\n\n // copy the new attributes on the old attrs object\n forEach(src, function(value, key) {\n // Check if we already set this attribute in the loop above.\n // `dst` will never contain hasOwnProperty as DOM parser won't let it.\n // You will get an \"InvalidCharacterError: DOM Exception 5\" error if you\n // have an attribute like \"has-own-property\" or \"data-has-own-property\", etc.\n if (!dst.hasOwnProperty(key) && key.charAt(0) !== '$') {\n dst[key] = value;\n\n if (key !== 'class' && key !== 'style') {\n dstAttr[key] = srcAttr[key];\n }\n }\n });\n }\n\n\n function compileTemplateUrl(directives, $compileNode, tAttrs,\n $rootElement, childTranscludeFn, preLinkFns, postLinkFns, previousCompileContext) {\n var linkQueue = [],\n afterTemplateNodeLinkFn,\n afterTemplateChildLinkFn,\n beforeTemplateCompileNode = $compileNode[0],\n origAsyncDirective = directives.shift(),\n derivedSyncDirective = inherit(origAsyncDirective, {\n templateUrl: null, transclude: null, replace: null, $$originalDirective: origAsyncDirective\n }),\n templateUrl = (isFunction(origAsyncDirective.templateUrl))\n ? origAsyncDirective.templateUrl($compileNode, tAttrs)\n : origAsyncDirective.templateUrl,\n templateNamespace = origAsyncDirective.templateNamespace;\n\n $compileNode.empty();\n\n $templateRequest(templateUrl)\n .then(function(content) {\n var compileNode, tempTemplateAttrs, $template, childBoundTranscludeFn;\n\n content = denormalizeTemplate(content);\n\n if (origAsyncDirective.replace) {\n if (jqLiteIsTextNode(content)) {\n $template = [];\n } else {\n $template = removeComments(wrapTemplate(templateNamespace, trim(content)));\n }\n compileNode = $template[0];\n\n if ($template.length !== 1 || compileNode.nodeType !== NODE_TYPE_ELEMENT) {\n throw $compileMinErr('tplrt',\n 'Template for directive \\'{0}\\' must have exactly one root element. {1}',\n origAsyncDirective.name, templateUrl);\n }\n\n tempTemplateAttrs = {$attr: {}};\n replaceWith($rootElement, $compileNode, compileNode);\n var templateDirectives = collectDirectives(compileNode, [], tempTemplateAttrs);\n\n if (isObject(origAsyncDirective.scope)) {\n // the original directive that caused the template to be loaded async required\n // an isolate scope\n markDirectiveScope(templateDirectives, true);\n }\n directives = templateDirectives.concat(directives);\n mergeTemplateAttributes(tAttrs, tempTemplateAttrs);\n } else {\n compileNode = beforeTemplateCompileNode;\n $compileNode.html(content);\n }\n\n directives.unshift(derivedSyncDirective);\n\n afterTemplateNodeLinkFn = applyDirectivesToNode(directives, compileNode, tAttrs,\n childTranscludeFn, $compileNode, origAsyncDirective, preLinkFns, postLinkFns,\n previousCompileContext);\n forEach($rootElement, function(node, i) {\n if (node === compileNode) {\n $rootElement[i] = $compileNode[0];\n }\n });\n afterTemplateChildLinkFn = compileNodes($compileNode[0].childNodes, childTranscludeFn);\n\n while (linkQueue.length) {\n var scope = linkQueue.shift(),\n beforeTemplateLinkNode = linkQueue.shift(),\n linkRootElement = linkQueue.shift(),\n boundTranscludeFn = linkQueue.shift(),\n linkNode = $compileNode[0];\n\n if (scope.$$destroyed) continue;\n\n if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {\n var oldClasses = beforeTemplateLinkNode.className;\n\n if (!(previousCompileContext.hasElementTranscludeDirective &&\n origAsyncDirective.replace)) {\n // it was cloned therefore we have to clone as well.\n linkNode = jqLiteClone(compileNode);\n }\n replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);\n\n // Copy in CSS classes from original node\n safeAddClass(jqLite(linkNode), oldClasses);\n }\n if (afterTemplateNodeLinkFn.transcludeOnThisElement) {\n childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude, boundTranscludeFn);\n } else {\n childBoundTranscludeFn = boundTranscludeFn;\n }\n afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, linkNode, $rootElement,\n childBoundTranscludeFn);\n }\n linkQueue = null;\n }).catch(function(error) {\n if (isError(error)) {\n $exceptionHandler(error);\n }\n });\n\n return function delayedNodeLinkFn(ignoreChildLinkFn, scope, node, rootElement, boundTranscludeFn) {\n var childBoundTranscludeFn = boundTranscludeFn;\n if (scope.$$destroyed) return;\n if (linkQueue) {\n linkQueue.push(scope,\n node,\n rootElement,\n childBoundTranscludeFn);\n } else {\n if (afterTemplateNodeLinkFn.transcludeOnThisElement) {\n childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude, boundTranscludeFn);\n }\n afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, node, rootElement, childBoundTranscludeFn);\n }\n };\n }\n\n\n /**\n * Sorting function for bound directives.\n */\n function byPriority(a, b) {\n var diff = b.priority - a.priority;\n if (diff !== 0) return diff;\n if (a.name !== b.name) return (a.name < b.name) ? -1 : 1;\n return a.index - b.index;\n }\n\n function assertNoDuplicate(what, previousDirective, directive, element) {\n\n function wrapModuleNameIfDefined(moduleName) {\n return moduleName ?\n (' (module: ' + moduleName + ')') :\n '';\n }\n\n if (previousDirective) {\n throw $compileMinErr('multidir', 'Multiple directives [{0}{1}, {2}{3}] asking for {4} on: {5}',\n previousDirective.name, wrapModuleNameIfDefined(previousDirective.$$moduleName),\n directive.name, wrapModuleNameIfDefined(directive.$$moduleName), what, startingTag(element));\n }\n }\n\n\n function addTextInterpolateDirective(directives, text) {\n var interpolateFn = $interpolate(text, true);\n if (interpolateFn) {\n directives.push({\n priority: 0,\n compile: function textInterpolateCompileFn(templateNode) {\n var templateNodeParent = templateNode.parent(),\n hasCompileParent = !!templateNodeParent.length;\n\n // When transcluding a template that has bindings in the root\n // we don't have a parent and thus need to add the class during linking fn.\n if (hasCompileParent) compile.$$addBindingClass(templateNodeParent);\n\n return function textInterpolateLinkFn(scope, node) {\n var parent = node.parent();\n if (!hasCompileParent) compile.$$addBindingClass(parent);\n compile.$$addBindingInfo(parent, interpolateFn.expressions);\n scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {\n node[0].nodeValue = value;\n });\n };\n }\n });\n }\n }\n\n\n function wrapTemplate(type, template) {\n type = lowercase(type || 'html');\n switch (type) {\n case 'svg':\n case 'math':\n var wrapper = window.document.createElement('div');\n wrapper.innerHTML = '<' + type + '>' + template + '';\n return wrapper.childNodes[0].childNodes;\n default:\n return template;\n }\n }\n\n\n function getTrustedAttrContext(nodeName, attrNormalizedName) {\n if (attrNormalizedName === 'srcdoc') {\n return $sce.HTML;\n }\n // All nodes with src attributes require a RESOURCE_URL value, except for\n // img and various html5 media nodes, which require the MEDIA_URL context.\n if (attrNormalizedName === 'src' || attrNormalizedName === 'ngSrc') {\n if (['img', 'video', 'audio', 'source', 'track'].indexOf(nodeName) === -1) {\n return $sce.RESOURCE_URL;\n }\n return $sce.MEDIA_URL;\n } else if (attrNormalizedName === 'xlinkHref') {\n // Some xlink:href are okay, most aren't\n if (nodeName === 'image') return $sce.MEDIA_URL;\n if (nodeName === 'a') return $sce.URL;\n return $sce.RESOURCE_URL;\n } else if (\n // Formaction\n (nodeName === 'form' && attrNormalizedName === 'action') ||\n // If relative URLs can go where they are not expected to, then\n // all sorts of trust issues can arise.\n (nodeName === 'base' && attrNormalizedName === 'href') ||\n // links can be stylesheets or imports, which can run script in the current origin\n (nodeName === 'link' && attrNormalizedName === 'href')\n ) {\n return $sce.RESOURCE_URL;\n } else if (nodeName === 'a' && (attrNormalizedName === 'href' ||\n attrNormalizedName === 'ngHref')) {\n return $sce.URL;\n }\n }\n\n function getTrustedPropContext(nodeName, propNormalizedName) {\n var prop = propNormalizedName.toLowerCase();\n return PROP_CONTEXTS[nodeName + '|' + prop] || PROP_CONTEXTS['*|' + prop];\n }\n\n function sanitizeSrcsetPropertyValue(value) {\n return sanitizeSrcset($sce.valueOf(value), 'ng-prop-srcset');\n }\n function addPropertyDirective(node, directives, attrName, propName) {\n if (EVENT_HANDLER_ATTR_REGEXP.test(propName)) {\n throw $compileMinErr('nodomevents', 'Property bindings for HTML DOM event properties are disallowed');\n }\n\n var nodeName = nodeName_(node);\n var trustedContext = getTrustedPropContext(nodeName, propName);\n\n var sanitizer = identity;\n // Sanitize img[srcset] + source[srcset] values.\n if (propName === 'srcset' && (nodeName === 'img' || nodeName === 'source')) {\n sanitizer = sanitizeSrcsetPropertyValue;\n } else if (trustedContext) {\n sanitizer = $sce.getTrusted.bind($sce, trustedContext);\n }\n\n directives.push({\n priority: 100,\n compile: function ngPropCompileFn(_, attr) {\n var ngPropGetter = $parse(attr[attrName]);\n var ngPropWatch = $parse(attr[attrName], function sceValueOf(val) {\n // Unwrap the value to compare the actual inner safe value, not the wrapper object.\n return $sce.valueOf(val);\n });\n\n return {\n pre: function ngPropPreLinkFn(scope, $element) {\n function applyPropValue() {\n var propValue = ngPropGetter(scope);\n $element[0][propName] = sanitizer(propValue);\n }\n\n applyPropValue();\n scope.$watch(ngPropWatch, applyPropValue);\n }\n };\n }\n });\n }\n\n function addEventDirective(directives, attrName, eventName) {\n directives.push(\n createEventDirective($parse, $rootScope, $exceptionHandler, attrName, eventName, /*forceAsync=*/false)\n );\n }\n\n function addAttrInterpolateDirective(node, directives, value, name, isNgAttr) {\n var nodeName = nodeName_(node);\n var trustedContext = getTrustedAttrContext(nodeName, name);\n var mustHaveExpression = !isNgAttr;\n var allOrNothing = ALL_OR_NOTHING_ATTRS[name] || isNgAttr;\n\n var interpolateFn = $interpolate(value, mustHaveExpression, trustedContext, allOrNothing);\n\n // no interpolation found -> ignore\n if (!interpolateFn) return;\n\n if (name === 'multiple' && nodeName === 'select') {\n throw $compileMinErr('selmulti',\n 'Binding to the \\'multiple\\' attribute is not supported. Element: {0}',\n startingTag(node));\n }\n\n if (EVENT_HANDLER_ATTR_REGEXP.test(name)) {\n throw $compileMinErr('nodomevents', 'Interpolations for HTML DOM event attributes are disallowed');\n }\n\n directives.push({\n priority: 100,\n compile: function() {\n return {\n pre: function attrInterpolatePreLinkFn(scope, element, attr) {\n var $$observers = (attr.$$observers || (attr.$$observers = createMap()));\n\n // If the attribute has changed since last $interpolate()ed\n var newValue = attr[name];\n if (newValue !== value) {\n // we need to interpolate again since the attribute value has been updated\n // (e.g. by another directive's compile function)\n // ensure unset/empty values make interpolateFn falsy\n interpolateFn = newValue && $interpolate(newValue, true, trustedContext, allOrNothing);\n value = newValue;\n }\n\n // if attribute was updated so that there is no interpolation going on we don't want to\n // register any observers\n if (!interpolateFn) return;\n\n // initialize attr object so that it's ready in case we need the value for isolate\n // scope initialization, otherwise the value would not be available from isolate\n // directive's linking fn during linking phase\n attr[name] = interpolateFn(scope);\n\n ($$observers[name] || ($$observers[name] = [])).$$inter = true;\n (attr.$$observers && attr.$$observers[name].$$scope || scope).\n $watch(interpolateFn, function interpolateFnWatchAction(newValue, oldValue) {\n //special case for class attribute addition + removal\n //so that class changes can tap into the animation\n //hooks provided by the $animate service. Be sure to\n //skip animations when the first digest occurs (when\n //both the new and the old values are the same) since\n //the CSS classes are the non-interpolated values\n if (name === 'class' && newValue !== oldValue) {\n attr.$updateClass(newValue, oldValue);\n } else {\n attr.$set(name, newValue);\n }\n });\n }\n };\n }\n });\n }\n\n\n /**\n * This is a special jqLite.replaceWith, which can replace items which\n * have no parents, provided that the containing jqLite collection is provided.\n *\n * @param {JqLite=} $rootElement The root of the compile tree. Used so that we can replace nodes\n * in the root of the tree.\n * @param {JqLite} elementsToRemove The jqLite element which we are going to replace. We keep\n * the shell, but replace its DOM node reference.\n * @param {Node} newNode The new DOM node.\n */\n function replaceWith($rootElement, elementsToRemove, newNode) {\n var firstElementToRemove = elementsToRemove[0],\n removeCount = elementsToRemove.length,\n parent = firstElementToRemove.parentNode,\n i, ii;\n\n if ($rootElement) {\n for (i = 0, ii = $rootElement.length; i < ii; i++) {\n if ($rootElement[i] === firstElementToRemove) {\n $rootElement[i++] = newNode;\n for (var j = i, j2 = j + removeCount - 1,\n jj = $rootElement.length;\n j < jj; j++, j2++) {\n if (j2 < jj) {\n $rootElement[j] = $rootElement[j2];\n } else {\n delete $rootElement[j];\n }\n }\n $rootElement.length -= removeCount - 1;\n\n // If the replaced element is also the jQuery .context then replace it\n // .context is a deprecated jQuery api, so we should set it only when jQuery set it\n // http://api.jquery.com/context/\n if ($rootElement.context === firstElementToRemove) {\n $rootElement.context = newNode;\n }\n break;\n }\n }\n }\n\n if (parent) {\n parent.replaceChild(newNode, firstElementToRemove);\n }\n\n // Append all the `elementsToRemove` to a fragment. This will...\n // - remove them from the DOM\n // - allow them to still be traversed with .nextSibling\n // - allow a single fragment.qSA to fetch all elements being removed\n var fragment = window.document.createDocumentFragment();\n for (i = 0; i < removeCount; i++) {\n fragment.appendChild(elementsToRemove[i]);\n }\n\n if (jqLite.hasData(firstElementToRemove)) {\n // Copy over user data (that includes AngularJS's $scope etc.). Don't copy private\n // data here because there's no public interface in jQuery to do that and copying over\n // event listeners (which is the main use of private data) wouldn't work anyway.\n jqLite.data(newNode, jqLite.data(firstElementToRemove));\n\n // Remove $destroy event listeners from `firstElementToRemove`\n jqLite(firstElementToRemove).off('$destroy');\n }\n\n // Cleanup any data/listeners on the elements and children.\n // This includes invoking the $destroy event on any elements with listeners.\n jqLite.cleanData(fragment.querySelectorAll('*'));\n\n // Update the jqLite collection to only contain the `newNode`\n for (i = 1; i < removeCount; i++) {\n delete elementsToRemove[i];\n }\n elementsToRemove[0] = newNode;\n elementsToRemove.length = 1;\n }\n\n\n function cloneAndAnnotateFn(fn, annotation) {\n return extend(function() { return fn.apply(null, arguments); }, fn, annotation);\n }\n\n\n function invokeLinkFn(linkFn, scope, $element, attrs, controllers, transcludeFn) {\n try {\n linkFn(scope, $element, attrs, controllers, transcludeFn);\n } catch (e) {\n $exceptionHandler(e, startingTag($element));\n }\n }\n\n function strictBindingsCheck(attrName, directiveName) {\n if (strictComponentBindingsEnabled) {\n throw $compileMinErr('missingattr',\n 'Attribute \\'{0}\\' of \\'{1}\\' is non-optional and must be set!',\n attrName, directiveName);\n }\n }\n\n // Set up $watches for isolate scope and controller bindings.\n function initializeDirectiveBindings(scope, attrs, destination, bindings, directive) {\n var removeWatchCollection = [];\n var initialChanges = {};\n var changes;\n\n forEach(bindings, function initializeBinding(definition, scopeName) {\n var attrName = definition.attrName,\n optional = definition.optional,\n mode = definition.mode, // @, =, <, or &\n lastValue,\n parentGet, parentSet, compare, removeWatch;\n\n switch (mode) {\n\n case '@':\n if (!optional && !hasOwnProperty.call(attrs, attrName)) {\n strictBindingsCheck(attrName, directive.name);\n destination[scopeName] = attrs[attrName] = undefined;\n\n }\n removeWatch = attrs.$observe(attrName, function(value) {\n if (isString(value) || isBoolean(value)) {\n var oldValue = destination[scopeName];\n recordChanges(scopeName, value, oldValue);\n destination[scopeName] = value;\n }\n });\n attrs.$$observers[attrName].$$scope = scope;\n lastValue = attrs[attrName];\n if (isString(lastValue)) {\n // If the attribute has been provided then we trigger an interpolation to ensure\n // the value is there for use in the link fn\n destination[scopeName] = $interpolate(lastValue)(scope);\n } else if (isBoolean(lastValue)) {\n // If the attributes is one of the BOOLEAN_ATTR then AngularJS will have converted\n // the value to boolean rather than a string, so we special case this situation\n destination[scopeName] = lastValue;\n }\n initialChanges[scopeName] = new SimpleChange(_UNINITIALIZED_VALUE, destination[scopeName]);\n removeWatchCollection.push(removeWatch);\n break;\n\n case '=':\n if (!hasOwnProperty.call(attrs, attrName)) {\n if (optional) break;\n strictBindingsCheck(attrName, directive.name);\n attrs[attrName] = undefined;\n }\n if (optional && !attrs[attrName]) break;\n\n parentGet = $parse(attrs[attrName]);\n if (parentGet.literal) {\n compare = equals;\n } else {\n compare = simpleCompare;\n }\n parentSet = parentGet.assign || function() {\n // reset the change, or we will throw this exception on every $digest\n lastValue = destination[scopeName] = parentGet(scope);\n throw $compileMinErr('nonassign',\n 'Expression \\'{0}\\' in attribute \\'{1}\\' used with directive \\'{2}\\' is non-assignable!',\n attrs[attrName], attrName, directive.name);\n };\n lastValue = destination[scopeName] = parentGet(scope);\n var parentValueWatch = function parentValueWatch(parentValue) {\n if (!compare(parentValue, destination[scopeName])) {\n // we are out of sync and need to copy\n if (!compare(parentValue, lastValue)) {\n // parent changed and it has precedence\n destination[scopeName] = parentValue;\n } else {\n // if the parent can be assigned then do so\n parentSet(scope, parentValue = destination[scopeName]);\n }\n }\n lastValue = parentValue;\n return lastValue;\n };\n parentValueWatch.$stateful = true;\n if (definition.collection) {\n removeWatch = scope.$watchCollection(attrs[attrName], parentValueWatch);\n } else {\n removeWatch = scope.$watch($parse(attrs[attrName], parentValueWatch), null, parentGet.literal);\n }\n removeWatchCollection.push(removeWatch);\n break;\n\n case '<':\n if (!hasOwnProperty.call(attrs, attrName)) {\n if (optional) break;\n strictBindingsCheck(attrName, directive.name);\n attrs[attrName] = undefined;\n }\n if (optional && !attrs[attrName]) break;\n\n parentGet = $parse(attrs[attrName]);\n var isLiteral = parentGet.literal;\n\n var initialValue = destination[scopeName] = parentGet(scope);\n initialChanges[scopeName] = new SimpleChange(_UNINITIALIZED_VALUE, destination[scopeName]);\n\n removeWatch = scope[definition.collection ? '$watchCollection' : '$watch'](parentGet, function parentValueWatchAction(newValue, oldValue) {\n if (oldValue === newValue) {\n if (oldValue === initialValue || (isLiteral && equals(oldValue, initialValue))) {\n return;\n }\n oldValue = initialValue;\n }\n recordChanges(scopeName, newValue, oldValue);\n destination[scopeName] = newValue;\n });\n\n removeWatchCollection.push(removeWatch);\n break;\n\n case '&':\n if (!optional && !hasOwnProperty.call(attrs, attrName)) {\n strictBindingsCheck(attrName, directive.name);\n }\n // Don't assign Object.prototype method to scope\n parentGet = attrs.hasOwnProperty(attrName) ? $parse(attrs[attrName]) : noop;\n\n // Don't assign noop to destination if expression is not valid\n if (parentGet === noop && optional) break;\n\n destination[scopeName] = function(locals) {\n return parentGet(scope, locals);\n };\n break;\n }\n });\n\n function recordChanges(key, currentValue, previousValue) {\n if (isFunction(destination.$onChanges) && !simpleCompare(currentValue, previousValue)) {\n // If we have not already scheduled the top level onChangesQueue handler then do so now\n if (!onChangesQueue) {\n scope.$$postDigest(flushOnChangesQueue);\n onChangesQueue = [];\n }\n // If we have not already queued a trigger of onChanges for this controller then do so now\n if (!changes) {\n changes = {};\n onChangesQueue.push(triggerOnChangesHook);\n }\n // If the has been a change on this property already then we need to reuse the previous value\n if (changes[key]) {\n previousValue = changes[key].previousValue;\n }\n // Store this change\n changes[key] = new SimpleChange(previousValue, currentValue);\n }\n }\n\n function triggerOnChangesHook() {\n destination.$onChanges(changes);\n // Now clear the changes so that we schedule onChanges when more changes arrive\n changes = undefined;\n }\n\n return {\n initialChanges: initialChanges,\n removeWatches: removeWatchCollection.length && function removeWatches() {\n for (var i = 0, ii = removeWatchCollection.length; i < ii; ++i) {\n removeWatchCollection[i]();\n }\n }\n };\n }\n }];\n}\n\nfunction SimpleChange(previous, current) {\n this.previousValue = previous;\n this.currentValue = current;\n}\nSimpleChange.prototype.isFirstChange = function() { return this.previousValue === _UNINITIALIZED_VALUE; };\n\n\nvar PREFIX_REGEXP = /^((?:x|data)[:\\-_])/i;\nvar SPECIAL_CHARS_REGEXP = /[:\\-_]+(.)/g;\n\n/**\n * Converts all accepted directives format into proper directive name.\n * @param name Name to normalize\n */\nfunction directiveNormalize(name) {\n return name\n .replace(PREFIX_REGEXP, '')\n .replace(SPECIAL_CHARS_REGEXP, function(_, letter, offset) {\n return offset ? letter.toUpperCase() : letter;\n });\n}\n\n/**\n * @ngdoc type\n * @name $compile.directive.Attributes\n *\n * @description\n * A shared object between directive compile / linking functions which contains normalized DOM\n * element attributes. The values reflect current binding state `{{ }}`. The normalization is\n * needed since all of these are treated as equivalent in AngularJS:\n *\n * ```\n * \n * ```\n */\n\n/**\n * @ngdoc property\n * @name $compile.directive.Attributes#$attr\n *\n * @description\n * A map of DOM element attribute names to the normalized name. This is\n * needed to do reverse lookup from normalized name back to actual name.\n */\n\n\n/**\n * @ngdoc method\n * @name $compile.directive.Attributes#$set\n * @kind function\n *\n * @description\n * Set DOM element attribute value.\n *\n *\n * @param {string} name Normalized element attribute name of the property to modify. The name is\n * reverse-translated using the {@link ng.$compile.directive.Attributes#$attr $attr}\n * property to the original name.\n * @param {string} value Value to set the attribute to. The value can be an interpolated string.\n */\n\n\n\n/**\n * Closure compiler type information\n */\n\nfunction nodesetLinkingFn(\n /* angular.Scope */ scope,\n /* NodeList */ nodeList,\n /* Element */ rootElement,\n /* function(Function) */ boundTranscludeFn\n) {}\n\nfunction directiveLinkingFn(\n /* nodesetLinkingFn */ nodesetLinkingFn,\n /* angular.Scope */ scope,\n /* Node */ node,\n /* Element */ rootElement,\n /* function(Function) */ boundTranscludeFn\n) {}\n\nfunction tokenDifference(str1, str2) {\n var values = '',\n tokens1 = str1.split(/\\s+/),\n tokens2 = str2.split(/\\s+/);\n\n outer:\n for (var i = 0; i < tokens1.length; i++) {\n var token = tokens1[i];\n for (var j = 0; j < tokens2.length; j++) {\n if (token === tokens2[j]) continue outer;\n }\n values += (values.length > 0 ? ' ' : '') + token;\n }\n return values;\n}\n\nfunction removeComments(jqNodes) {\n jqNodes = jqLite(jqNodes);\n var i = jqNodes.length;\n\n if (i <= 1) {\n return jqNodes;\n }\n\n while (i--) {\n var node = jqNodes[i];\n if (node.nodeType === NODE_TYPE_COMMENT ||\n (node.nodeType === NODE_TYPE_TEXT && node.nodeValue.trim() === '')) {\n splice.call(jqNodes, i, 1);\n }\n }\n return jqNodes;\n}\n" }, { "path": "src/ng/controller.js", "content": "'use strict';\n\nvar $controllerMinErr = minErr('$controller');\n\n\nvar CNTRL_REG = /^(\\S+)(\\s+as\\s+([\\w$]+))?$/;\nfunction identifierForController(controller, ident) {\n if (ident && isString(ident)) return ident;\n if (isString(controller)) {\n var match = CNTRL_REG.exec(controller);\n if (match) return match[3];\n }\n}\n\n\n/**\n * @ngdoc provider\n * @name $controllerProvider\n * @this\n *\n * @description\n * The {@link ng.$controller $controller service} is used by AngularJS to create new\n * controllers.\n *\n * This provider allows controller registration via the\n * {@link ng.$controllerProvider#register register} method.\n */\nfunction $ControllerProvider() {\n var controllers = {};\n\n /**\n * @ngdoc method\n * @name $controllerProvider#has\n * @param {string} name Controller name to check.\n */\n this.has = function(name) {\n return controllers.hasOwnProperty(name);\n };\n\n /**\n * @ngdoc method\n * @name $controllerProvider#register\n * @param {string|Object} name Controller name, or an object map of controllers where the keys are\n * the names and the values are the constructors.\n * @param {Function|Array} constructor Controller constructor fn (optionally decorated with DI\n * annotations in the array notation).\n */\n this.register = function(name, constructor) {\n assertNotHasOwnProperty(name, 'controller');\n if (isObject(name)) {\n extend(controllers, name);\n } else {\n controllers[name] = constructor;\n }\n };\n\n this.$get = ['$injector', function($injector) {\n\n /**\n * @ngdoc service\n * @name $controller\n * @requires $injector\n *\n * @param {Function|string} constructor If called with a function then it's considered to be the\n * controller constructor function. Otherwise it's considered to be a string which is used\n * to retrieve the controller constructor using the following steps:\n *\n * * check if a controller with given name is registered via `$controllerProvider`\n * * check if evaluating the string on the current scope returns a constructor\n *\n * The string can use the `controller as property` syntax, where the controller instance is published\n * as the specified property on the `scope`; the `scope` must be injected into `locals` param for this\n * to work correctly.\n *\n * @param {Object} locals Injection locals for Controller.\n * @return {Object} Instance of given controller.\n *\n * @description\n * `$controller` service is responsible for instantiating controllers.\n *\n * It's just a simple call to {@link auto.$injector $injector}, but extracted into\n * a service, so that one can override this service with [BC version](https://gist.github.com/1649788).\n */\n return function $controller(expression, locals, later, ident) {\n // PRIVATE API:\n // param `later` --- indicates that the controller's constructor is invoked at a later time.\n // If true, $controller will allocate the object with the correct\n // prototype chain, but will not invoke the controller until a returned\n // callback is invoked.\n // param `ident` --- An optional label which overrides the label parsed from the controller\n // expression, if any.\n var instance, match, constructor, identifier;\n later = later === true;\n if (ident && isString(ident)) {\n identifier = ident;\n }\n\n if (isString(expression)) {\n match = expression.match(CNTRL_REG);\n if (!match) {\n throw $controllerMinErr('ctrlfmt',\n 'Badly formed controller string \\'{0}\\'. ' +\n 'Must match `__name__ as __id__` or `__name__`.', expression);\n }\n constructor = match[1];\n identifier = identifier || match[3];\n expression = controllers.hasOwnProperty(constructor)\n ? controllers[constructor]\n : getter(locals.$scope, constructor, true);\n\n if (!expression) {\n throw $controllerMinErr('ctrlreg',\n 'The controller with the name \\'{0}\\' is not registered.', constructor);\n }\n\n assertArgFn(expression, constructor, true);\n }\n\n if (later) {\n // Instantiate controller later:\n // This machinery is used to create an instance of the object before calling the\n // controller's constructor itself.\n //\n // This allows properties to be added to the controller before the constructor is\n // invoked. Primarily, this is used for isolate scope bindings in $compile.\n //\n // This feature is not intended for use by applications, and is thus not documented\n // publicly.\n // Object creation: http://jsperf.com/create-constructor/2\n var controllerPrototype = (isArray(expression) ?\n expression[expression.length - 1] : expression).prototype;\n instance = Object.create(controllerPrototype || null);\n\n if (identifier) {\n addIdentifier(locals, identifier, instance, constructor || expression.name);\n }\n\n return extend(function $controllerInit() {\n var result = $injector.invoke(expression, instance, locals, constructor);\n if (result !== instance && (isObject(result) || isFunction(result))) {\n instance = result;\n if (identifier) {\n // If result changed, re-assign controllerAs value to scope.\n addIdentifier(locals, identifier, instance, constructor || expression.name);\n }\n }\n return instance;\n }, {\n instance: instance,\n identifier: identifier\n });\n }\n\n instance = $injector.instantiate(expression, locals, constructor);\n\n if (identifier) {\n addIdentifier(locals, identifier, instance, constructor || expression.name);\n }\n\n return instance;\n };\n\n function addIdentifier(locals, identifier, instance, name) {\n if (!(locals && isObject(locals.$scope))) {\n throw minErr('$controller')('noscp',\n 'Cannot export controller \\'{0}\\' as \\'{1}\\'! No $scope object provided via `locals`.',\n name, identifier);\n }\n\n locals.$scope[identifier] = instance;\n }\n }];\n}\n" }, { "path": "src/ng/cookieReader.js", "content": "'use strict';\n\n/**\n * @name $$cookieReader\n * @requires $document\n *\n * @description\n * This is a private service for reading cookies used by $http and ngCookies\n *\n * @return {Object} a key/value map of the current cookies\n */\nfunction $$CookieReader($document) {\n var rawDocument = $document[0] || {};\n var lastCookies = {};\n var lastCookieString = '';\n\n function safeGetCookie(rawDocument) {\n try {\n return rawDocument.cookie || '';\n } catch (e) {\n return '';\n }\n }\n\n function safeDecodeURIComponent(str) {\n try {\n return decodeURIComponent(str);\n } catch (e) {\n return str;\n }\n }\n\n return function() {\n var cookieArray, cookie, i, index, name;\n var currentCookieString = safeGetCookie(rawDocument);\n\n if (currentCookieString !== lastCookieString) {\n lastCookieString = currentCookieString;\n cookieArray = lastCookieString.split('; ');\n lastCookies = {};\n\n for (i = 0; i < cookieArray.length; i++) {\n cookie = cookieArray[i];\n index = cookie.indexOf('=');\n if (index > 0) { //ignore nameless cookies\n name = safeDecodeURIComponent(cookie.substring(0, index));\n // the first value that is seen for a cookie is the most\n // specific one. values for the same cookie name that\n // follow are for less specific paths.\n if (isUndefined(lastCookies[name])) {\n lastCookies[name] = safeDecodeURIComponent(cookie.substring(index + 1));\n }\n }\n }\n }\n return lastCookies;\n };\n}\n\n$$CookieReader.$inject = ['$document'];\n\n/** @this */\nfunction $$CookieReaderProvider() {\n this.$get = $$CookieReader;\n}\n" }, { "path": "src/ng/directive/a.js", "content": "'use strict';\n\n/**\n * @ngdoc directive\n * @name a\n * @restrict E\n *\n * @description\n * Modifies the default behavior of the html a tag so that the default action is prevented when\n * the href attribute is empty.\n *\n * For dynamically creating `href` attributes for a tags, see the {@link ng.ngHref `ngHref`} directive.\n */\nvar htmlAnchorDirective = valueFn({\n restrict: 'E',\n compile: function(element, attr) {\n if (!attr.href && !attr.xlinkHref) {\n return function(scope, element) {\n // If the linked element is not an anchor tag anymore, do nothing\n if (element[0].nodeName.toLowerCase() !== 'a') return;\n\n // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.\n var href = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ?\n 'xlink:href' : 'href';\n element.on('click', function(event) {\n // if we have no href url, then don't navigate anywhere.\n if (!element.attr(href)) {\n event.preventDefault();\n }\n });\n };\n }\n }\n});\n" }, { "path": "src/ng/directive/attrs.js", "content": "'use strict';\n\n/**\n * @ngdoc directive\n * @name ngHref\n * @restrict A\n * @priority 99\n *\n * @description\n * Using AngularJS markup like `{{hash}}` in an href attribute will\n * make the link go to the wrong URL if the user clicks it before\n * AngularJS has a chance to replace the `{{hash}}` markup with its\n * value. Until AngularJS replaces the markup the link will be broken\n * and will most likely return a 404 error. The `ngHref` directive\n * solves this problem.\n *\n * The wrong way to write it:\n * ```html\n * link1\n * ```\n *\n * The correct way to write it:\n * ```html\n * link1\n * ```\n *\n * @element A\n * @param {template} ngHref any string which can contain `{{}}` markup.\n *\n * @example\n * This example shows various combinations of `href`, `ng-href` and `ng-click` attributes\n * in links and their different behaviors:\n \n \n
    \n link 1 (link, don't reload)
    \n link 2 (link, don't reload)
    \n link 3 (link, reload!)
    \n anchor (link, don't reload)
    \n anchor (no link)
    \n link (link, change location)\n     \n \n it('should execute ng-click but not reload when href without value', function() {\n element(by.id('link-1')).click();\n expect(element(by.model('value')).getAttribute('value')).toEqual('1');\n expect(element(by.id('link-1')).getAttribute('href')).toBe('');\n });\n\n it('should execute ng-click but not reload when href empty string', function() {\n element(by.id('link-2')).click();\n expect(element(by.model('value')).getAttribute('value')).toEqual('2');\n expect(element(by.id('link-2')).getAttribute('href')).toBe('');\n });\n\n it('should execute ng-click and change url when ng-href specified', function() {\n expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\\/123$/);\n\n element(by.id('link-3')).click();\n\n // At this point, we navigate away from an AngularJS page, so we need\n // to use browser.driver to get the base webdriver.\n\n browser.wait(function() {\n return browser.driver.getCurrentUrl().then(function(url) {\n return url.match(/\\/123$/);\n });\n }, 5000, 'page should navigate to /123');\n });\n\n it('should execute ng-click but not reload when href empty string and name specified', function() {\n element(by.id('link-4')).click();\n expect(element(by.model('value')).getAttribute('value')).toEqual('4');\n expect(element(by.id('link-4')).getAttribute('href')).toBe('');\n });\n\n it('should execute ng-click but not reload when no href but name specified', function() {\n element(by.id('link-5')).click();\n expect(element(by.model('value')).getAttribute('value')).toEqual('5');\n expect(element(by.id('link-5')).getAttribute('href')).toBe(null);\n });\n\n it('should only change url when only ng-href', function() {\n element(by.model('value')).clear();\n element(by.model('value')).sendKeys('6');\n expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\\/6$/);\n\n element(by.id('link-6')).click();\n\n // At this point, we navigate away from an AngularJS page, so we need\n // to use browser.driver to get the base webdriver.\n browser.wait(function() {\n return browser.driver.getCurrentUrl().then(function(url) {\n return url.match(/\\/6$/);\n });\n }, 5000, 'page should navigate to /6');\n });\n \n     \n */\n\n/**\n * @ngdoc directive\n * @name ngSrc\n * @restrict A\n * @priority 99\n *\n * @description\n * Using AngularJS markup like `{{hash}}` in a `src` attribute doesn't\n * work right: The browser will fetch from the URL with the literal\n * text `{{hash}}` until AngularJS replaces the expression inside\n * `{{hash}}`. The `ngSrc` directive solves this problem.\n *\n * The buggy way to write it:\n * ```html\n * \"Description\"/\n * ```\n *\n * The correct way to write it:\n * ```html\n * \"Description\"\n * ```\n *\n * @element IMG\n * @param {template} ngSrc any string which can contain `{{}}` markup.\n */\n\n/**\n * @ngdoc directive\n * @name ngSrcset\n * @restrict A\n * @priority 99\n *\n * @description\n * Using AngularJS markup like `{{hash}}` in a `srcset` attribute doesn't\n * work right: The browser will fetch from the URL with the literal\n * text `{{hash}}` until AngularJS replaces the expression inside\n * `{{hash}}`. The `ngSrcset` directive solves this problem.\n *\n * The buggy way to write it:\n * ```html\n * \"Description\"/\n * ```\n *\n * The correct way to write it:\n * ```html\n * \"Description\"\n * ```\n *\n * @element IMG\n * @param {template} ngSrcset any string which can contain `{{}}` markup.\n */\n\n/**\n * @ngdoc directive\n * @name ngDisabled\n * @restrict A\n * @priority 100\n *\n * @description\n *\n * This directive sets the `disabled` attribute on the element (typically a form control,\n * e.g. `input`, `button`, `select` etc.) if the\n * {@link guide/expression expression} inside `ngDisabled` evaluates to truthy.\n *\n * A special directive is necessary because we cannot use interpolation inside the `disabled`\n * attribute. See the {@link guide/interpolation interpolation guide} for more info.\n *\n * @example\n \n \n
    \n \n     \n \n it('should toggle button', function() {\n expect(element(by.css('button')).getAttribute('disabled')).toBeFalsy();\n element(by.model('checked')).click();\n expect(element(by.css('button')).getAttribute('disabled')).toBeTruthy();\n });\n \n     \n *\n * @param {expression} ngDisabled If the {@link guide/expression expression} is truthy,\n * then the `disabled` attribute will be set on the element\n */\n\n\n/**\n * @ngdoc directive\n * @name ngChecked\n * @restrict A\n * @priority 100\n *\n * @description\n * Sets the `checked` attribute on the element, if the expression inside `ngChecked` is truthy.\n *\n * Note that this directive should not be used together with {@link ngModel `ngModel`},\n * as this can lead to unexpected behavior.\n *\n * A special directive is necessary because we cannot use interpolation inside the `checked`\n * attribute. See the {@link guide/interpolation interpolation guide} for more info.\n *\n * @example\n \n \n
    \n \n     \n \n it('should check both checkBoxes', function() {\n expect(element(by.id('checkFollower')).getAttribute('checked')).toBeFalsy();\n element(by.model('leader')).click();\n expect(element(by.id('checkFollower')).getAttribute('checked')).toBeTruthy();\n });\n \n     \n *\n * @element INPUT\n * @param {expression} ngChecked If the {@link guide/expression expression} is truthy,\n * then the `checked` attribute will be set on the element\n */\n\n\n/**\n * @ngdoc directive\n * @name ngReadonly\n * @restrict A\n * @priority 100\n *\n * @description\n *\n * Sets the `readonly` attribute on the element, if the expression inside `ngReadonly` is truthy.\n * Note that `readonly` applies only to `input` elements with specific types. [See the input docs on\n * MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) for more information.\n *\n * A special directive is necessary because we cannot use interpolation inside the `readonly`\n * attribute. See the {@link guide/interpolation interpolation guide} for more info.\n *\n * @example\n \n \n
    \n \n     \n \n it('should toggle readonly attr', function() {\n expect(element(by.css('[type=\"text\"]')).getAttribute('readonly')).toBeFalsy();\n element(by.model('checked')).click();\n expect(element(by.css('[type=\"text\"]')).getAttribute('readonly')).toBeTruthy();\n });\n \n     \n *\n * @element INPUT\n * @param {expression} ngReadonly If the {@link guide/expression expression} is truthy,\n * then special attribute \"readonly\" will be set on the element\n */\n\n\n/**\n * @ngdoc directive\n * @name ngSelected\n * @restrict A\n * @priority 100\n *\n * @description\n *\n * Sets the `selected` attribute on the element, if the expression inside `ngSelected` is truthy.\n *\n * A special directive is necessary because we cannot use interpolation inside the `selected`\n * attribute. See the {@link guide/interpolation interpolation guide} for more info.\n *\n *
    \n * **Note:** `ngSelected` does not interact with the `select` and `ngModel` directives, it only\n * sets the `selected` attribute on the element. If you are using `ngModel` on the select, you\n * should not use `ngSelected` on the options, as `ngModel` will set the select value and\n * selected options.\n *
    \n *\n * @example\n \n \n
    \n \n     \n \n it('should select Greetings!', function() {\n expect(element(by.id('greet')).getAttribute('selected')).toBeFalsy();\n element(by.model('selected')).click();\n expect(element(by.id('greet')).getAttribute('selected')).toBeTruthy();\n });\n \n     \n *\n * @element OPTION\n * @param {expression} ngSelected If the {@link guide/expression expression} is truthy,\n * then special attribute \"selected\" will be set on the element\n */\n\n/**\n * @ngdoc directive\n * @name ngOpen\n * @restrict A\n * @priority 100\n *\n * @description\n *\n * Sets the `open` attribute on the element, if the expression inside `ngOpen` is truthy.\n *\n * A special directive is necessary because we cannot use interpolation inside the `open`\n * attribute. See the {@link guide/interpolation interpolation guide} for more info.\n *\n * ## A note about browser compatibility\n *\n * Internet Explorer and Edge do not support the `details` element, it is\n * recommended to use {@link ng.ngShow} and {@link ng.ngHide} instead.\n *\n * @example\n \n \n
    \n
    \n List\n
      \n
    • Apple
      • \n
    • Orange
      • \n
    • Durian
      • \n
    \n
    \n     \n \n it('should toggle open', function() {\n expect(element(by.id('details')).getAttribute('open')).toBeFalsy();\n element(by.model('open')).click();\n expect(element(by.id('details')).getAttribute('open')).toBeTruthy();\n });\n \n     \n *\n * @element DETAILS\n * @param {expression} ngOpen If the {@link guide/expression expression} is truthy,\n * then special attribute \"open\" will be set on the element\n */\n\nvar ngAttributeAliasDirectives = {};\n\n// boolean attrs are evaluated\nforEach(BOOLEAN_ATTR, function(propName, attrName) {\n // binding to multiple is not supported\n if (propName === 'multiple') return;\n\n function defaultLinkFn(scope, element, attr) {\n scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {\n attr.$set(attrName, !!value);\n });\n }\n\n var normalized = directiveNormalize('ng-' + attrName);\n var linkFn = defaultLinkFn;\n\n if (propName === 'checked') {\n linkFn = function(scope, element, attr) {\n // ensuring ngChecked doesn't interfere with ngModel when both are set on the same input\n if (attr.ngModel !== attr[normalized]) {\n defaultLinkFn(scope, element, attr);\n }\n };\n }\n\n ngAttributeAliasDirectives[normalized] = function() {\n return {\n restrict: 'A',\n priority: 100,\n link: linkFn\n };\n };\n});\n\n// aliased input attrs are evaluated\nforEach(ALIASED_ATTR, function(htmlAttr, ngAttr) {\n ngAttributeAliasDirectives[ngAttr] = function() {\n return {\n priority: 100,\n link: function(scope, element, attr) {\n //special case ngPattern when a literal regular expression value\n //is used as the expression (this way we don't have to watch anything).\n if (ngAttr === 'ngPattern' && attr.ngPattern.charAt(0) === '/') {\n var match = attr.ngPattern.match(REGEX_STRING_REGEXP);\n if (match) {\n attr.$set('ngPattern', new RegExp(match[1], match[2]));\n return;\n }\n }\n\n scope.$watch(attr[ngAttr], function ngAttrAliasWatchAction(value) {\n attr.$set(ngAttr, value);\n });\n }\n };\n };\n});\n\n// ng-src, ng-srcset, ng-href are interpolated\nforEach(['src', 'srcset', 'href'], function(attrName) {\n var normalized = directiveNormalize('ng-' + attrName);\n ngAttributeAliasDirectives[normalized] = ['$sce', function($sce) {\n return {\n priority: 99, // it needs to run after the attributes are interpolated\n link: function(scope, element, attr) {\n var propName = attrName,\n name = attrName;\n\n if (attrName === 'href' &&\n toString.call(element.prop('href')) === '[object SVGAnimatedString]') {\n name = 'xlinkHref';\n attr.$attr[name] = 'xlink:href';\n propName = null;\n }\n\n // We need to sanitize the url at least once, in case it is a constant\n // non-interpolated attribute.\n attr.$set(normalized, $sce.getTrustedMediaUrl(attr[normalized]));\n\n attr.$observe(normalized, function(value) {\n if (!value) {\n if (attrName === 'href') {\n attr.$set(name, null);\n }\n return;\n }\n\n attr.$set(name, value);\n\n // Support: IE 9-11 only\n // On IE, if \"ng:src\" directive declaration is used and \"src\" attribute doesn't exist\n // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need\n // to set the property as well to achieve the desired effect.\n // We use attr[attrName] value since $set might have sanitized the url.\n if (msie && propName) element.prop(propName, attr[name]);\n });\n }\n };\n }];\n});\n" }, { "path": "src/ng/directive/directives.js", "content": "'use strict';\n\nfunction ngDirective(directive) {\n if (isFunction(directive)) {\n directive = {\n link: directive\n };\n }\n directive.restrict = directive.restrict || 'AC';\n return valueFn(directive);\n}\n" }, { "path": "src/ng/directive/form.js", "content": "'use strict';\n\n/* global -nullFormCtrl, -PENDING_CLASS, -SUBMITTED_CLASS\n */\nvar nullFormCtrl = {\n $addControl: noop,\n $getControls: valueFn([]),\n $$renameControl: nullFormRenameControl,\n $removeControl: noop,\n $setValidity: noop,\n $setDirty: noop,\n $setPristine: noop,\n $setSubmitted: noop,\n $$setSubmitted: noop\n},\nPENDING_CLASS = 'ng-pending',\nSUBMITTED_CLASS = 'ng-submitted';\n\nfunction nullFormRenameControl(control, name) {\n control.$name = name;\n}\n\n/**\n * @ngdoc type\n * @name form.FormController\n *\n * @property {boolean} $pristine True if user has not interacted with the form yet.\n * @property {boolean} $dirty True if user has already interacted with the form.\n * @property {boolean} $valid True if all of the containing forms and controls are valid.\n * @property {boolean} $invalid True if at least one containing control or form is invalid.\n * @property {boolean} $submitted True if user has submitted the form even if its invalid.\n *\n * @property {Object} $pending An object hash, containing references to controls or forms with\n * pending validators, where:\n *\n * - keys are validations tokens (error names).\n * - values are arrays of controls or forms that have a pending validator for the given error name.\n *\n * See {@link form.FormController#$error $error} for a list of built-in validation tokens.\n *\n * @property {Object} $error An object hash, containing references to controls or forms with failing\n * validators, where:\n *\n * - keys are validation tokens (error names),\n * - values are arrays of controls or forms that have a failing validator for the given error name.\n *\n * Built-in validation tokens:\n * - `email`\n * - `max`\n * - `maxlength`\n * - `min`\n * - `minlength`\n * - `number`\n * - `pattern`\n * - `required`\n * - `url`\n * - `date`\n * - `datetimelocal`\n * - `time`\n * - `week`\n * - `month`\n *\n * @description\n * `FormController` keeps track of all its controls and nested forms as well as the state of them,\n * such as being valid/invalid or dirty/pristine.\n *\n * Each {@link ng.directive:form form} directive creates an instance\n * of `FormController`.\n *\n */\n//asks for $scope to fool the BC controller module\nFormController.$inject = ['$element', '$attrs', '$scope', '$animate', '$interpolate'];\nfunction FormController($element, $attrs, $scope, $animate, $interpolate) {\n this.$$controls = [];\n\n // init state\n this.$error = {};\n this.$$success = {};\n this.$pending = undefined;\n this.$name = $interpolate($attrs.name || $attrs.ngForm || '')($scope);\n this.$dirty = false;\n this.$pristine = true;\n this.$valid = true;\n this.$invalid = false;\n this.$submitted = false;\n this.$$parentForm = nullFormCtrl;\n\n this.$$element = $element;\n this.$$animate = $animate;\n\n setupValidity(this);\n}\n\nFormController.prototype = {\n /**\n * @ngdoc method\n * @name form.FormController#$rollbackViewValue\n *\n * @description\n * Rollback all form controls pending updates to the `$modelValue`.\n *\n * Updates may be pending by a debounced event or because the input is waiting for a some future\n * event defined in `ng-model-options`. This method is typically needed by the reset button of\n * a form that uses `ng-model-options` to pend updates.\n */\n $rollbackViewValue: function() {\n forEach(this.$$controls, function(control) {\n control.$rollbackViewValue();\n });\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$commitViewValue\n *\n * @description\n * Commit all form controls pending updates to the `$modelValue`.\n *\n * Updates may be pending by a debounced event or because the input is waiting for a some future\n * event defined in `ng-model-options`. This method is rarely needed as `NgModelController`\n * usually handles calling this in response to input events.\n */\n $commitViewValue: function() {\n forEach(this.$$controls, function(control) {\n control.$commitViewValue();\n });\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$addControl\n * @param {object} control control object, either a {@link form.FormController} or an\n * {@link ngModel.NgModelController}\n *\n * @description\n * Register a control with the form. Input elements using ngModelController do this automatically\n * when they are linked.\n *\n * Note that the current state of the control will not be reflected on the new parent form. This\n * is not an issue with normal use, as freshly compiled and linked controls are in a `$pristine`\n * state.\n *\n * However, if the method is used programmatically, for example by adding dynamically created controls,\n * or controls that have been previously removed without destroying their corresponding DOM element,\n * it's the developers responsibility to make sure the current state propagates to the parent form.\n *\n * For example, if an input control is added that is already `$dirty` and has `$error` properties,\n * calling `$setDirty()` and `$validate()` afterwards will propagate the state to the parent form.\n */\n $addControl: function(control) {\n // Breaking change - before, inputs whose name was \"hasOwnProperty\" were quietly ignored\n // and not added to the scope. Now we throw an error.\n assertNotHasOwnProperty(control.$name, 'input');\n this.$$controls.push(control);\n\n if (control.$name) {\n this[control.$name] = control;\n }\n\n control.$$parentForm = this;\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$getControls\n * @returns {Array} the controls that are currently part of this form\n *\n * @description\n * This method returns a **shallow copy** of the controls that are currently part of this form.\n * The controls can be instances of {@link form.FormController `FormController`}\n * ({@link ngForm \"child-forms\"}) and of {@link ngModel.NgModelController `NgModelController`}.\n * If you need access to the controls of child-forms, you have to call `$getControls()`\n * recursively on them.\n * This can be used for example to iterate over all controls to validate them.\n *\n * The controls can be accessed normally, but adding to, or removing controls from the array has\n * no effect on the form. Instead, use {@link form.FormController#$addControl `$addControl()`} and\n * {@link form.FormController#$removeControl `$removeControl()`} for this use-case.\n * Likewise, adding a control to, or removing a control from the form is not reflected\n * in the shallow copy. That means you should get a fresh copy from `$getControls()` every time\n * you need access to the controls.\n */\n $getControls: function() {\n return shallowCopy(this.$$controls);\n },\n\n // Private API: rename a form control\n $$renameControl: function(control, newName) {\n var oldName = control.$name;\n\n if (this[oldName] === control) {\n delete this[oldName];\n }\n this[newName] = control;\n control.$name = newName;\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$removeControl\n * @param {object} control control object, either a {@link form.FormController} or an\n * {@link ngModel.NgModelController}\n *\n * @description\n * Deregister a control from the form.\n *\n * Input elements using ngModelController do this automatically when they are destroyed.\n *\n * Note that only the removed control's validation state (`$errors`etc.) will be removed from the\n * form. `$dirty`, `$submitted` states will not be changed, because the expected behavior can be\n * different from case to case. For example, removing the only `$dirty` control from a form may or\n * may not mean that the form is still `$dirty`.\n */\n $removeControl: function(control) {\n if (control.$name && this[control.$name] === control) {\n delete this[control.$name];\n }\n forEach(this.$pending, function(value, name) {\n // eslint-disable-next-line no-invalid-this\n this.$setValidity(name, null, control);\n }, this);\n forEach(this.$error, function(value, name) {\n // eslint-disable-next-line no-invalid-this\n this.$setValidity(name, null, control);\n }, this);\n forEach(this.$$success, function(value, name) {\n // eslint-disable-next-line no-invalid-this\n this.$setValidity(name, null, control);\n }, this);\n\n arrayRemove(this.$$controls, control);\n control.$$parentForm = nullFormCtrl;\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$setDirty\n *\n * @description\n * Sets the form to a dirty state.\n *\n * This method can be called to add the 'ng-dirty' class and set the form to a dirty\n * state (ng-dirty class). This method will also propagate to parent forms.\n */\n $setDirty: function() {\n this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);\n this.$$animate.addClass(this.$$element, DIRTY_CLASS);\n this.$dirty = true;\n this.$pristine = false;\n this.$$parentForm.$setDirty();\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$setPristine\n *\n * @description\n * Sets the form to its pristine state.\n *\n * This method sets the form's `$pristine` state to true, the `$dirty` state to false, removes\n * the `ng-dirty` class and adds the `ng-pristine` class. Additionally, it sets the `$submitted`\n * state to false.\n *\n * This method will also propagate to all the controls contained in this form.\n *\n * Setting a form back to a pristine state is often useful when we want to 'reuse' a form after\n * saving or resetting it.\n */\n $setPristine: function() {\n this.$$animate.setClass(this.$$element, PRISTINE_CLASS, DIRTY_CLASS + ' ' + SUBMITTED_CLASS);\n this.$dirty = false;\n this.$pristine = true;\n this.$submitted = false;\n forEach(this.$$controls, function(control) {\n control.$setPristine();\n });\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$setUntouched\n *\n * @description\n * Sets the form to its untouched state.\n *\n * This method can be called to remove the 'ng-touched' class and set the form controls to their\n * untouched state (ng-untouched class).\n *\n * Setting a form controls back to their untouched state is often useful when setting the form\n * back to its pristine state.\n */\n $setUntouched: function() {\n forEach(this.$$controls, function(control) {\n control.$setUntouched();\n });\n },\n\n /**\n * @ngdoc method\n * @name form.FormController#$setSubmitted\n *\n * @description\n * Sets the form to its `$submitted` state. This will also set `$submitted` on all child and\n * parent forms of the form.\n */\n $setSubmitted: function() {\n var rootForm = this;\n while (rootForm.$$parentForm && (rootForm.$$parentForm !== nullFormCtrl)) {\n rootForm = rootForm.$$parentForm;\n }\n rootForm.$$setSubmitted();\n },\n\n $$setSubmitted: function() {\n this.$$animate.addClass(this.$$element, SUBMITTED_CLASS);\n this.$submitted = true;\n forEach(this.$$controls, function(control) {\n if (control.$$setSubmitted) {\n control.$$setSubmitted();\n }\n });\n }\n};\n\n/**\n * @ngdoc method\n * @name form.FormController#$setValidity\n *\n * @description\n * Change the validity state of the form, and notify the parent form (if any).\n *\n * Application developers will rarely need to call this method directly. It is used internally, by\n * {@link ngModel.NgModelController#$setValidity NgModelController.$setValidity()}, to propagate a\n * control's validity state to the parent `FormController`.\n *\n * @param {string} validationErrorKey Name of the validator. The `validationErrorKey` will be\n * assigned to either `$error[validationErrorKey]` or `$pending[validationErrorKey]` (for\n * unfulfilled `$asyncValidators`), so that it is available for data-binding. The\n * `validationErrorKey` should be in camelCase and will get converted into dash-case for\n * class name. Example: `myError` will result in `ng-valid-my-error` and\n * `ng-invalid-my-error` classes and can be bound to as `{{ someForm.$error.myError }}`.\n * @param {boolean} isValid Whether the current state is valid (true), invalid (false), pending\n * (undefined), or skipped (null). Pending is used for unfulfilled `$asyncValidators`.\n * Skipped is used by AngularJS when validators do not run because of parse errors and when\n * `$asyncValidators` do not run because any of the `$validators` failed.\n * @param {NgModelController | FormController} controller - The controller whose validity state is\n * triggering the change.\n */\naddSetValidityMethod({\n clazz: FormController,\n set: function(object, property, controller) {\n var list = object[property];\n if (!list) {\n object[property] = [controller];\n } else {\n var index = list.indexOf(controller);\n if (index === -1) {\n list.push(controller);\n }\n }\n },\n unset: function(object, property, controller) {\n var list = object[property];\n if (!list) {\n return;\n }\n arrayRemove(list, controller);\n if (list.length === 0) {\n delete object[property];\n }\n }\n});\n\n/**\n * @ngdoc directive\n * @name ngForm\n * @restrict EAC\n *\n * @description\n * Helper directive that makes it possible to create control groups inside a\n * {@link ng.directive:form `form`} directive.\n * These \"child forms\" can be used, for example, to determine the validity of a sub-group of\n * controls.\n *\n *
    \n * **Note**: `ngForm` cannot be used as a replacement for `
    `, because it lacks its\n * [built-in HTML functionality](https://html.spec.whatwg.org/#the-form-element).\n * Specifically, you cannot submit `ngForm` like a `` tag. That means,\n * you cannot send data to the server with `ngForm`, or integrate it with\n * {@link ng.directive:ngSubmit `ngSubmit`}.\n *
    \n *\n * @param {string=} ngForm|name Name of the form. If specified, the form controller will\n * be published into the related scope, under this name.\n *\n */\n\n /**\n * @ngdoc directive\n * @name form\n * @restrict E\n *\n * @description\n * Directive that instantiates\n * {@link form.FormController FormController}.\n *\n * If the `name` attribute is specified, the form controller is published onto the current scope under\n * this name.\n *\n * ## Alias: {@link ng.directive:ngForm `ngForm`}\n *\n * In AngularJS, forms can be nested. This means that the outer form is valid when all of the child\n * forms are valid as well. However, browsers do not allow nesting of `` elements, so\n * AngularJS provides the {@link ng.directive:ngForm `ngForm`} directive, which behaves identically to\n * `form` but can be nested. Nested forms can be useful, for example, if the validity of a sub-group\n * of controls needs to be determined.\n *\n * ## CSS classes\n * - `ng-valid` is set if the form is valid.\n * - `ng-invalid` is set if the form is invalid.\n * - `ng-pending` is set if the form is pending.\n * - `ng-pristine` is set if the form is pristine.\n * - `ng-dirty` is set if the form is dirty.\n * - `ng-submitted` is set if the form was submitted.\n *\n * Keep in mind that ngAnimate can detect each of these classes when added and removed.\n *\n *\n * ## Submitting a form and preventing the default action\n *\n * Since the role of forms in client-side AngularJS applications is different than in classical\n * roundtrip apps, it is desirable for the browser not to translate the form submission into a full\n * page reload that sends the data to the server. Instead some javascript logic should be triggered\n * to handle the form submission in an application-specific way.\n *\n * For this reason, AngularJS prevents the default action (form submission to the server) unless the\n * `` element has an `action` attribute specified.\n *\n * You can use one of the following two ways to specify what javascript method should be called when\n * a form is submitted:\n *\n * - {@link ng.directive:ngSubmit ngSubmit} directive on the form element\n * - {@link ng.directive:ngClick ngClick} directive on the first\n * button or input field of type submit (input[type=submit])\n *\n * To prevent double execution of the handler, use only one of the {@link ng.directive:ngSubmit ngSubmit}\n * or {@link ng.directive:ngClick ngClick} directives.\n * This is because of the following form submission rules in the HTML specification:\n *\n * - If a form has only one input field then hitting enter in this field triggers form submit\n * (`ngSubmit`)\n * - if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter\n * doesn't trigger submit\n * - if a form has one or more input fields and one or more buttons or input[type=submit] then\n * hitting enter in any of the input fields will trigger the click handler on the *first* button or\n * input[type=submit] (`ngClick`) *and* a submit handler on the enclosing form (`ngSubmit`)\n *\n * Any pending `ngModelOptions` changes will take place immediately when an enclosing form is\n * submitted. Note that `ngClick` events will occur before the model is updated. Use `ngSubmit`\n * to have access to the updated model.\n *\n * @animations\n * Animations in ngForm are triggered when any of the associated CSS classes are added and removed.\n * These classes are: `.ng-pristine`, `.ng-dirty`, `.ng-invalid` and `.ng-valid` as well as any\n * other validations that are performed within the form. Animations in ngForm are similar to how\n * they work in ngClass and animations can be hooked into using CSS transitions, keyframes as well\n * as JS animations.\n *\n * The following example shows a simple way to utilize CSS transitions to style a form element\n * that has been rendered as invalid after it has been validated:\n *\n * 
    \n * //be sure to include ngAnimate as a module to hook into more\n * //advanced animations\n * .my-form {\n *   transition:0.5s linear all;\n *   background: white;\n * }\n * .my-form.ng-invalid {\n *   background: red;\n *   color:white;\n * }\n *
    \n *\n * @example\n \n \n \n \n \n userType: \n Required!
    \n userType = {{userType}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n it('should initialize to model', function() {\n var userType = element(by.binding('userType'));\n var valid = element(by.binding('myForm.input.$valid'));\n\n expect(userType.getText()).toContain('guest');\n expect(valid.getText()).toContain('true');\n });\n\n it('should be invalid if empty', function() {\n var userType = element(by.binding('userType'));\n var valid = element(by.binding('myForm.input.$valid'));\n var userInput = element(by.model('userType'));\n\n userInput.clear();\n userInput.sendKeys('');\n\n expect(userType.getText()).toEqual('userType =');\n expect(valid.getText()).toContain('false');\n });\n \n     \n *\n * @param {string=} name Name of the form. If specified, the form controller will be published into\n * related scope, under this name.\n */\nvar formDirectiveFactory = function(isNgForm) {\n return ['$timeout', '$parse', function($timeout, $parse) {\n var formDirective = {\n name: 'form',\n restrict: isNgForm ? 'EAC' : 'E',\n require: ['form', '^^?form'], //first is the form's own ctrl, second is an optional parent form\n controller: FormController,\n compile: function ngFormCompile(formElement, attr) {\n // Setup initial state of the control\n formElement.addClass(PRISTINE_CLASS).addClass(VALID_CLASS);\n\n var nameAttr = attr.name ? 'name' : (isNgForm && attr.ngForm ? 'ngForm' : false);\n\n return {\n pre: function ngFormPreLink(scope, formElement, attr, ctrls) {\n var controller = ctrls[0];\n\n // if `action` attr is not present on the form, prevent the default action (submission)\n if (!('action' in attr)) {\n // we can't use jq events because if a form is destroyed during submission the default\n // action is not prevented. see #1238\n //\n // IE 9 is not affected because it doesn't fire a submit event and try to do a full\n // page reload if the form was destroyed by submission of the form via a click handler\n // on a button in the form. Looks like an IE9 specific bug.\n var handleFormSubmission = function(event) {\n scope.$apply(function() {\n controller.$commitViewValue();\n controller.$setSubmitted();\n });\n\n event.preventDefault();\n };\n\n formElement[0].addEventListener('submit', handleFormSubmission);\n\n // unregister the preventDefault listener so that we don't not leak memory but in a\n // way that will achieve the prevention of the default action.\n formElement.on('$destroy', function() {\n $timeout(function() {\n formElement[0].removeEventListener('submit', handleFormSubmission);\n }, 0, false);\n });\n }\n\n var parentFormCtrl = ctrls[1] || controller.$$parentForm;\n parentFormCtrl.$addControl(controller);\n\n var setter = nameAttr ? getSetter(controller.$name) : noop;\n\n if (nameAttr) {\n setter(scope, controller);\n attr.$observe(nameAttr, function(newValue) {\n if (controller.$name === newValue) return;\n setter(scope, undefined);\n controller.$$parentForm.$$renameControl(controller, newValue);\n setter = getSetter(controller.$name);\n setter(scope, controller);\n });\n }\n formElement.on('$destroy', function() {\n controller.$$parentForm.$removeControl(controller);\n setter(scope, undefined);\n extend(controller, nullFormCtrl); //stop propagating child destruction handlers upwards\n });\n }\n };\n }\n };\n\n return formDirective;\n\n function getSetter(expression) {\n if (expression === '') {\n //create an assignable expression, so forms with an empty name can be renamed later\n return $parse('this[\"\"]').assign;\n }\n return $parse(expression).assign || noop;\n }\n }];\n};\n\nvar formDirective = formDirectiveFactory();\nvar ngFormDirective = formDirectiveFactory(true);\n\n\n\n// helper methods\nfunction setupValidity(instance) {\n instance.$$classCache = {};\n instance.$$classCache[INVALID_CLASS] = !(instance.$$classCache[VALID_CLASS] = instance.$$element.hasClass(VALID_CLASS));\n}\nfunction addSetValidityMethod(context) {\n var clazz = context.clazz,\n set = context.set,\n unset = context.unset;\n\n clazz.prototype.$setValidity = function(validationErrorKey, state, controller) {\n if (isUndefined(state)) {\n createAndSet(this, '$pending', validationErrorKey, controller);\n } else {\n unsetAndCleanup(this, '$pending', validationErrorKey, controller);\n }\n if (!isBoolean(state)) {\n unset(this.$error, validationErrorKey, controller);\n unset(this.$$success, validationErrorKey, controller);\n } else {\n if (state) {\n unset(this.$error, validationErrorKey, controller);\n set(this.$$success, validationErrorKey, controller);\n } else {\n set(this.$error, validationErrorKey, controller);\n unset(this.$$success, validationErrorKey, controller);\n }\n }\n if (this.$pending) {\n cachedToggleClass(this, PENDING_CLASS, true);\n this.$valid = this.$invalid = undefined;\n toggleValidationCss(this, '', null);\n } else {\n cachedToggleClass(this, PENDING_CLASS, false);\n this.$valid = isObjectEmpty(this.$error);\n this.$invalid = !this.$valid;\n toggleValidationCss(this, '', this.$valid);\n }\n\n // re-read the state as the set/unset methods could have\n // combined state in this.$error[validationError] (used for forms),\n // where setting/unsetting only increments/decrements the value,\n // and does not replace it.\n var combinedState;\n if (this.$pending && this.$pending[validationErrorKey]) {\n combinedState = undefined;\n } else if (this.$error[validationErrorKey]) {\n combinedState = false;\n } else if (this.$$success[validationErrorKey]) {\n combinedState = true;\n } else {\n combinedState = null;\n }\n\n toggleValidationCss(this, validationErrorKey, combinedState);\n this.$$parentForm.$setValidity(validationErrorKey, combinedState, this);\n };\n\n function createAndSet(ctrl, name, value, controller) {\n if (!ctrl[name]) {\n ctrl[name] = {};\n }\n set(ctrl[name], value, controller);\n }\n\n function unsetAndCleanup(ctrl, name, value, controller) {\n if (ctrl[name]) {\n unset(ctrl[name], value, controller);\n }\n if (isObjectEmpty(ctrl[name])) {\n ctrl[name] = undefined;\n }\n }\n\n function cachedToggleClass(ctrl, className, switchValue) {\n if (switchValue && !ctrl.$$classCache[className]) {\n ctrl.$$animate.addClass(ctrl.$$element, className);\n ctrl.$$classCache[className] = true;\n } else if (!switchValue && ctrl.$$classCache[className]) {\n ctrl.$$animate.removeClass(ctrl.$$element, className);\n ctrl.$$classCache[className] = false;\n }\n }\n\n function toggleValidationCss(ctrl, validationErrorKey, isValid) {\n validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : '';\n\n cachedToggleClass(ctrl, VALID_CLASS + validationErrorKey, isValid === true);\n cachedToggleClass(ctrl, INVALID_CLASS + validationErrorKey, isValid === false);\n }\n}\n\nfunction isObjectEmpty(obj) {\n if (obj) {\n for (var prop in obj) {\n if (obj.hasOwnProperty(prop)) {\n return false;\n }\n }\n }\n return true;\n}\n" }, { "path": "src/ng/directive/input.js", "content": "'use strict';\n\n/* global\n VALID_CLASS: false,\n INVALID_CLASS: false,\n PRISTINE_CLASS: false,\n DIRTY_CLASS: false,\n ngModelMinErr: false\n*/\n\n// Regex code was initially obtained from SO prior to modification: https://stackoverflow.com/questions/3143070/javascript-regex-iso-datetime#answer-3143231\nvar ISO_DATE_REGEXP = /^\\d{4,}-[01]\\d-[0-3]\\dT[0-2]\\d:[0-5]\\d:[0-5]\\d\\.\\d+(?:[+-][0-2]\\d:[0-5]\\d|Z)$/;\n// See valid URLs in RFC3987 (http://tools.ietf.org/html/rfc3987)\n// Note: We are being more lenient, because browsers are too.\n// 1. Scheme\n// 2. Slashes\n// 3. Username\n// 4. Password\n// 5. Hostname\n// 6. Port\n// 7. Path\n// 8. Query\n// 9. Fragment\n// 1111111111111111 222 333333 44444 55555555555555555555555 666 77777777 8888888 999\nvar URL_REGEXP = /^[a-z][a-z\\d.+-]*:\\/*(?:[^:@]+(?::[^@]+)?@)?(?:[^\\s:/?#]+|\\[[a-f\\d:]+])(?::\\d+)?(?:\\/[^?#]*)?(?:\\?[^#]*)?(?:#.*)?$/i;\n// eslint-disable-next-line max-len\nvar EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;\nvar NUMBER_REGEXP = /^\\s*(-|\\+)?(\\d+|(\\d*(\\.\\d*)))([eE][+-]?\\d+)?\\s*$/;\nvar DATE_REGEXP = /^(\\d{4,})-(\\d{2})-(\\d{2})$/;\nvar DATETIMELOCAL_REGEXP = /^(\\d{4,})-(\\d\\d)-(\\d\\d)T(\\d\\d):(\\d\\d)(?::(\\d\\d)(\\.\\d{1,3})?)?$/;\nvar WEEK_REGEXP = /^(\\d{4,})-W(\\d\\d)$/;\nvar MONTH_REGEXP = /^(\\d{4,})-(\\d\\d)$/;\nvar TIME_REGEXP = /^(\\d\\d):(\\d\\d)(?::(\\d\\d)(\\.\\d{1,3})?)?$/;\n\nvar PARTIAL_VALIDATION_EVENTS = 'keydown wheel mousedown';\nvar PARTIAL_VALIDATION_TYPES = createMap();\nforEach('date,datetime-local,month,time,week'.split(','), function(type) {\n PARTIAL_VALIDATION_TYPES[type] = true;\n});\n\nvar inputType = {\n\n /**\n * @ngdoc input\n * @name input[text]\n *\n * @description\n * Standard HTML text input with AngularJS data binding, inherited by most of the `input` elements.\n *\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} required Adds `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than\n * minlength.\n * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than\n * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of\n * any length.\n * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string\n * that contains the regular expression body that will be converted to a regular expression\n * as in the ngPattern directive.\n * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}\n * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.\n * If the expression evaluates to a RegExp object, then this is used directly.\n * If the expression evaluates to a string, then it will be converted to a RegExp\n * after wrapping it in `^` and `$` characters. For instance, `\"abc\"` will be converted to\n * `new RegExp('^abc$')`.
    \n * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to\n * start at the index of the last search's match, thus not taking the whole input value into\n * account.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n * @param {boolean=} [ngTrim=true] If set to false AngularJS will not automatically trim the input.\n * This parameter is ignored for input[type=password] controls, which will never trim the\n * input.\n *\n * @example\n \n \n \n
    \n \n
    \n \n Required!\n \n Single word only!\n
    \n text = {{example.text}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var text = element(by.binding('example.text'));\n var valid = element(by.binding('myForm.input.$valid'));\n var input = element(by.model('example.text'));\n\n it('should initialize to model', function() {\n expect(text.getText()).toContain('guest');\n expect(valid.getText()).toContain('true');\n });\n\n it('should be invalid if empty', function() {\n input.clear();\n input.sendKeys('');\n\n expect(text.getText()).toEqual('text =');\n expect(valid.getText()).toContain('false');\n });\n\n it('should be invalid if multi word', function() {\n input.clear();\n input.sendKeys('hello world');\n\n expect(valid.getText()).toContain('false');\n });\n \n     \n */\n 'text': textInputType,\n\n /**\n * @ngdoc input\n * @name input[date]\n *\n * @description\n * Input with date validation and transformation. In browsers that do not yet support\n * the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601\n * date format (yyyy-MM-dd), for example: `2009-01-06`. Since many\n * modern browsers do not yet support this input type, it is important to provide cues to users on the\n * expected input format via a placeholder or label.\n *\n * The model must always be a Date object, otherwise AngularJS will throw an error.\n * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.\n *\n * The timezone to be used to read/write the `Date` instance in the model can be defined using\n * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`. This must be a\n * valid ISO date string (yyyy-MM-dd). You can also use interpolation inside this attribute\n * (e.g. `min=\"{{minDate | date:'yyyy-MM-dd'}}\"`). Note that `min` will also add native HTML5\n * constraint validation.\n * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`. This must be\n * a valid ISO date string (yyyy-MM-dd). You can also use interpolation inside this attribute\n * (e.g. `max=\"{{maxDate | date:'yyyy-MM-dd'}}\"`). Note that `max` will also add native HTML5\n * constraint validation.\n * @param {(date|string)=} ngMin Sets the `min` validation constraint to the Date / ISO date string\n * the `ngMin` expression evaluates to. Note that it does not set the `min` attribute.\n * @param {(date|string)=} ngMax Sets the `max` validation constraint to the Date / ISO date string\n * the `ngMax` expression evaluates to. Note that it does not set the `max` attribute.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n \n
    \n \n Required!\n \n Not a valid date!\n
    \n value = {{example.value | date: \"yyyy-MM-dd\"}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var value = element(by.binding('example.value | date: \"yyyy-MM-dd\"'));\n var valid = element(by.binding('myForm.input.$valid'));\n\n // currently protractor/webdriver does not support\n // sending keys to all known HTML5 input controls\n // for various browsers (see https://github.com/angular/protractor/issues/562).\n function setInput(val) {\n // set the value of the element and force validation.\n var scr = \"var ipt = document.getElementById('exampleInput'); \" +\n \"ipt.value = '\" + val + \"';\" +\n \"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('\" + val + \"'); });\";\n browser.executeScript(scr);\n }\n\n it('should initialize to model', function() {\n expect(value.getText()).toContain('2013-10-22');\n expect(valid.getText()).toContain('myForm.input.$valid = true');\n });\n\n it('should be invalid if empty', function() {\n setInput('');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n\n it('should be invalid if over max', function() {\n setInput('2015-01-01');\n expect(value.getText()).toContain('');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n \n     \n */\n 'date': createDateInputType('date', DATE_REGEXP,\n createDateParser(DATE_REGEXP, ['yyyy', 'MM', 'dd']),\n 'yyyy-MM-dd'),\n\n /**\n * @ngdoc input\n * @name input[datetime-local]\n *\n * @description\n * Input with datetime validation and transformation. In browsers that do not yet support\n * the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601\n * local datetime format (yyyy-MM-ddTHH:mm:ss), for example: `2010-12-28T14:57:00`.\n *\n * The model must always be a Date object, otherwise AngularJS will throw an error.\n * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.\n *\n * The timezone to be used to read/write the `Date` instance in the model can be defined using\n * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.\n *\n * The format of the displayed time can be adjusted with the\n * {@link ng.directive:ngModelOptions#ngModelOptions-arguments ngModelOptions} `timeSecondsFormat`\n * and `timeStripZeroSeconds`.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.\n * This must be a valid ISO datetime format (yyyy-MM-ddTHH:mm:ss). You can also use interpolation\n * inside this attribute (e.g. `min=\"{{minDatetimeLocal | date:'yyyy-MM-ddTHH:mm:ss'}}\"`).\n * Note that `min` will also add native HTML5 constraint validation.\n * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.\n * This must be a valid ISO datetime format (yyyy-MM-ddTHH:mm:ss). You can also use interpolation\n * inside this attribute (e.g. `max=\"{{maxDatetimeLocal | date:'yyyy-MM-ddTHH:mm:ss'}}\"`).\n * Note that `max` will also add native HTML5 constraint validation.\n * @param {(date|string)=} ngMin Sets the `min` validation error key to the Date / ISO datetime string\n * the `ngMin` expression evaluates to. Note that it does not set the `min` attribute.\n * @param {(date|string)=} ngMax Sets the `max` validation error key to the Date / ISO datetime string\n * the `ngMax` expression evaluates to. Note that it does not set the `max` attribute.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n \n
    \n \n Required!\n \n Not a valid date!\n
    \n value = {{example.value | date: \"yyyy-MM-ddTHH:mm:ss\"}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var value = element(by.binding('example.value | date: \"yyyy-MM-ddTHH:mm:ss\"'));\n var valid = element(by.binding('myForm.input.$valid'));\n\n // currently protractor/webdriver does not support\n // sending keys to all known HTML5 input controls\n // for various browsers (https://github.com/angular/protractor/issues/562).\n function setInput(val) {\n // set the value of the element and force validation.\n var scr = \"var ipt = document.getElementById('exampleInput'); \" +\n \"ipt.value = '\" + val + \"';\" +\n \"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('\" + val + \"'); });\";\n browser.executeScript(scr);\n }\n\n it('should initialize to model', function() {\n expect(value.getText()).toContain('2010-12-28T14:57:00');\n expect(valid.getText()).toContain('myForm.input.$valid = true');\n });\n\n it('should be invalid if empty', function() {\n setInput('');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n\n it('should be invalid if over max', function() {\n setInput('2015-01-01T23:59:00');\n expect(value.getText()).toContain('');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n \n     \n */\n 'datetime-local': createDateInputType('datetimelocal', DATETIMELOCAL_REGEXP,\n createDateParser(DATETIMELOCAL_REGEXP, ['yyyy', 'MM', 'dd', 'HH', 'mm', 'ss', 'sss']),\n 'yyyy-MM-ddTHH:mm:ss.sss'),\n\n /**\n * @ngdoc input\n * @name input[time]\n *\n * @description\n * Input with time validation and transformation. In browsers that do not yet support\n * the HTML5 time input, a text element will be used. In that case, the text must be entered in a valid ISO-8601\n * local time format (HH:mm:ss), for example: `14:57:00`. Model must be a Date object. This binding will always output a\n * Date object to the model of January 1, 1970, or local date `new Date(1970, 0, 1, HH, mm, ss)`.\n *\n * The model must always be a Date object, otherwise AngularJS will throw an error.\n * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.\n *\n * The timezone to be used to read/write the `Date` instance in the model can be defined using\n * {@link ng.directive:ngModelOptions#ngModelOptions-arguments ngModelOptions}. By default,\n * this is the timezone of the browser.\n *\n * The format of the displayed time can be adjusted with the\n * {@link ng.directive:ngModelOptions#ngModelOptions-arguments ngModelOptions} `timeSecondsFormat`\n * and `timeStripZeroSeconds`.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.\n * This must be a valid ISO time format (HH:mm:ss). You can also use interpolation inside this\n * attribute (e.g. `min=\"{{minTime | date:'HH:mm:ss'}}\"`). Note that `min` will also add\n * native HTML5 constraint validation.\n * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.\n * This must be a valid ISO time format (HH:mm:ss). You can also use interpolation inside this\n * attribute (e.g. `max=\"{{maxTime | date:'HH:mm:ss'}}\"`). Note that `max` will also add\n * native HTML5 constraint validation.\n * @param {(date|string)=} ngMin Sets the `min` validation constraint to the Date / ISO time string the\n * `ngMin` expression evaluates to. Note that it does not set the `min` attribute.\n * @param {(date|string)=} ngMax Sets the `max` validation constraint to the Date / ISO time string the\n * `ngMax` expression evaluates to. Note that it does not set the `max` attribute.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n \n
    \n \n Required!\n \n Not a valid date!\n
    \n value = {{example.value | date: \"HH:mm:ss\"}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var value = element(by.binding('example.value | date: \"HH:mm:ss\"'));\n var valid = element(by.binding('myForm.input.$valid'));\n\n // currently protractor/webdriver does not support\n // sending keys to all known HTML5 input controls\n // for various browsers (https://github.com/angular/protractor/issues/562).\n function setInput(val) {\n // set the value of the element and force validation.\n var scr = \"var ipt = document.getElementById('exampleInput'); \" +\n \"ipt.value = '\" + val + \"';\" +\n \"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('\" + val + \"'); });\";\n browser.executeScript(scr);\n }\n\n it('should initialize to model', function() {\n expect(value.getText()).toContain('14:57:00');\n expect(valid.getText()).toContain('myForm.input.$valid = true');\n });\n\n it('should be invalid if empty', function() {\n setInput('');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n\n it('should be invalid if over max', function() {\n setInput('23:59:00');\n expect(value.getText()).toContain('');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n \n     \n */\n 'time': createDateInputType('time', TIME_REGEXP,\n createDateParser(TIME_REGEXP, ['HH', 'mm', 'ss', 'sss']),\n 'HH:mm:ss.sss'),\n\n /**\n * @ngdoc input\n * @name input[week]\n *\n * @description\n * Input with week-of-the-year validation and transformation to Date. In browsers that do not yet support\n * the HTML5 week input, a text element will be used. In that case, the text must be entered in a valid ISO-8601\n * week format (yyyy-W##), for example: `2013-W02`.\n *\n * The model must always be a Date object, otherwise AngularJS will throw an error.\n * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.\n *\n * The value of the resulting Date object will be set to Thursday at 00:00:00 of the requested week,\n * due to ISO-8601 week numbering standards. Information on ISO's system for numbering the weeks of the\n * year can be found at: https://en.wikipedia.org/wiki/ISO_8601#Week_dates\n *\n * The timezone to be used to read/write the `Date` instance in the model can be defined using\n * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.\n * This must be a valid ISO week format (yyyy-W##). You can also use interpolation inside this\n * attribute (e.g. `min=\"{{minWeek | date:'yyyy-Www'}}\"`). Note that `min` will also add\n * native HTML5 constraint validation.\n * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.\n * This must be a valid ISO week format (yyyy-W##). You can also use interpolation inside this\n * attribute (e.g. `max=\"{{maxWeek | date:'yyyy-Www'}}\"`). Note that `max` will also add\n * native HTML5 constraint validation.\n * @param {(date|string)=} ngMin Sets the `min` validation constraint to the Date / ISO week string\n * the `ngMin` expression evaluates to. Note that it does not set the `min` attribute.\n * @param {(date|string)=} ngMax Sets the `max` validation constraint to the Date / ISO week string\n * the `ngMax` expression evaluates to. Note that it does not set the `max` attribute.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n
    \n \n Required!\n \n Not a valid date!\n
    \n value = {{example.value | date: \"yyyy-Www\"}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var value = element(by.binding('example.value | date: \"yyyy-Www\"'));\n var valid = element(by.binding('myForm.input.$valid'));\n\n // currently protractor/webdriver does not support\n // sending keys to all known HTML5 input controls\n // for various browsers (https://github.com/angular/protractor/issues/562).\n function setInput(val) {\n // set the value of the element and force validation.\n var scr = \"var ipt = document.getElementById('exampleInput'); \" +\n \"ipt.value = '\" + val + \"';\" +\n \"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('\" + val + \"'); });\";\n browser.executeScript(scr);\n }\n\n it('should initialize to model', function() {\n expect(value.getText()).toContain('2013-W01');\n expect(valid.getText()).toContain('myForm.input.$valid = true');\n });\n\n it('should be invalid if empty', function() {\n setInput('');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n\n it('should be invalid if over max', function() {\n setInput('2015-W01');\n expect(value.getText()).toContain('');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n \n     \n */\n 'week': createDateInputType('week', WEEK_REGEXP, weekParser, 'yyyy-Www'),\n\n /**\n * @ngdoc input\n * @name input[month]\n *\n * @description\n * Input with month validation and transformation. In browsers that do not yet support\n * the HTML5 month input, a text element will be used. In that case, the text must be entered in a valid ISO-8601\n * month format (yyyy-MM), for example: `2009-01`.\n *\n * The model must always be a Date object, otherwise AngularJS will throw an error.\n * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.\n * If the model is not set to the first of the month, the next view to model update will set it\n * to the first of the month.\n *\n * The timezone to be used to read/write the `Date` instance in the model can be defined using\n * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.\n * This must be a valid ISO month format (yyyy-MM). You can also use interpolation inside this\n * attribute (e.g. `min=\"{{minMonth | date:'yyyy-MM'}}\"`). Note that `min` will also add\n * native HTML5 constraint validation.\n * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.\n * This must be a valid ISO month format (yyyy-MM). You can also use interpolation inside this\n * attribute (e.g. `max=\"{{maxMonth | date:'yyyy-MM'}}\"`). Note that `max` will also add\n * native HTML5 constraint validation.\n * @param {(date|string)=} ngMin Sets the `min` validation constraint to the Date / ISO week string\n * the `ngMin` expression evaluates to. Note that it does not set the `min` attribute.\n * @param {(date|string)=} ngMax Sets the `max` validation constraint to the Date / ISO week string\n * the `ngMax` expression evaluates to. Note that it does not set the `max` attribute.\n\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n \n
    \n \n Required!\n \n Not a valid month!\n
    \n value = {{example.value | date: \"yyyy-MM\"}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var value = element(by.binding('example.value | date: \"yyyy-MM\"'));\n var valid = element(by.binding('myForm.input.$valid'));\n\n // currently protractor/webdriver does not support\n // sending keys to all known HTML5 input controls\n // for various browsers (https://github.com/angular/protractor/issues/562).\n function setInput(val) {\n // set the value of the element and force validation.\n var scr = \"var ipt = document.getElementById('exampleInput'); \" +\n \"ipt.value = '\" + val + \"';\" +\n \"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('\" + val + \"'); });\";\n browser.executeScript(scr);\n }\n\n it('should initialize to model', function() {\n expect(value.getText()).toContain('2013-10');\n expect(valid.getText()).toContain('myForm.input.$valid = true');\n });\n\n it('should be invalid if empty', function() {\n setInput('');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n\n it('should be invalid if over max', function() {\n setInput('2015-01');\n expect(value.getText()).toContain('');\n expect(valid.getText()).toContain('myForm.input.$valid = false');\n });\n \n     \n */\n 'month': createDateInputType('month', MONTH_REGEXP,\n createDateParser(MONTH_REGEXP, ['yyyy', 'MM']),\n 'yyyy-MM'),\n\n /**\n * @ngdoc input\n * @name input[number]\n *\n * @description\n * Text input with number validation and transformation. Sets the `number` validation\n * error if not a valid number.\n *\n *
    \n * The model must always be of type `number` otherwise AngularJS will throw an error.\n * Be aware that a string containing a number is not enough. See the {@link ngModel:numfmt}\n * error docs for more information and an example of how to convert your model if necessary.\n *
    \n *\n *\n *\n * @knownIssue\n *\n * ### HTML5 constraint validation and `allowInvalid`\n *\n * In browsers that follow the\n * [HTML5 specification](https://html.spec.whatwg.org/multipage/forms.html#number-state-%28type=number%29),\n * `input[number]` does not work as expected with {@link ngModelOptions `ngModelOptions.allowInvalid`}.\n * If a non-number is entered in the input, the browser will report the value as an empty string,\n * which means the view / model values in `ngModel` and subsequently the scope value\n * will also be an empty string.\n *\n * @knownIssue\n *\n * ### Large numbers and `step` validation\n *\n * The `step` validation will not work correctly for very large numbers (e.g. 9999999999) due to\n * Javascript's arithmetic limitations. If you need to handle large numbers, purpose-built\n * libraries (e.g. https://github.com/MikeMcl/big.js/), can be included into AngularJS by\n * {@link guide/forms#modifying-built-in-validators overwriting the validators}\n * for `number` and / or `step`, or by {@link guide/forms#custom-validation applying custom validators}\n * to an `input[text]` element. The source for `input[number]` type can be used as a starting\n * point for both implementations.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.\n * Can be interpolated.\n * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.\n * Can be interpolated.\n * @param {string=} ngMin Like `min`, sets the `min` validation error key if the value entered is less than `ngMin`,\n * but does not trigger HTML5 native validation. Takes an expression.\n * @param {string=} ngMax Like `max`, sets the `max` validation error key if the value entered is greater than `ngMax`,\n * but does not trigger HTML5 native validation. Takes an expression.\n * @param {string=} step Sets the `step` validation error key if the value entered does not fit the `step` constraint.\n * Can be interpolated.\n * @param {string=} ngStep Like `step`, sets the `step` validation error key if the value entered does not fit the `ngStep` constraint,\n * but does not trigger HTML5 native validation. Takes an expression.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than\n * minlength.\n * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than\n * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of\n * any length.\n * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string\n * that contains the regular expression body that will be converted to a regular expression\n * as in the ngPattern directive.\n * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}\n * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.\n * If the expression evaluates to a RegExp object, then this is used directly.\n * If the expression evaluates to a string, then it will be converted to a RegExp\n * after wrapping it in `^` and `$` characters. For instance, `\"abc\"` will be converted to\n * `new RegExp('^abc$')`.
    \n * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to\n * start at the index of the last search's match, thus not taking the whole input value into\n * account.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n
    \n \n Required!\n \n Not valid number!\n
    \n value = {{example.value}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n \n     \n \n var value = element(by.binding('example.value'));\n var valid = element(by.binding('myForm.input.$valid'));\n var input = element(by.model('example.value'));\n\n it('should initialize to model', function() {\n expect(value.getText()).toContain('12');\n expect(valid.getText()).toContain('true');\n });\n\n it('should be invalid if empty', function() {\n input.clear();\n input.sendKeys('');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('false');\n });\n\n it('should be invalid if over max', function() {\n input.clear();\n input.sendKeys('123');\n expect(value.getText()).toEqual('value =');\n expect(valid.getText()).toContain('false');\n });\n \n     \n */\n 'number': numberInputType,\n\n\n /**\n * @ngdoc input\n * @name input[url]\n *\n * @description\n * Text input with URL validation. Sets the `url` validation error key if the content is not a\n * valid URL.\n *\n *
    \n * **Note:** `input[url]` uses a regex to validate urls that is derived from the regex\n * used in Chromium. If you need stricter validation, you can use `ng-pattern` or modify\n * the built-in validators (see the {@link guide/forms Forms guide})\n *
    \n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than\n * minlength.\n * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than\n * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of\n * any length.\n * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string\n * that contains the regular expression body that will be converted to a regular expression\n * as in the ngPattern directive.\n * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}\n * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.\n * If the expression evaluates to a RegExp object, then this is used directly.\n * If the expression evaluates to a string, then it will be converted to a RegExp\n * after wrapping it in `^` and `$` characters. For instance, `\"abc\"` will be converted to\n * `new RegExp('^abc$')`.
    \n * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to\n * start at the index of the last search's match, thus not taking the whole input value into\n * account.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n     \n \n var text = element(by.binding('url.text'));\n var valid = element(by.binding('myForm.input.$valid'));\n var input = element(by.model('url.text'));\n\n it('should initialize to model', function() {\n expect(text.getText()).toContain('http://google.com');\n expect(valid.getText()).toContain('true');\n });\n\n it('should be invalid if empty', function() {\n input.clear();\n input.sendKeys('');\n\n expect(text.getText()).toEqual('text =');\n expect(valid.getText()).toContain('false');\n });\n\n it('should be invalid if not url', function() {\n input.clear();\n input.sendKeys('box');\n\n expect(valid.getText()).toContain('false');\n });\n \n     \n */\n 'url': urlInputType,\n\n\n /**\n * @ngdoc input\n * @name input[email]\n *\n * @description\n * Text input with email validation. Sets the `email` validation error key if not a valid email\n * address.\n *\n *
    \n * **Note:** `input[email]` uses a regex to validate email addresses that is derived from the regex\n * used in Chromium, which may not fulfill your app's requirements.\n * If you need stricter (e.g. requiring a top-level domain), or more relaxed validation\n * (e.g. allowing IPv6 address literals) you can use `ng-pattern` or\n * modify the built-in validators (see the {@link guide/forms Forms guide}).\n *
    \n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than\n * minlength.\n * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than\n * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of\n * any length.\n * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string\n * that contains the regular expression body that will be converted to a regular expression\n * as in the ngPattern directive.\n * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}\n * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.\n * If the expression evaluates to a RegExp object, then this is used directly.\n * If the expression evaluates to a string, then it will be converted to a RegExp\n * after wrapping it in `^` and `$` characters. For instance, `\"abc\"` will be converted to\n * `new RegExp('^abc$')`.
    \n * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to\n * start at the index of the last search's match, thus not taking the whole input value into\n * account.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n \n
    \n \n Required!\n \n Not valid email!\n
    \n text = {{email.text}}
    \n myForm.input.$valid = {{myForm.input.$valid}}
    \n myForm.input.$error = {{myForm.input.$error}}
    \n myForm.$valid = {{myForm.$valid}}
    \n myForm.$error.required = {{!!myForm.$error.required}}
    \n myForm.$error.email = {{!!myForm.$error.email}}
    \n \n     \n \n var text = element(by.binding('email.text'));\n var valid = element(by.binding('myForm.input.$valid'));\n var input = element(by.model('email.text'));\n\n it('should initialize to model', function() {\n expect(text.getText()).toContain('me@example.com');\n expect(valid.getText()).toContain('true');\n });\n\n it('should be invalid if empty', function() {\n input.clear();\n input.sendKeys('');\n expect(text.getText()).toEqual('text =');\n expect(valid.getText()).toContain('false');\n });\n\n it('should be invalid if not email', function() {\n input.clear();\n input.sendKeys('xxx');\n\n expect(valid.getText()).toContain('false');\n });\n \n     \n */\n 'email': emailInputType,\n\n\n /**\n * @ngdoc input\n * @name input[radio]\n *\n * @description\n * HTML radio button.\n *\n * **Note:**
    \n * All inputs controlled by {@link ngModel ngModel} (including those of type `radio`) will use the\n * value of their `name` attribute to determine the property under which their\n * {@link ngModel.NgModelController NgModelController} will be published on the parent\n * {@link form.FormController FormController}. Thus, if you use the same `name` for multiple\n * inputs of a form (e.g. a group of radio inputs), only _one_ `NgModelController` will be\n * published on the parent `FormController` under that name. The rest of the controllers will\n * continue to work as expected, but you won't be able to access them as properties on the parent\n * `FormController`.\n *\n *
    \n *

    \n * In plain HTML forms, the `name` attribute is used to identify groups of radio inputs, so\n * that the browser can manage their state (checked/unchecked) based on the state of other\n * inputs in the same group.\n *

    \n *

    \n * In AngularJS forms, this is not necessary. The input's state will be updated based on the\n * value of the underlying model data.\n *

    \n *
    \n *\n *
    \n * If you omit the `name` attribute on a radio input, `ngModel` will automatically assign it a\n * unique name.\n *
    \n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string} value The value to which the `ngModel` expression should be set when selected.\n * Note that `value` only supports `string` values, i.e. the scope model needs to be a string,\n * too. Use `ngValue` if you need complex models (`number`, `object`, ...).\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n * @param {string} ngValue AngularJS expression to which `ngModel` will be be set when the radio\n * is selected. Should be used instead of the `value` attribute if you need\n * a non-string `ngModel` (`boolean`, `array`, ...).\n *\n * @example\n \n \n \n
    \n
    \n
    \n
    \n color = {{color.name | json}}
    \n \n Note that `ng-value=\"specialValue\"` sets radio item's value to be the value of `$scope.specialValue`.\n     \n \n it('should change state', function() {\n var inputs = element.all(by.model('color.name'));\n var color = element(by.binding('color.name'));\n\n expect(color.getText()).toContain('blue');\n\n inputs.get(0).click();\n expect(color.getText()).toContain('red');\n\n inputs.get(1).click();\n expect(color.getText()).toContain('green');\n });\n \n     \n */\n 'radio': radioInputType,\n\n /**\n * @ngdoc input\n * @name input[range]\n *\n * @description\n * Native range input with validation and transformation.\n *\n * The model for the range input must always be a `Number`.\n *\n * IE9 and other browsers that do not support the `range` type fall back\n * to a text input without any default values for `min`, `max` and `step`. Model binding,\n * validation and number parsing are nevertheless supported.\n *\n * Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat `input[range]`\n * in a way that never allows the input to hold an invalid value. That means:\n * - any non-numerical value is set to `(max + min) / 2`.\n * - any numerical value that is less than the current min val, or greater than the current max val\n * is set to the min / max val respectively.\n * - additionally, the current `step` is respected, so the nearest value that satisfies a step\n * is used.\n *\n * See the [HTML Spec on input[type=range]](https://www.w3.org/TR/html5/forms.html#range-state-(type=range))\n * for more info.\n *\n * This has the following consequences for AngularJS:\n *\n * Since the element value should always reflect the current model value, a range input\n * will set the bound ngModel expression to the value that the browser has set for the\n * input element. For example, in the following input ``,\n * if the application sets `model.value = null`, the browser will set the input to `'50'`.\n * AngularJS will then set the model to `50`, to prevent input and model value being out of sync.\n *\n * That means the model for range will immediately be set to `50` after `ngModel` has been\n * initialized. It also means a range input can never have the required error.\n *\n * This does not only affect changes to the model value, but also to the values of the `min`,\n * `max`, and `step` attributes. When these change in a way that will cause the browser to modify\n * the input value, AngularJS will also update the model value.\n *\n * Automatic value adjustment also means that a range input element can never have the `required`,\n * `min`, or `max` errors.\n *\n * However, `step` is currently only fully implemented by Firefox. Other browsers have problems\n * when the step value changes dynamically - they do not adjust the element value correctly, but\n * instead may set the `stepMismatch` error. If that's the case, the AngularJS will set the `step`\n * error on the input, and set the model to `undefined`.\n *\n * Note that `input[range]` is not compatible with`ngMax`, `ngMin`, and `ngStep`, because they do\n * not set the `min` and `max` attributes, which means that the browser won't automatically adjust\n * the input value based on their values, and will always assume min = 0, max = 100, and step = 1.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} min Sets the `min` validation to ensure that the value entered is greater\n * than `min`. Can be interpolated.\n * @param {string=} max Sets the `max` validation to ensure that the value entered is less than `max`.\n * Can be interpolated.\n * @param {string=} step Sets the `step` validation to ensure that the value entered matches the `step`\n * Can be interpolated.\n * @param {expression=} ngChange AngularJS expression to be executed when the ngModel value changes due\n * to user interaction with the input element.\n * @param {expression=} ngChecked If the expression is truthy, then the `checked` attribute will be set on the\n * element. **Note** : `ngChecked` should not be used alongside `ngModel`.\n * Checkout {@link ng.directive:ngChecked ngChecked} for usage.\n *\n * @example\n \n \n \n
    \n\n Model as range: \n
    \n Model as number:
    \n Min:
    \n Max:
    \n value = {{value}}
    \n myForm.range.$valid = {{myForm.range.$valid}}
    \n myForm.range.$error = {{myForm.range.$error}}\n \n     \n     \n\n * ## Range Input with ngMin & ngMax attributes\n\n * @example\n \n \n \n
    \n Model as range: \n
    \n Model as number:
    \n Min:
    \n Max:
    \n value = {{value}}
    \n myForm.range.$valid = {{myForm.range.$valid}}
    \n myForm.range.$error = {{myForm.range.$error}}\n \n     \n     \n\n */\n 'range': rangeInputType,\n\n /**\n * @ngdoc input\n * @name input[checkbox]\n *\n * @description\n * HTML checkbox.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {expression=} ngTrueValue The value to which the expression should be set when selected.\n * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n *\n * @example\n \n \n \n
    \n
    \n
    \n value1 = {{checkboxModel.value1}}
    \n value2 = {{checkboxModel.value2}}
    \n \n     \n \n it('should change state', function() {\n var value1 = element(by.binding('checkboxModel.value1'));\n var value2 = element(by.binding('checkboxModel.value2'));\n\n expect(value1.getText()).toContain('true');\n expect(value2.getText()).toContain('YES');\n\n element(by.model('checkboxModel.value1')).click();\n element(by.model('checkboxModel.value2')).click();\n\n expect(value1.getText()).toContain('false');\n expect(value2.getText()).toContain('NO');\n });\n \n     \n */\n 'checkbox': checkboxInputType,\n\n 'hidden': noop,\n 'button': noop,\n 'submit': noop,\n 'reset': noop,\n 'file': noop\n};\n\nfunction stringBasedInputType(ctrl) {\n ctrl.$formatters.push(function(value) {\n return ctrl.$isEmpty(value) ? value : value.toString();\n });\n}\n\nfunction textInputType(scope, element, attr, ctrl, $sniffer, $browser) {\n baseInputType(scope, element, attr, ctrl, $sniffer, $browser);\n stringBasedInputType(ctrl);\n}\n\nfunction baseInputType(scope, element, attr, ctrl, $sniffer, $browser) {\n var type = lowercase(element[0].type);\n\n // In composition mode, users are still inputting intermediate text buffer,\n // hold the listener until composition is done.\n // More about composition events: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent\n if (!$sniffer.android) {\n var composing = false;\n\n element.on('compositionstart', function() {\n composing = true;\n });\n\n // Support: IE9+\n element.on('compositionupdate', function(ev) {\n // End composition when ev.data is empty string on 'compositionupdate' event.\n // When the input de-focusses (e.g. by clicking away), IE triggers 'compositionupdate'\n // instead of 'compositionend'.\n if (isUndefined(ev.data) || ev.data === '') {\n composing = false;\n }\n });\n\n element.on('compositionend', function() {\n composing = false;\n listener();\n });\n }\n\n var timeout;\n\n var listener = function(ev) {\n if (timeout) {\n $browser.defer.cancel(timeout);\n timeout = null;\n }\n if (composing) return;\n var value = element.val(),\n event = ev && ev.type;\n\n // By default we will trim the value\n // If the attribute ng-trim exists we will avoid trimming\n // If input type is 'password', the value is never trimmed\n if (type !== 'password' && (!attr.ngTrim || attr.ngTrim !== 'false')) {\n value = trim(value);\n }\n\n // If a control is suffering from bad input (due to native validators), browsers discard its\n // value, so it may be necessary to revalidate (by calling $setViewValue again) even if the\n // control's value is the same empty value twice in a row.\n if (ctrl.$viewValue !== value || (value === '' && ctrl.$$hasNativeValidators)) {\n ctrl.$setViewValue(value, event);\n }\n };\n\n // if the browser does support \"input\" event, we are fine - except on IE9 which doesn't fire the\n // input event on backspace, delete or cut\n if ($sniffer.hasEvent('input')) {\n element.on('input', listener);\n } else {\n var deferListener = function(ev, input, origValue) {\n if (!timeout) {\n timeout = $browser.defer(function() {\n timeout = null;\n if (!input || input.value !== origValue) {\n listener(ev);\n }\n });\n }\n };\n\n element.on('keydown', /** @this */ function(event) {\n var key = event.keyCode;\n\n // ignore\n // command modifiers arrows\n if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;\n\n deferListener(event, this, this.value);\n });\n\n // if user modifies input value using context menu in IE, we need \"paste\", \"cut\" and \"drop\" events to catch it\n if ($sniffer.hasEvent('paste')) {\n element.on('paste cut drop', deferListener);\n }\n }\n\n // if user paste into input using mouse on older browser\n // or form autocomplete on newer browser, we need \"change\" event to catch it\n element.on('change', listener);\n\n // Some native input types (date-family) have the ability to change validity without\n // firing any input/change events.\n // For these event types, when native validators are present and the browser supports the type,\n // check for validity changes on various DOM events.\n if (PARTIAL_VALIDATION_TYPES[type] && ctrl.$$hasNativeValidators && type === attr.type) {\n element.on(PARTIAL_VALIDATION_EVENTS, /** @this */ function(ev) {\n if (!timeout) {\n var validity = this[VALIDITY_STATE_PROPERTY];\n var origBadInput = validity.badInput;\n var origTypeMismatch = validity.typeMismatch;\n timeout = $browser.defer(function() {\n timeout = null;\n if (validity.badInput !== origBadInput || validity.typeMismatch !== origTypeMismatch) {\n listener(ev);\n }\n });\n }\n });\n }\n\n ctrl.$render = function() {\n // Workaround for Firefox validation #12102.\n var value = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;\n if (element.val() !== value) {\n element.val(value);\n }\n };\n}\n\nfunction weekParser(isoWeek, existingDate) {\n if (isDate(isoWeek)) {\n return isoWeek;\n }\n\n if (isString(isoWeek)) {\n WEEK_REGEXP.lastIndex = 0;\n var parts = WEEK_REGEXP.exec(isoWeek);\n if (parts) {\n var year = +parts[1],\n week = +parts[2],\n hours = 0,\n minutes = 0,\n seconds = 0,\n milliseconds = 0,\n firstThurs = getFirstThursdayOfYear(year),\n addDays = (week - 1) * 7;\n\n if (existingDate) {\n hours = existingDate.getHours();\n minutes = existingDate.getMinutes();\n seconds = existingDate.getSeconds();\n milliseconds = existingDate.getMilliseconds();\n }\n\n return new Date(year, 0, firstThurs.getDate() + addDays, hours, minutes, seconds, milliseconds);\n }\n }\n\n return NaN;\n}\n\nfunction createDateParser(regexp, mapping) {\n return function(iso, previousDate) {\n var parts, map;\n\n if (isDate(iso)) {\n return iso;\n }\n\n if (isString(iso)) {\n // When a date is JSON'ified to wraps itself inside of an extra\n // set of double quotes. This makes the date parsing code unable\n // to match the date string and parse it as a date.\n if (iso.charAt(0) === '\"' && iso.charAt(iso.length - 1) === '\"') {\n iso = iso.substring(1, iso.length - 1);\n }\n if (ISO_DATE_REGEXP.test(iso)) {\n return new Date(iso);\n }\n regexp.lastIndex = 0;\n parts = regexp.exec(iso);\n\n if (parts) {\n parts.shift();\n if (previousDate) {\n map = {\n yyyy: previousDate.getFullYear(),\n MM: previousDate.getMonth() + 1,\n dd: previousDate.getDate(),\n HH: previousDate.getHours(),\n mm: previousDate.getMinutes(),\n ss: previousDate.getSeconds(),\n sss: previousDate.getMilliseconds() / 1000\n };\n } else {\n map = { yyyy: 1970, MM: 1, dd: 1, HH: 0, mm: 0, ss: 0, sss: 0 };\n }\n\n forEach(parts, function(part, index) {\n if (index < mapping.length) {\n map[mapping[index]] = +part;\n }\n });\n\n var date = new Date(map.yyyy, map.MM - 1, map.dd, map.HH, map.mm, map.ss || 0, map.sss * 1000 || 0);\n if (map.yyyy < 100) {\n // In the constructor, 2-digit years map to 1900-1999.\n // Use `setFullYear()` to set the correct year.\n date.setFullYear(map.yyyy);\n }\n\n return date;\n }\n }\n\n return NaN;\n };\n}\n\nfunction createDateInputType(type, regexp, parseDate, format) {\n return function dynamicDateInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {\n badInputChecker(scope, element, attr, ctrl, type);\n baseInputType(scope, element, attr, ctrl, $sniffer, $browser);\n\n var isTimeType = type === 'time' || type === 'datetimelocal';\n var previousDate;\n var previousTimezone;\n\n ctrl.$parsers.push(function(value) {\n if (ctrl.$isEmpty(value)) return null;\n\n if (regexp.test(value)) {\n // Note: We cannot read ctrl.$modelValue, as there might be a different\n // parser/formatter in the processing chain so that the model\n // contains some different data format!\n return parseDateAndConvertTimeZoneToLocal(value, previousDate);\n }\n ctrl.$$parserName = type;\n return undefined;\n });\n\n ctrl.$formatters.push(function(value) {\n if (value && !isDate(value)) {\n throw ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);\n }\n if (isValidDate(value)) {\n previousDate = value;\n var timezone = ctrl.$options.getOption('timezone');\n\n if (timezone) {\n previousTimezone = timezone;\n previousDate = convertTimezoneToLocal(previousDate, timezone, true);\n }\n\n return formatter(value, timezone);\n } else {\n previousDate = null;\n previousTimezone = null;\n return '';\n }\n });\n\n if (isDefined(attr.min) || attr.ngMin) {\n var minVal = attr.min || $parse(attr.ngMin)(scope);\n var parsedMinVal = parseObservedDateValue(minVal);\n\n ctrl.$validators.min = function(value) {\n return !isValidDate(value) || isUndefined(parsedMinVal) || parseDate(value) >= parsedMinVal;\n };\n attr.$observe('min', function(val) {\n if (val !== minVal) {\n parsedMinVal = parseObservedDateValue(val);\n minVal = val;\n ctrl.$validate();\n }\n });\n }\n\n if (isDefined(attr.max) || attr.ngMax) {\n var maxVal = attr.max || $parse(attr.ngMax)(scope);\n var parsedMaxVal = parseObservedDateValue(maxVal);\n\n ctrl.$validators.max = function(value) {\n return !isValidDate(value) || isUndefined(parsedMaxVal) || parseDate(value) <= parsedMaxVal;\n };\n attr.$observe('max', function(val) {\n if (val !== maxVal) {\n parsedMaxVal = parseObservedDateValue(val);\n maxVal = val;\n ctrl.$validate();\n }\n });\n }\n\n function isValidDate(value) {\n // Invalid Date: getTime() returns NaN\n return value && !(value.getTime && value.getTime() !== value.getTime());\n }\n\n function parseObservedDateValue(val) {\n return isDefined(val) && !isDate(val) ? parseDateAndConvertTimeZoneToLocal(val) || undefined : val;\n }\n\n function parseDateAndConvertTimeZoneToLocal(value, previousDate) {\n var timezone = ctrl.$options.getOption('timezone');\n\n if (previousTimezone && previousTimezone !== timezone) {\n // If the timezone has changed, adjust the previousDate to the default timezone\n // so that the new date is converted with the correct timezone offset\n previousDate = addDateMinutes(previousDate, timezoneToOffset(previousTimezone));\n }\n\n var parsedDate = parseDate(value, previousDate);\n\n if (!isNaN(parsedDate) && timezone) {\n parsedDate = convertTimezoneToLocal(parsedDate, timezone);\n }\n return parsedDate;\n }\n\n function formatter(value, timezone) {\n var targetFormat = format;\n\n if (isTimeType && isString(ctrl.$options.getOption('timeSecondsFormat'))) {\n targetFormat = format\n .replace('ss.sss', ctrl.$options.getOption('timeSecondsFormat'))\n .replace(/:$/, '');\n }\n\n var formatted = $filter('date')(value, targetFormat, timezone);\n\n if (isTimeType && ctrl.$options.getOption('timeStripZeroSeconds')) {\n formatted = formatted.replace(/(?::00)?(?:\\.000)?$/, '');\n }\n\n return formatted;\n }\n };\n}\n\nfunction badInputChecker(scope, element, attr, ctrl, parserName) {\n var node = element[0];\n var nativeValidation = ctrl.$$hasNativeValidators = isObject(node.validity);\n if (nativeValidation) {\n ctrl.$parsers.push(function(value) {\n var validity = element.prop(VALIDITY_STATE_PROPERTY) || {};\n if (validity.badInput || validity.typeMismatch) {\n ctrl.$$parserName = parserName;\n return undefined;\n }\n\n return value;\n });\n }\n}\n\nfunction numberFormatterParser(ctrl) {\n ctrl.$parsers.push(function(value) {\n if (ctrl.$isEmpty(value)) return null;\n if (NUMBER_REGEXP.test(value)) return parseFloat(value);\n\n ctrl.$$parserName = 'number';\n return undefined;\n });\n\n ctrl.$formatters.push(function(value) {\n if (!ctrl.$isEmpty(value)) {\n if (!isNumber(value)) {\n throw ngModelMinErr('numfmt', 'Expected `{0}` to be a number', value);\n }\n value = value.toString();\n }\n return value;\n });\n}\n\nfunction parseNumberAttrVal(val) {\n if (isDefined(val) && !isNumber(val)) {\n val = parseFloat(val);\n }\n return !isNumberNaN(val) ? val : undefined;\n}\n\nfunction isNumberInteger(num) {\n // See http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript#14794066\n // (minus the assumption that `num` is a number)\n\n // eslint-disable-next-line no-bitwise\n return (num | 0) === num;\n}\n\nfunction countDecimals(num) {\n var numString = num.toString();\n var decimalSymbolIndex = numString.indexOf('.');\n\n if (decimalSymbolIndex === -1) {\n if (-1 < num && num < 1) {\n // It may be in the exponential notation format (`1e-X`)\n var match = /e-(\\d+)$/.exec(numString);\n\n if (match) {\n return Number(match[1]);\n }\n }\n\n return 0;\n }\n\n return numString.length - decimalSymbolIndex - 1;\n}\n\nfunction isValidForStep(viewValue, stepBase, step) {\n // At this point `stepBase` and `step` are expected to be non-NaN values\n // and `viewValue` is expected to be a valid stringified number.\n var value = Number(viewValue);\n\n var isNonIntegerValue = !isNumberInteger(value);\n var isNonIntegerStepBase = !isNumberInteger(stepBase);\n var isNonIntegerStep = !isNumberInteger(step);\n\n // Due to limitations in Floating Point Arithmetic (e.g. `0.3 - 0.2 !== 0.1` or\n // `0.5 % 0.1 !== 0`), we need to convert all numbers to integers.\n if (isNonIntegerValue || isNonIntegerStepBase || isNonIntegerStep) {\n var valueDecimals = isNonIntegerValue ? countDecimals(value) : 0;\n var stepBaseDecimals = isNonIntegerStepBase ? countDecimals(stepBase) : 0;\n var stepDecimals = isNonIntegerStep ? countDecimals(step) : 0;\n\n var decimalCount = Math.max(valueDecimals, stepBaseDecimals, stepDecimals);\n var multiplier = Math.pow(10, decimalCount);\n\n value = value * multiplier;\n stepBase = stepBase * multiplier;\n step = step * multiplier;\n\n if (isNonIntegerValue) value = Math.round(value);\n if (isNonIntegerStepBase) stepBase = Math.round(stepBase);\n if (isNonIntegerStep) step = Math.round(step);\n }\n\n return (value - stepBase) % step === 0;\n}\n\nfunction numberInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {\n badInputChecker(scope, element, attr, ctrl, 'number');\n numberFormatterParser(ctrl);\n baseInputType(scope, element, attr, ctrl, $sniffer, $browser);\n\n var parsedMinVal;\n\n if (isDefined(attr.min) || attr.ngMin) {\n var minVal = attr.min || $parse(attr.ngMin)(scope);\n parsedMinVal = parseNumberAttrVal(minVal);\n\n ctrl.$validators.min = function(modelValue, viewValue) {\n return ctrl.$isEmpty(viewValue) || isUndefined(parsedMinVal) || viewValue >= parsedMinVal;\n };\n\n attr.$observe('min', function(val) {\n if (val !== minVal) {\n parsedMinVal = parseNumberAttrVal(val);\n minVal = val;\n // TODO(matsko): implement validateLater to reduce number of validations\n ctrl.$validate();\n }\n });\n }\n\n if (isDefined(attr.max) || attr.ngMax) {\n var maxVal = attr.max || $parse(attr.ngMax)(scope);\n var parsedMaxVal = parseNumberAttrVal(maxVal);\n\n ctrl.$validators.max = function(modelValue, viewValue) {\n return ctrl.$isEmpty(viewValue) || isUndefined(parsedMaxVal) || viewValue <= parsedMaxVal;\n };\n\n attr.$observe('max', function(val) {\n if (val !== maxVal) {\n parsedMaxVal = parseNumberAttrVal(val);\n maxVal = val;\n // TODO(matsko): implement validateLater to reduce number of validations\n ctrl.$validate();\n }\n });\n }\n\n if (isDefined(attr.step) || attr.ngStep) {\n var stepVal = attr.step || $parse(attr.ngStep)(scope);\n var parsedStepVal = parseNumberAttrVal(stepVal);\n\n ctrl.$validators.step = function(modelValue, viewValue) {\n return ctrl.$isEmpty(viewValue) || isUndefined(parsedStepVal) ||\n isValidForStep(viewValue, parsedMinVal || 0, parsedStepVal);\n };\n\n attr.$observe('step', function(val) {\n // TODO(matsko): implement validateLater to reduce number of validations\n if (val !== stepVal) {\n parsedStepVal = parseNumberAttrVal(val);\n stepVal = val;\n ctrl.$validate();\n }\n\n });\n\n }\n}\n\nfunction rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {\n badInputChecker(scope, element, attr, ctrl, 'range');\n numberFormatterParser(ctrl);\n baseInputType(scope, element, attr, ctrl, $sniffer, $browser);\n\n var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',\n minVal = supportsRange ? 0 : undefined,\n maxVal = supportsRange ? 100 : undefined,\n stepVal = supportsRange ? 1 : undefined,\n validity = element[0].validity,\n hasMinAttr = isDefined(attr.min),\n hasMaxAttr = isDefined(attr.max),\n hasStepAttr = isDefined(attr.step);\n\n var originalRender = ctrl.$render;\n\n ctrl.$render = supportsRange && isDefined(validity.rangeUnderflow) && isDefined(validity.rangeOverflow) ?\n //Browsers that implement range will set these values automatically, but reading the adjusted values after\n //$render would cause the min / max validators to be applied with the wrong value\n function rangeRender() {\n originalRender();\n ctrl.$setViewValue(element.val());\n } :\n originalRender;\n\n if (hasMinAttr) {\n minVal = parseNumberAttrVal(attr.min);\n\n ctrl.$validators.min = supportsRange ?\n // Since all browsers set the input to a valid value, we don't need to check validity\n function noopMinValidator() { return true; } :\n // non-support browsers validate the min val\n function minValidator(modelValue, viewValue) {\n return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;\n };\n\n setInitialValueAndObserver('min', minChange);\n }\n\n if (hasMaxAttr) {\n maxVal = parseNumberAttrVal(attr.max);\n\n ctrl.$validators.max = supportsRange ?\n // Since all browsers set the input to a valid value, we don't need to check validity\n function noopMaxValidator() { return true; } :\n // non-support browsers validate the max val\n function maxValidator(modelValue, viewValue) {\n return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;\n };\n\n setInitialValueAndObserver('max', maxChange);\n }\n\n if (hasStepAttr) {\n stepVal = parseNumberAttrVal(attr.step);\n\n ctrl.$validators.step = supportsRange ?\n function nativeStepValidator() {\n // Currently, only FF implements the spec on step change correctly (i.e. adjusting the\n // input element value to a valid value). It's possible that other browsers set the stepMismatch\n // validity error instead, so we can at least report an error in that case.\n return !validity.stepMismatch;\n } :\n // ngStep doesn't set the setp attr, so the browser doesn't adjust the input value as setting step would\n function stepValidator(modelValue, viewValue) {\n return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) ||\n isValidForStep(viewValue, minVal || 0, stepVal);\n };\n\n setInitialValueAndObserver('step', stepChange);\n }\n\n function setInitialValueAndObserver(htmlAttrName, changeFn) {\n // interpolated attributes set the attribute value only after a digest, but we need the\n // attribute value when the input is first rendered, so that the browser can adjust the\n // input value based on the min/max value\n element.attr(htmlAttrName, attr[htmlAttrName]);\n var oldVal = attr[htmlAttrName];\n attr.$observe(htmlAttrName, function wrappedObserver(val) {\n if (val !== oldVal) {\n oldVal = val;\n changeFn(val);\n }\n });\n }\n\n function minChange(val) {\n minVal = parseNumberAttrVal(val);\n // ignore changes before model is initialized\n if (isNumberNaN(ctrl.$modelValue)) {\n return;\n }\n\n if (supportsRange) {\n var elVal = element.val();\n // IE11 doesn't set the el val correctly if the minVal is greater than the element value\n if (minVal > elVal) {\n elVal = minVal;\n element.val(elVal);\n }\n ctrl.$setViewValue(elVal);\n } else {\n // TODO(matsko): implement validateLater to reduce number of validations\n ctrl.$validate();\n }\n }\n\n function maxChange(val) {\n maxVal = parseNumberAttrVal(val);\n // ignore changes before model is initialized\n if (isNumberNaN(ctrl.$modelValue)) {\n return;\n }\n\n if (supportsRange) {\n var elVal = element.val();\n // IE11 doesn't set the el val correctly if the maxVal is less than the element value\n if (maxVal < elVal) {\n element.val(maxVal);\n // IE11 and Chrome don't set the value to the minVal when max < min\n elVal = maxVal < minVal ? minVal : maxVal;\n }\n ctrl.$setViewValue(elVal);\n } else {\n // TODO(matsko): implement validateLater to reduce number of validations\n ctrl.$validate();\n }\n }\n\n function stepChange(val) {\n stepVal = parseNumberAttrVal(val);\n // ignore changes before model is initialized\n if (isNumberNaN(ctrl.$modelValue)) {\n return;\n }\n\n // Some browsers don't adjust the input value correctly, but set the stepMismatch error\n if (!supportsRange) {\n // TODO(matsko): implement validateLater to reduce number of validations\n ctrl.$validate();\n } else if (ctrl.$viewValue !== element.val()) {\n ctrl.$setViewValue(element.val());\n }\n }\n}\n\nfunction urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {\n // Note: no badInputChecker here by purpose as `url` is only a validation\n // in browsers, i.e. we can always read out input.value even if it is not valid!\n baseInputType(scope, element, attr, ctrl, $sniffer, $browser);\n stringBasedInputType(ctrl);\n\n ctrl.$validators.url = function(modelValue, viewValue) {\n var value = modelValue || viewValue;\n return ctrl.$isEmpty(value) || URL_REGEXP.test(value);\n };\n}\n\nfunction emailInputType(scope, element, attr, ctrl, $sniffer, $browser) {\n // Note: no badInputChecker here by purpose as `url` is only a validation\n // in browsers, i.e. we can always read out input.value even if it is not valid!\n baseInputType(scope, element, attr, ctrl, $sniffer, $browser);\n stringBasedInputType(ctrl);\n\n ctrl.$validators.email = function(modelValue, viewValue) {\n var value = modelValue || viewValue;\n return ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value);\n };\n}\n\nfunction radioInputType(scope, element, attr, ctrl) {\n var doTrim = !attr.ngTrim || trim(attr.ngTrim) !== 'false';\n // make the name unique, if not defined\n if (isUndefined(attr.name)) {\n element.attr('name', nextUid());\n }\n\n var listener = function(ev) {\n var value;\n if (element[0].checked) {\n value = attr.value;\n if (doTrim) {\n value = trim(value);\n }\n ctrl.$setViewValue(value, ev && ev.type);\n }\n };\n\n element.on('change', listener);\n\n ctrl.$render = function() {\n var value = attr.value;\n if (doTrim) {\n value = trim(value);\n }\n element[0].checked = (value === ctrl.$viewValue);\n };\n\n attr.$observe('value', ctrl.$render);\n}\n\nfunction parseConstantExpr($parse, context, name, expression, fallback) {\n var parseFn;\n if (isDefined(expression)) {\n parseFn = $parse(expression);\n if (!parseFn.constant) {\n throw ngModelMinErr('constexpr', 'Expected constant expression for `{0}`, but saw ' +\n '`{1}`.', name, expression);\n }\n return parseFn(context);\n }\n return fallback;\n}\n\nfunction checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {\n var trueValue = parseConstantExpr($parse, scope, 'ngTrueValue', attr.ngTrueValue, true);\n var falseValue = parseConstantExpr($parse, scope, 'ngFalseValue', attr.ngFalseValue, false);\n\n var listener = function(ev) {\n ctrl.$setViewValue(element[0].checked, ev && ev.type);\n };\n\n element.on('change', listener);\n\n ctrl.$render = function() {\n element[0].checked = ctrl.$viewValue;\n };\n\n // Override the standard `$isEmpty` because the $viewValue of an empty checkbox is always set to `false`\n // This is because of the parser below, which compares the `$modelValue` with `trueValue` to convert\n // it to a boolean.\n ctrl.$isEmpty = function(value) {\n return value === false;\n };\n\n ctrl.$formatters.push(function(value) {\n return equals(value, trueValue);\n });\n\n ctrl.$parsers.push(function(value) {\n return value ? trueValue : falseValue;\n });\n}\n\n\n/**\n * @ngdoc directive\n * @name textarea\n * @restrict E\n *\n * @description\n * HTML textarea element control with AngularJS data-binding. The data-binding and validation\n * properties of this element are exactly the same as those of the\n * {@link ng.directive:input input element}.\n *\n * @param {string} ngModel Assignable AngularJS expression to data-bind to.\n * @param {string=} name Property name of the form under which the control is published.\n * @param {string=} required Sets `required` validation error key if the value is not entered.\n * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to\n * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of\n * `required` when you want to data-bind to the `required` attribute.\n * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than\n * minlength.\n * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than\n * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of any\n * length.\n * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}\n * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.\n * If the expression evaluates to a RegExp object, then this is used directly.\n * If the expression evaluates to a string, then it will be converted to a RegExp\n * after wrapping it in `^` and `$` characters. For instance, `\"abc\"` will be converted to\n * `new RegExp('^abc$')`.
    \n * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to\n * start at the index of the last search's match, thus not taking the whole input value into\n * account.\n * @param {string=} ngChange AngularJS expression to be executed when input changes due to user\n * interaction with the input element.\n * @param {boolean=} [ngTrim=true] If set to false AngularJS will not automatically trim the input.\n *\n * @knownIssue\n *\n * When specifying the `placeholder` attribute of `\n * 
    {{ list | json }}
    \n * \n * \n * it(\"should split the text by newlines\", function() {\n * var listInput = element(by.model('list'));\n * var output = element(by.binding('list | json'));\n * listInput.sendKeys('abc\\ndef\\nghi');\n * expect(output.getText()).toContain('[\\n \"abc\",\\n \"def\",\\n \"ghi\"\\n]');\n * });\n * \n * \n *\n */\nvar ngListDirective = function() {\n return {\n restrict: 'A',\n priority: 100,\n require: 'ngModel',\n link: function(scope, element, attr, ctrl) {\n var ngList = attr.ngList || ', ';\n var trimValues = attr.ngTrim !== 'false';\n var separator = trimValues ? trim(ngList) : ngList;\n\n var parse = function(viewValue) {\n // If the viewValue is invalid (say required but empty) it will be `undefined`\n if (isUndefined(viewValue)) return;\n\n var list = [];\n\n if (viewValue) {\n forEach(viewValue.split(separator), function(value) {\n if (value) list.push(trimValues ? trim(value) : value);\n });\n }\n\n return list;\n };\n\n ctrl.$parsers.push(parse);\n ctrl.$formatters.push(function(value) {\n if (isArray(value)) {\n return value.join(ngList);\n }\n\n return undefined;\n });\n\n // Override the standard $isEmpty because an empty array means the input is empty.\n ctrl.$isEmpty = function(value) {\n return !value || !value.length;\n };\n }\n };\n};\n" }, { "path": "src/ng/directive/ngModel.js", "content": "'use strict';\n\n/* global VALID_CLASS: true,\n INVALID_CLASS: true,\n PRISTINE_CLASS: true,\n DIRTY_CLASS: true,\n UNTOUCHED_CLASS: true,\n TOUCHED_CLASS: true,\n PENDING_CLASS: true,\n addSetValidityMethod: true,\n setupValidity: true,\n defaultModelOptions: false\n*/\n\n\nvar VALID_CLASS = 'ng-valid',\n INVALID_CLASS = 'ng-invalid',\n PRISTINE_CLASS = 'ng-pristine',\n DIRTY_CLASS = 'ng-dirty',\n UNTOUCHED_CLASS = 'ng-untouched',\n TOUCHED_CLASS = 'ng-touched',\n EMPTY_CLASS = 'ng-empty',\n NOT_EMPTY_CLASS = 'ng-not-empty';\n\nvar ngModelMinErr = minErr('ngModel');\n\n/**\n * @ngdoc type\n * @name ngModel.NgModelController\n * @property {*} $viewValue The actual value from the control's view. For `input` elements, this is a\n * String. See {@link ngModel.NgModelController#$setViewValue} for information about when the $viewValue\n * is set.\n *\n * @property {*} $modelValue The value in the model that the control is bound to.\n *\n * @property {Array.} $parsers Array of functions to execute, as a pipeline, whenever\n * the control updates the ngModelController with a new {@link ngModel.NgModelController#$viewValue\n `$viewValue`} from the DOM, usually via user input.\n See {@link ngModel.NgModelController#$setViewValue `$setViewValue()`} for a detailed lifecycle explanation.\n Note that the `$parsers` are not called when the bound ngModel expression changes programmatically.\n\n The functions are called in array order, each passing\n its return value through to the next. The last return value is forwarded to the\n {@link ngModel.NgModelController#$validators `$validators`} collection.\n\n Parsers are used to sanitize / convert the {@link ngModel.NgModelController#$viewValue\n `$viewValue`}.\n\n Returning `undefined` from a parser means a parse error occurred. In that case,\n no {@link ngModel.NgModelController#$validators `$validators`} will run and the `ngModel`\n will be set to `undefined` unless {@link ngModelOptions `ngModelOptions.allowInvalid`}\n is set to `true`. The parse error is stored in `ngModel.$error.parse`.\n\n This simple example shows a parser that would convert text input value to lowercase:\n * ```js\n * function parse(value) {\n * if (value) {\n * return value.toLowerCase();\n * }\n * }\n * ngModelController.$parsers.push(parse);\n * ```\n\n *\n * @property {Array.} $formatters Array of functions to execute, as a pipeline, whenever\n the bound ngModel expression changes programmatically. The `$formatters` are not called when the\n value of the control is changed by user interaction.\n\n Formatters are used to format / convert the {@link ngModel.NgModelController#$modelValue\n `$modelValue`} for display in the control.\n\n The functions are called in reverse array order, each passing the value through to the\n next. The last return value is used as the actual DOM value.\n\n This simple example shows a formatter that would convert the model value to uppercase:\n\n * ```js\n * function format(value) {\n * if (value) {\n * return value.toUpperCase();\n * }\n * }\n * ngModel.$formatters.push(format);\n * ```\n *\n * @property {Object.} $validators A collection of validators that are applied\n * whenever the model value changes. The key value within the object refers to the name of the\n * validator while the function refers to the validation operation. The validation operation is\n * provided with the model value as an argument and must return a true or false value depending\n * on the response of that validation.\n *\n * ```js\n * ngModel.$validators.validCharacters = function(modelValue, viewValue) {\n * var value = modelValue || viewValue;\n * return /[0-9]+/.test(value) &&\n * /[a-z]+/.test(value) &&\n * /[A-Z]+/.test(value) &&\n * /\\W+/.test(value);\n * };\n * ```\n *\n * @property {Object.} $asyncValidators A collection of validations that are expected to\n * perform an asynchronous validation (e.g. a HTTP request). The validation function that is provided\n * is expected to return a promise when it is run during the model validation process. Once the promise\n * is delivered then the validation status will be set to true when fulfilled and false when rejected.\n * When the asynchronous validators are triggered, each of the validators will run in parallel and the model\n * value will only be updated once all validators have been fulfilled. As long as an asynchronous validator\n * is unfulfilled, its key will be added to the controllers `$pending` property. Also, all asynchronous validators\n * will only run once all synchronous validators have passed.\n *\n * Please note that if $http is used then it is important that the server returns a success HTTP response code\n * in order to fulfill the validation and a status level of `4xx` in order to reject the validation.\n *\n * ```js\n * ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {\n * var value = modelValue || viewValue;\n *\n * // Lookup user by username\n * return $http.get('/api/users/' + value).\n * then(function resolved() {\n * //username exists, this means validation fails\n * return $q.reject('exists');\n * }, function rejected() {\n * //username does not exist, therefore this validation passes\n * return true;\n * });\n * };\n * ```\n *\n * @property {Array.} $viewChangeListeners Array of functions to execute whenever\n * a change to {@link ngModel.NgModelController#$viewValue `$viewValue`} has caused a change\n * to {@link ngModel.NgModelController#$modelValue `$modelValue`}.\n * It is called with no arguments, and its return value is ignored.\n * This can be used in place of additional $watches against the model value.\n *\n * @property {Object} $error An object hash with all failing validator ids as keys.\n * @property {Object} $pending An object hash with all pending validator ids as keys.\n *\n * @property {boolean} $untouched True if control has not lost focus yet.\n * @property {boolean} $touched True if control has lost focus.\n * @property {boolean} $pristine True if user has not interacted with the control yet.\n * @property {boolean} $dirty True if user has already interacted with the control.\n * @property {boolean} $valid True if there is no error.\n * @property {boolean} $invalid True if at least one error on the control.\n * @property {string} $name The name attribute of the control.\n *\n * @description\n *\n * `NgModelController` provides API for the {@link ngModel `ngModel`} directive.\n * The controller contains services for data-binding, validation, CSS updates, and value formatting\n * and parsing. It purposefully does not contain any logic which deals with DOM rendering or\n * listening to DOM events.\n * Such DOM related logic should be provided by other directives which make use of\n * `NgModelController` for data-binding to control elements.\n * AngularJS provides this DOM logic for most {@link input `input`} elements.\n * At the end of this page you can find a {@link ngModel.NgModelController#custom-control-example\n * custom control example} that uses `ngModelController` to bind to `contenteditable` elements.\n *\n * @example\n * ### Custom Control Example\n * This example shows how to use `NgModelController` with a custom control to achieve\n * data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)\n * collaborate together to achieve the desired result.\n *\n * `contenteditable` is an HTML5 attribute, which tells the browser to let the element\n * contents be edited in place by the user.\n *\n * We are using the {@link ng.service:$sce $sce} service here and include the {@link ngSanitize $sanitize}\n * module to automatically remove \"bad\" content like inline event listener (e.g. ``).\n * However, as we are using `$sce` the model can still decide to provide unsafe content if it marks\n * that content using the `$sce` service.\n *\n * \n \n [contenteditable] {\n border: 1px solid black;\n background-color: white;\n min-height: 20px;\n }\n\n .ng-invalid {\n border: 1px solid red;\n }\n\n \n \n angular.module('customControl', ['ngSanitize']).\n directive('contenteditable', ['$sce', function($sce) {\n return {\n restrict: 'A', // only activate on element attribute\n require: '?ngModel', // get a hold of NgModelController\n link: function(scope, element, attrs, ngModel) {\n if (!ngModel) return; // do nothing if no ng-model\n\n // Specify how UI should be updated\n ngModel.$render = function() {\n element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));\n };\n\n // Listen for change events to enable binding\n element.on('blur keyup change', function() {\n scope.$evalAsync(read);\n });\n read(); // initialize\n\n // Write data to the model\n function read() {\n var html = element.html();\n // When we clear the content editable the browser leaves a
    behind\n // If strip-br attribute is provided then we strip this out\n if (attrs.stripBr && html === '
    ') {\n html = '';\n }\n ngModel.$setViewValue(html);\n }\n }\n };\n }]);\n     \n \n
    \n
    Change me!
    \n Required!\n
    \n \n \n     \n \n it('should data-bind and become invalid', function() {\n if (browser.params.browser === 'safari' || browser.params.browser === 'firefox') {\n // SafariDriver can't handle contenteditable\n // and Firefox driver can't clear contenteditables very well\n return;\n }\n var contentEditable = element(by.css('[contenteditable]'));\n var content = 'Change me!';\n\n expect(contentEditable.getText()).toEqual(content);\n\n contentEditable.clear();\n contentEditable.sendKeys(protractor.Key.BACK_SPACE);\n expect(contentEditable.getText()).toEqual('');\n expect(contentEditable.getAttribute('class')).toMatch(/ng-invalid-required/);\n });\n \n *     \n *\n *\n */\nNgModelController.$inject = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', '$animate', '$timeout', '$q', '$interpolate'];\nfunction NgModelController($scope, $exceptionHandler, $attr, $element, $parse, $animate, $timeout, $q, $interpolate) {\n this.$viewValue = Number.NaN;\n this.$modelValue = Number.NaN;\n this.$$rawModelValue = undefined; // stores the parsed modelValue / model set from scope regardless of validity.\n this.$validators = {};\n this.$asyncValidators = {};\n this.$parsers = [];\n this.$formatters = [];\n this.$viewChangeListeners = [];\n this.$untouched = true;\n this.$touched = false;\n this.$pristine = true;\n this.$dirty = false;\n this.$valid = true;\n this.$invalid = false;\n this.$error = {}; // keep invalid keys here\n this.$$success = {}; // keep valid keys here\n this.$pending = undefined; // keep pending keys here\n this.$name = $interpolate($attr.name || '', false)($scope);\n this.$$parentForm = nullFormCtrl;\n this.$options = defaultModelOptions;\n this.$$updateEvents = '';\n // Attach the correct context to the event handler function for updateOn\n this.$$updateEventHandler = this.$$updateEventHandler.bind(this);\n\n this.$$parsedNgModel = $parse($attr.ngModel);\n this.$$parsedNgModelAssign = this.$$parsedNgModel.assign;\n this.$$ngModelGet = this.$$parsedNgModel;\n this.$$ngModelSet = this.$$parsedNgModelAssign;\n this.$$pendingDebounce = null;\n this.$$parserValid = undefined;\n this.$$parserName = 'parse';\n\n this.$$currentValidationRunId = 0;\n\n this.$$scope = $scope;\n this.$$rootScope = $scope.$root;\n this.$$attr = $attr;\n this.$$element = $element;\n this.$$animate = $animate;\n this.$$timeout = $timeout;\n this.$$parse = $parse;\n this.$$q = $q;\n this.$$exceptionHandler = $exceptionHandler;\n\n setupValidity(this);\n setupModelWatcher(this);\n}\n\nNgModelController.prototype = {\n $$initGetterSetters: function() {\n if (this.$options.getOption('getterSetter')) {\n var invokeModelGetter = this.$$parse(this.$$attr.ngModel + '()'),\n invokeModelSetter = this.$$parse(this.$$attr.ngModel + '($$$p)');\n\n this.$$ngModelGet = function($scope) {\n var modelValue = this.$$parsedNgModel($scope);\n if (isFunction(modelValue)) {\n modelValue = invokeModelGetter($scope);\n }\n return modelValue;\n };\n this.$$ngModelSet = function($scope, newValue) {\n if (isFunction(this.$$parsedNgModel($scope))) {\n invokeModelSetter($scope, {$$$p: newValue});\n } else {\n this.$$parsedNgModelAssign($scope, newValue);\n }\n };\n } else if (!this.$$parsedNgModel.assign) {\n throw ngModelMinErr('nonassign', 'Expression \\'{0}\\' is non-assignable. Element: {1}',\n this.$$attr.ngModel, startingTag(this.$$element));\n }\n },\n\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$render\n *\n * @description\n * Called when the view needs to be updated. It is expected that the user of the ng-model\n * directive will implement this method.\n *\n * The `$render()` method is invoked in the following situations:\n *\n * * `$rollbackViewValue()` is called. If we are rolling back the view value to the last\n * committed value then `$render()` is called to update the input control.\n * * The value referenced by `ng-model` is changed programmatically and both the `$modelValue` and\n * the `$viewValue` are different from last time.\n *\n * Since `ng-model` does not do a deep watch, `$render()` is only invoked if the values of\n * `$modelValue` and `$viewValue` are actually different from their previous values. If `$modelValue`\n * or `$viewValue` are objects (rather than a string or number) then `$render()` will not be\n * invoked if you only change a property on the objects.\n */\n $render: noop,\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$isEmpty\n *\n * @description\n * This is called when we need to determine if the value of an input is empty.\n *\n * For instance, the required directive does this to work out if the input has data or not.\n *\n * The default `$isEmpty` function checks whether the value is `undefined`, `''`, `null` or `NaN`.\n *\n * You can override this for input directives whose concept of being empty is different from the\n * default. The `checkboxInputType` directive does this because in its case a value of `false`\n * implies empty.\n *\n * @param {*} value The value of the input to check for emptiness.\n * @returns {boolean} True if `value` is \"empty\".\n */\n $isEmpty: function(value) {\n // eslint-disable-next-line no-self-compare\n return isUndefined(value) || value === '' || value === null || value !== value;\n },\n\n $$updateEmptyClasses: function(value) {\n if (this.$isEmpty(value)) {\n this.$$animate.removeClass(this.$$element, NOT_EMPTY_CLASS);\n this.$$animate.addClass(this.$$element, EMPTY_CLASS);\n } else {\n this.$$animate.removeClass(this.$$element, EMPTY_CLASS);\n this.$$animate.addClass(this.$$element, NOT_EMPTY_CLASS);\n }\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$setPristine\n *\n * @description\n * Sets the control to its pristine state.\n *\n * This method can be called to remove the `ng-dirty` class and set the control to its pristine\n * state (`ng-pristine` class). A model is considered to be pristine when the control\n * has not been changed from when first compiled.\n */\n $setPristine: function() {\n this.$dirty = false;\n this.$pristine = true;\n this.$$animate.removeClass(this.$$element, DIRTY_CLASS);\n this.$$animate.addClass(this.$$element, PRISTINE_CLASS);\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$setDirty\n *\n * @description\n * Sets the control to its dirty state.\n *\n * This method can be called to remove the `ng-pristine` class and set the control to its dirty\n * state (`ng-dirty` class). A model is considered to be dirty when the control has been changed\n * from when first compiled.\n */\n $setDirty: function() {\n this.$dirty = true;\n this.$pristine = false;\n this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);\n this.$$animate.addClass(this.$$element, DIRTY_CLASS);\n this.$$parentForm.$setDirty();\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$setUntouched\n *\n * @description\n * Sets the control to its untouched state.\n *\n * This method can be called to remove the `ng-touched` class and set the control to its\n * untouched state (`ng-untouched` class). Upon compilation, a model is set as untouched\n * by default, however this function can be used to restore that state if the model has\n * already been touched by the user.\n */\n $setUntouched: function() {\n this.$touched = false;\n this.$untouched = true;\n this.$$animate.setClass(this.$$element, UNTOUCHED_CLASS, TOUCHED_CLASS);\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$setTouched\n *\n * @description\n * Sets the control to its touched state.\n *\n * This method can be called to remove the `ng-untouched` class and set the control to its\n * touched state (`ng-touched` class). A model is considered to be touched when the user has\n * first focused the control element and then shifted focus away from the control (blur event).\n */\n $setTouched: function() {\n this.$touched = true;\n this.$untouched = false;\n this.$$animate.setClass(this.$$element, TOUCHED_CLASS, UNTOUCHED_CLASS);\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$rollbackViewValue\n *\n * @description\n * Cancel an update and reset the input element's value to prevent an update to the `$modelValue`,\n * which may be caused by a pending debounced event or because the input is waiting for some\n * future event.\n *\n * If you have an input that uses `ng-model-options` to set up debounced updates or updates that\n * depend on special events such as `blur`, there can be a period when the `$viewValue` is out of\n * sync with the ngModel's `$modelValue`.\n *\n * In this case, you can use `$rollbackViewValue()` to manually cancel the debounced / future update\n * and reset the input to the last committed view value.\n *\n * It is also possible that you run into difficulties if you try to update the ngModel's `$modelValue`\n * programmatically before these debounced/future events have resolved/occurred, because AngularJS's\n * dirty checking mechanism is not able to tell whether the model has actually changed or not.\n *\n * The `$rollbackViewValue()` method should be called before programmatically changing the model of an\n * input which may have such events pending. This is important in order to make sure that the\n * input field will be updated with the new model value and any pending operations are cancelled.\n *\n * @example\n * \n * \n * angular.module('cancel-update-example', [])\n *\n * .controller('CancelUpdateController', ['$scope', function($scope) {\n * $scope.model = {value1: '', value2: ''};\n *\n * $scope.setEmpty = function(e, value, rollback) {\n * if (e.keyCode === 27) {\n * e.preventDefault();\n * if (rollback) {\n * $scope.myForm[value].$rollbackViewValue();\n * }\n * $scope.model[value] = '';\n * }\n * };\n * }]);\n * \n * \n *
    \n *

    Both of these inputs are only updated if they are blurred. Hitting escape should\n * empty them. Follow these steps and observe the difference:

    \n *
      \n *
    1. Type something in the input. You will see that the model is not yet updated
      2. \n *
    2. Press the Escape key.\n *
        \n *
      1. In the first example, nothing happens, because the model is already '', and no\n * update is detected. If you blur the input, the model will be set to the current view.\n *
        2. \n *
      2. In the second example, the pending update is cancelled, and the input is set back\n * to the last committed view value (''). Blurring the input does nothing.\n *
        3. \n *
      \n *
      3. \n *
    \n *\n *
    \n *
    \n *

    Without $rollbackViewValue():

    \n * \n * value1: \"{{ model.value1 }}\"\n *
    \n *\n *
    \n *

    With $rollbackViewValue():

    \n * \n * value2: \"{{ model.value2 }}\"\n *
    \n * \n *
    \n *     \n \n div {\n display: table-cell;\n }\n div:nth-child(1) {\n padding-right: 30px;\n }\n\n \n *     \n */\n $rollbackViewValue: function() {\n this.$$timeout.cancel(this.$$pendingDebounce);\n this.$viewValue = this.$$lastCommittedViewValue;\n this.$render();\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$validate\n *\n * @description\n * Runs each of the registered validators (first synchronous validators and then\n * asynchronous validators).\n * If the validity changes to invalid, the model will be set to `undefined`,\n * unless {@link ngModelOptions `ngModelOptions.allowInvalid`} is `true`.\n * If the validity changes to valid, it will set the model to the last available valid\n * `$modelValue`, i.e. either the last parsed value or the last value set from the scope.\n */\n $validate: function() {\n\n // ignore $validate before model is initialized\n if (isNumberNaN(this.$modelValue)) {\n return;\n }\n\n var viewValue = this.$$lastCommittedViewValue;\n // Note: we use the $$rawModelValue as $modelValue might have been\n // set to undefined during a view -> model update that found validation\n // errors. We can't parse the view here, since that could change\n // the model although neither viewValue nor the model on the scope changed\n var modelValue = this.$$rawModelValue;\n\n var prevValid = this.$valid;\n var prevModelValue = this.$modelValue;\n\n var allowInvalid = this.$options.getOption('allowInvalid');\n\n var that = this;\n this.$$runValidators(modelValue, viewValue, function(allValid) {\n // If there was no change in validity, don't update the model\n // This prevents changing an invalid modelValue to undefined\n if (!allowInvalid && prevValid !== allValid) {\n // Note: Don't check this.$valid here, as we could have\n // external validators (e.g. calculated on the server),\n // that just call $setValidity and need the model value\n // to calculate their validity.\n that.$modelValue = allValid ? modelValue : undefined;\n\n if (that.$modelValue !== prevModelValue) {\n that.$$writeModelToScope();\n }\n }\n });\n },\n\n $$runValidators: function(modelValue, viewValue, doneCallback) {\n this.$$currentValidationRunId++;\n var localValidationRunId = this.$$currentValidationRunId;\n var that = this;\n\n // check parser error\n if (!processParseErrors()) {\n validationDone(false);\n return;\n }\n if (!processSyncValidators()) {\n validationDone(false);\n return;\n }\n processAsyncValidators();\n\n function processParseErrors() {\n var errorKey = that.$$parserName;\n\n if (isUndefined(that.$$parserValid)) {\n setValidity(errorKey, null);\n } else {\n if (!that.$$parserValid) {\n forEach(that.$validators, function(v, name) {\n setValidity(name, null);\n });\n forEach(that.$asyncValidators, function(v, name) {\n setValidity(name, null);\n });\n }\n\n // Set the parse error last, to prevent unsetting it, should a $validators key == parserName\n setValidity(errorKey, that.$$parserValid);\n return that.$$parserValid;\n }\n return true;\n }\n\n function processSyncValidators() {\n var syncValidatorsValid = true;\n forEach(that.$validators, function(validator, name) {\n var result = Boolean(validator(modelValue, viewValue));\n syncValidatorsValid = syncValidatorsValid && result;\n setValidity(name, result);\n });\n if (!syncValidatorsValid) {\n forEach(that.$asyncValidators, function(v, name) {\n setValidity(name, null);\n });\n return false;\n }\n return true;\n }\n\n function processAsyncValidators() {\n var validatorPromises = [];\n var allValid = true;\n forEach(that.$asyncValidators, function(validator, name) {\n var promise = validator(modelValue, viewValue);\n if (!isPromiseLike(promise)) {\n throw ngModelMinErr('nopromise',\n 'Expected asynchronous validator to return a promise but got \\'{0}\\' instead.', promise);\n }\n setValidity(name, undefined);\n validatorPromises.push(promise.then(function() {\n setValidity(name, true);\n }, function() {\n allValid = false;\n setValidity(name, false);\n }));\n });\n if (!validatorPromises.length) {\n validationDone(true);\n } else {\n that.$$q.all(validatorPromises).then(function() {\n validationDone(allValid);\n }, noop);\n }\n }\n\n function setValidity(name, isValid) {\n if (localValidationRunId === that.$$currentValidationRunId) {\n that.$setValidity(name, isValid);\n }\n }\n\n function validationDone(allValid) {\n if (localValidationRunId === that.$$currentValidationRunId) {\n\n doneCallback(allValid);\n }\n }\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$commitViewValue\n *\n * @description\n * Commit a pending update to the `$modelValue`.\n *\n * Updates may be pending by a debounced event or because the input is waiting for a some future\n * event defined in `ng-model-options`. this method is rarely needed as `NgModelController`\n * usually handles calling this in response to input events.\n */\n $commitViewValue: function() {\n var viewValue = this.$viewValue;\n\n this.$$timeout.cancel(this.$$pendingDebounce);\n\n // If the view value has not changed then we should just exit, except in the case where there is\n // a native validator on the element. In this case the validation state may have changed even though\n // the viewValue has stayed empty.\n if (this.$$lastCommittedViewValue === viewValue && (viewValue !== '' || !this.$$hasNativeValidators)) {\n return;\n }\n this.$$updateEmptyClasses(viewValue);\n this.$$lastCommittedViewValue = viewValue;\n\n // change to dirty\n if (this.$pristine) {\n this.$setDirty();\n }\n this.$$parseAndValidate();\n },\n\n $$parseAndValidate: function() {\n var viewValue = this.$$lastCommittedViewValue;\n var modelValue = viewValue;\n var that = this;\n\n this.$$parserValid = isUndefined(modelValue) ? undefined : true;\n\n // Reset any previous parse error\n this.$setValidity(this.$$parserName, null);\n this.$$parserName = 'parse';\n\n if (this.$$parserValid) {\n for (var i = 0; i < this.$parsers.length; i++) {\n modelValue = this.$parsers[i](modelValue);\n if (isUndefined(modelValue)) {\n this.$$parserValid = false;\n break;\n }\n }\n }\n if (isNumberNaN(this.$modelValue)) {\n // this.$modelValue has not been touched yet...\n this.$modelValue = this.$$ngModelGet(this.$$scope);\n }\n var prevModelValue = this.$modelValue;\n var allowInvalid = this.$options.getOption('allowInvalid');\n this.$$rawModelValue = modelValue;\n\n if (allowInvalid) {\n this.$modelValue = modelValue;\n writeToModelIfNeeded();\n }\n\n // Pass the $$lastCommittedViewValue here, because the cached viewValue might be out of date.\n // This can happen if e.g. $setViewValue is called from inside a parser\n this.$$runValidators(modelValue, this.$$lastCommittedViewValue, function(allValid) {\n if (!allowInvalid) {\n // Note: Don't check this.$valid here, as we could have\n // external validators (e.g. calculated on the server),\n // that just call $setValidity and need the model value\n // to calculate their validity.\n that.$modelValue = allValid ? modelValue : undefined;\n writeToModelIfNeeded();\n }\n });\n\n function writeToModelIfNeeded() {\n if (that.$modelValue !== prevModelValue) {\n that.$$writeModelToScope();\n }\n }\n },\n\n $$writeModelToScope: function() {\n this.$$ngModelSet(this.$$scope, this.$modelValue);\n forEach(this.$viewChangeListeners, function(listener) {\n try {\n listener();\n } catch (e) {\n // eslint-disable-next-line no-invalid-this\n this.$$exceptionHandler(e);\n }\n }, this);\n },\n\n /**\n * @ngdoc method\n * @name ngModel.NgModelController#$setViewValue\n *\n * @description\n * Update the view value.\n *\n * This method should be called when a control wants to change the view value; typically,\n * this is done from within a DOM event handler. For example, the {@link ng.directive:input input}\n * directive calls it when the value of the input changes and {@link ng.directive:select select}\n * calls it when an option is selected.\n *\n * When `$setViewValue` is called, the new `value` will be staged for committing through the `$parsers`\n * and `$validators` pipelines. If there are no special {@link ngModelOptions} specified then the staged\n * value is sent directly for processing through the `$parsers` pipeline. After this, the `$validators` and\n * `$asyncValidators` are called and the value is applied to `$modelValue`.\n * Finally, the value is set to the **expression** specified in the `ng-model` attribute and\n * all the registered change listeners, in the `$viewChangeListeners` list are called.\n *\n * In case the {@link ng.directive:ngModelOptions ngModelOptions} directive is used with `updateOn`\n * and the `default` trigger is not listed, all those actions will remain pending until one of the\n * `updateOn` events is triggered on the DOM element.\n * All these actions will be debounced if the {@link ng.directive:ngModelOptions ngModelOptions}\n * directive is used with a custom debounce for this particular event.\n * Note that a `$digest` is only triggered once the `updateOn` events are fired, or if `debounce`\n * is specified, once the timer runs out.\n *\n * When used with standard inputs, the view value will always be a string (which is in some cases\n * parsed into another type, such as a `Date` object for `input[date]`.)\n * However, custom controls might also pass objects to this method. In this case, we should make\n * a copy of the object before passing it to `$setViewValue`. This is because `ngModel` does not\n * perform a deep watch of objects, it only looks for a change of identity. If you only change\n * the property of the object then ngModel will not realize that the object has changed and\n * will not invoke the `$parsers` and `$validators` pipelines. For this reason, you should\n * not change properties of the copy once it has been passed to `$setViewValue`.\n * Otherwise you may cause the model value on the scope to change incorrectly.\n *\n *
    \n * In any case, the value passed to the method should always reflect the current value\n * of the control. For example, if you are calling `$setViewValue` for an input element,\n * you should pass the input DOM value. Otherwise, the control and the scope model become\n * out of sync. It's also important to note that `$setViewValue` does not call `$render` or change\n * the control's DOM value in any way. If we want to change the control's DOM value\n * programmatically, we should update the `ngModel` scope expression. Its new value will be\n * picked up by the model controller, which will run it through the `$formatters`, `$render` it\n * to update the DOM, and finally call `$validate` on it.\n *
    \n *\n * @param {*} value value from the view.\n * @param {string} trigger Event that triggered the update.\n */\n $setViewValue: function(value, trigger) {\n this.$viewValue = value;\n if (this.$options.getOption('updateOnDefault')) {\n this.$$debounceViewValueCommit(trigger);\n }\n },\n\n $$debounceViewValueCommit: function(trigger) {\n var debounceDelay = this.$options.getOption('debounce');\n\n if (isNumber(debounceDelay[trigger])) {\n debounceDelay = debounceDelay[trigger];\n } else if (isNumber(debounceDelay['default']) &&\n this.$options.getOption('updateOn').indexOf(trigger) === -1\n ) {\n debounceDelay = debounceDelay['default'];\n } else if (isNumber(debounceDelay['*'])) {\n debounceDelay = debounceDelay['*'];\n }\n\n this.$$timeout.cancel(this.$$pendingDebounce);\n var that = this;\n if (debounceDelay > 0) { // this fails if debounceDelay is an object\n this.$$pendingDebounce = this.$$timeout(function() {\n that.$commitViewValue();\n }, debounceDelay);\n } else if (this.$$rootScope.$$phase) {\n this.$commitViewValue();\n } else {\n this.$$scope.$apply(function() {\n that.$commitViewValue();\n });\n }\n },\n\n /**\n * @ngdoc method\n *\n * @name ngModel.NgModelController#$overrideModelOptions\n *\n * @description\n *\n * Override the current model options settings programmatically.\n *\n * The previous `ModelOptions` value will not be modified. Instead, a\n * new `ModelOptions` object will inherit from the previous one overriding\n * or inheriting settings that are defined in the given parameter.\n *\n * See {@link ngModelOptions} for information about what options can be specified\n * and how model option inheritance works.\n *\n *
    \n * **Note:** this function only affects the options set on the `ngModelController`,\n * and not the options on the {@link ngModelOptions} directive from which they might have been\n * obtained initially.\n *
    \n *\n *
    \n * **Note:** it is not possible to override the `getterSetter` option.\n *
    \n *\n * @param {Object} options a hash of settings to override the previous options\n *\n */\n $overrideModelOptions: function(options) {\n this.$options = this.$options.createChild(options);\n this.$$setUpdateOnEvents();\n },\n\n /**\n * @ngdoc method\n *\n * @name ngModel.NgModelController#$processModelValue\n\n * @description\n *\n * Runs the model -> view pipeline on the current\n * {@link ngModel.NgModelController#$modelValue $modelValue}.\n *\n * The following actions are performed by this method:\n *\n * - the `$modelValue` is run through the {@link ngModel.NgModelController#$formatters $formatters}\n * and the result is set to the {@link ngModel.NgModelController#$viewValue $viewValue}\n * - the `ng-empty` or `ng-not-empty` class is set on the element\n * - if the `$viewValue` has changed:\n * - {@link ngModel.NgModelController#$render $render} is called on the control\n * - the {@link ngModel.NgModelController#$validators $validators} are run and\n * the validation status is set.\n *\n * This method is called by ngModel internally when the bound scope value changes.\n * Application developers usually do not have to call this function themselves.\n *\n * This function can be used when the `$viewValue` or the rendered DOM value are not correctly\n * formatted and the `$modelValue` must be run through the `$formatters` again.\n *\n * @example\n * Consider a text input with an autocomplete list (for fruit), where the items are\n * objects with a name and an id.\n * A user enters `ap` and then selects `Apricot` from the list.\n * Based on this, the autocomplete widget will call `$setViewValue({name: 'Apricot', id: 443})`,\n * but the rendered value will still be `ap`.\n * The widget can then call `ctrl.$processModelValue()` to run the model -> view\n * pipeline again, which formats the object to the string `Apricot`,\n * then updates the `$viewValue`, and finally renders it in the DOM.\n *\n * \n \n
    \n
    \n Search Fruit:\n \n
    \n
    \n Model:
    \n 
    {{selectedFruit | json}}
    \n
    \n
    \n     \n \n angular.module('inputExample', [])\n .controller('inputController', function($scope) {\n $scope.items = [\n {name: 'Apricot', id: 443},\n {name: 'Clementine', id: 972},\n {name: 'Durian', id: 169},\n {name: 'Jackfruit', id: 982},\n {name: 'Strawberry', id: 863}\n ];\n })\n .component('basicAutocomplete', {\n bindings: {\n items: '<',\n onSelect: '&'\n },\n templateUrl: 'autocomplete.html',\n controller: function($element, $scope) {\n var that = this;\n var ngModel;\n\n that.$postLink = function() {\n ngModel = $element.find('input').controller('ngModel');\n\n ngModel.$formatters.push(function(value) {\n return (value && value.name) || value;\n });\n\n ngModel.$parsers.push(function(value) {\n var match = value;\n for (var i = 0; i < that.items.length; i++) {\n if (that.items[i].name === value) {\n match = that.items[i];\n break;\n }\n }\n\n return match;\n });\n };\n\n that.selectItem = function(item) {\n ngModel.$setViewValue(item);\n ngModel.$processModelValue();\n that.onSelect({item: item});\n };\n }\n });\n \n \n
    \n \n
      \n
    • \n \n
      • \n
    \n
    \n     \n *     \n *\n */\n $processModelValue: function() {\n var viewValue = this.$$format();\n\n if (this.$viewValue !== viewValue) {\n this.$$updateEmptyClasses(viewValue);\n this.$viewValue = this.$$lastCommittedViewValue = viewValue;\n this.$render();\n // It is possible that model and view value have been updated during render\n this.$$runValidators(this.$modelValue, this.$viewValue, noop);\n }\n },\n\n /**\n * This method is called internally to run the $formatters on the $modelValue\n */\n $$format: function() {\n var formatters = this.$formatters,\n idx = formatters.length;\n\n var viewValue = this.$modelValue;\n while (idx--) {\n viewValue = formatters[idx](viewValue);\n }\n\n return viewValue;\n },\n\n /**\n * This method is called internally when the bound scope value changes.\n */\n $$setModelValue: function(modelValue) {\n this.$modelValue = this.$$rawModelValue = modelValue;\n this.$$parserValid = undefined;\n this.$processModelValue();\n },\n\n $$setUpdateOnEvents: function() {\n if (this.$$updateEvents) {\n this.$$element.off(this.$$updateEvents, this.$$updateEventHandler);\n }\n\n this.$$updateEvents = this.$options.getOption('updateOn');\n if (this.$$updateEvents) {\n this.$$element.on(this.$$updateEvents, this.$$updateEventHandler);\n }\n },\n\n $$updateEventHandler: function(ev) {\n this.$$debounceViewValueCommit(ev && ev.type);\n }\n};\n\nfunction setupModelWatcher(ctrl) {\n // model -> value\n // Note: we cannot use a normal scope.$watch as we want to detect the following:\n // 1. scope value is 'a'\n // 2. user enters 'b'\n // 3. ng-change kicks in and reverts scope value to 'a'\n // -> scope value did not change since the last digest as\n // ng-change executes in apply phase\n // 4. view should be changed back to 'a'\n ctrl.$$scope.$watch(function ngModelWatch(scope) {\n var modelValue = ctrl.$$ngModelGet(scope);\n\n // if scope model value and ngModel value are out of sync\n // This cannot be moved to the action function, because it would not catch the\n // case where the model is changed in the ngChange function or the model setter\n if (modelValue !== ctrl.$modelValue &&\n // checks for NaN is needed to allow setting the model to NaN when there's an asyncValidator\n // eslint-disable-next-line no-self-compare\n (ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue)\n ) {\n ctrl.$$setModelValue(modelValue);\n }\n\n return modelValue;\n });\n}\n\n/**\n * @ngdoc method\n * @name ngModel.NgModelController#$setValidity\n *\n * @description\n * Change the validity state, and notify the form.\n *\n * This method can be called within $parsers/$formatters or a custom validation implementation.\n * However, in most cases it should be sufficient to use the `ngModel.$validators` and\n * `ngModel.$asyncValidators` collections which will call `$setValidity` automatically.\n *\n * @param {string} validationErrorKey Name of the validator. The `validationErrorKey` will be assigned\n * to either `$error[validationErrorKey]` or `$pending[validationErrorKey]`\n * (for unfulfilled `$asyncValidators`), so that it is available for data-binding.\n * The `validationErrorKey` should be in camelCase and will get converted into dash-case\n * for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error`\n * classes and can be bound to as `{{ someForm.someControl.$error.myError }}`.\n * @param {boolean} isValid Whether the current state is valid (true), invalid (false), pending (undefined),\n * or skipped (null). Pending is used for unfulfilled `$asyncValidators`.\n * Skipped is used by AngularJS when validators do not run because of parse errors and\n * when `$asyncValidators` do not run because any of the `$validators` failed.\n */\naddSetValidityMethod({\n clazz: NgModelController,\n set: function(object, property) {\n object[property] = true;\n },\n unset: function(object, property) {\n delete object[property];\n }\n});\n\n\n/**\n * @ngdoc directive\n * @name ngModel\n * @restrict A\n * @priority 1\n * @param {expression} ngModel assignable {@link guide/expression Expression} to bind to.\n *\n * @description\n * The `ngModel` directive binds an `input`,`select`, `textarea` (or custom form control) to a\n * property on the scope using {@link ngModel.NgModelController NgModelController},\n * which is created and exposed by this directive.\n *\n * `ngModel` is responsible for:\n *\n * - Binding the view into the model, which other directives such as `input`, `textarea` or `select`\n * require.\n * - Providing validation behavior (i.e. required, number, email, url).\n * - Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).\n * - Setting related css classes on the element (`ng-valid`, `ng-invalid`, `ng-dirty`, `ng-pristine`, `ng-touched`,\n * `ng-untouched`, `ng-empty`, `ng-not-empty`) including animations.\n * - Registering the control with its parent {@link ng.directive:form form}.\n *\n * Note: `ngModel` will try to bind to the property given by evaluating the expression on the\n * current scope. If the property doesn't already exist on this scope, it will be created\n * implicitly and added to the scope.\n *\n * For best practices on using `ngModel`, see:\n *\n * - [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes)\n *\n * For basic examples, how to use `ngModel`, see:\n *\n * - {@link ng.directive:input input}\n * - {@link input[text] text}\n * - {@link input[checkbox] checkbox}\n * - {@link input[radio] radio}\n * - {@link input[number] number}\n * - {@link input[email] email}\n * - {@link input[url] url}\n * - {@link input[date] date}\n * - {@link input[datetime-local] datetime-local}\n * - {@link input[time] time}\n * - {@link input[month] month}\n * - {@link input[week] week}\n * - {@link ng.directive:select select}\n * - {@link ng.directive:textarea textarea}\n *\n * ## Complex Models (objects or collections)\n *\n * By default, `ngModel` watches the model by reference, not value. This is important to know when\n * binding inputs to models that are objects (e.g. `Date`) or collections (e.g. arrays). If only properties of the\n * object or collection change, `ngModel` will not be notified and so the input will not be re-rendered.\n *\n * The model must be assigned an entirely new object or collection before a re-rendering will occur.\n *\n * Some directives have options that will cause them to use a custom `$watchCollection` on the model expression\n * - for example, `ngOptions` will do so when a `track by` clause is included in the comprehension expression or\n * if the select is given the `multiple` attribute.\n *\n * The `$watchCollection()` method only does a shallow comparison, meaning that changing properties deeper than the\n * first level of the object (or only changing the properties of an item in the collection if it's an array) will still\n * not trigger a re-rendering of the model.\n *\n * ## CSS classes\n * The following CSS classes are added and removed on the associated input/select/textarea element\n * depending on the validity of the model.\n *\n * - `ng-valid`: the model is valid\n * - `ng-invalid`: the model is invalid\n * - `ng-valid-[key]`: for each valid key added by `$setValidity`\n * - `ng-invalid-[key]`: for each invalid key added by `$setValidity`\n * - `ng-pristine`: the control hasn't been interacted with yet\n * - `ng-dirty`: the control has been interacted with\n * - `ng-touched`: the control has been blurred\n * - `ng-untouched`: the control hasn't been blurred\n * - `ng-pending`: any `$asyncValidators` are unfulfilled\n * - `ng-empty`: the view does not contain a value or the value is deemed \"empty\", as defined\n * by the {@link ngModel.NgModelController#$isEmpty} method\n * - `ng-not-empty`: the view contains a non-empty value\n *\n * Keep in mind that ngAnimate can detect each of these classes when added and removed.\n *\n * @animations\n * Animations within models are triggered when any of the associated CSS classes are added and removed\n * on the input element which is attached to the model. These classes include: `.ng-pristine`, `.ng-dirty`,\n * `.ng-invalid` and `.ng-valid` as well as any other validations that are performed on the model itself.\n * The animations that are triggered within ngModel are similar to how they work in ngClass and\n * animations can be hooked into using CSS transitions, keyframes as well as JS animations.\n *\n * The following example shows a simple way to utilize CSS transitions to style an input element\n * that has been rendered as invalid after it has been validated:\n *\n * 
    \n * //be sure to include ngAnimate as a module to hook into more\n * //advanced animations\n * .my-input {\n *   transition:0.5s linear all;\n *   background: white;\n * }\n * .my-input.ng-invalid {\n *   background: red;\n *   color:white;\n * }\n *
    \n *\n * @example\n * ### Basic Usage\n * \n \n \n \n

    \n Update input to see transitions when valid/invalid.\n Integer is a valid value.\n

    \n
    \n \n \n     \n *     \n *\n * @example\n * ### Binding to a getter/setter\n *\n * Sometimes it's helpful to bind `ngModel` to a getter/setter function. A getter/setter is a\n * function that returns a representation of the model when called with zero arguments, and sets\n * the internal state of a model when called with an argument. It's sometimes useful to use this\n * for models that have an internal representation that's different from what the model exposes\n * to the view.\n *\n *
    \n * **Best Practice:** It's best to keep getters fast because AngularJS is likely to call them more\n * frequently than other parts of your code.\n *
    \n *\n * You use this behavior by adding `ng-model-options=\"{ getterSetter: true }\"` to an element that\n * has `ng-model` attached to it. You can also add `ng-model-options=\"{ getterSetter: true }\"` to\n * a `
    `, which will enable this behavior for all ``s within it. See\n * {@link ng.directive:ngModelOptions `ngModelOptions`} for more.\n *\n * The following example shows how to use `ngModel` with a getter/setter:\n *\n * @example\n * \n \n
    \n \n \n \n 
    user.name =
    \n
    \n     \n \n angular.module('getterSetterExample', [])\n .controller('ExampleController', ['$scope', function($scope) {\n var _name = 'Brian';\n $scope.user = {\n name: function(newName) {\n // Note that newName can be undefined for two reasons:\n // 1. Because it is called as a getter and thus called with no arguments\n // 2. Because the property should actually be set to undefined. This happens e.g. if the\n // input is invalid\n return arguments.length ? (_name = newName) : _name;\n }\n };\n }]);\n \n *     \n */\nvar ngModelDirective = ['$rootScope', function($rootScope) {\n return {\n restrict: 'A',\n require: ['ngModel', '^?form', '^?ngModelOptions'],\n controller: NgModelController,\n // Prelink needs to run before any input directive\n // so that we can set the NgModelOptions in NgModelController\n // before anyone else uses it.\n priority: 1,\n compile: function ngModelCompile(element) {\n // Setup initial state of the control\n element.addClass(PRISTINE_CLASS).addClass(UNTOUCHED_CLASS).addClass(VALID_CLASS);\n\n return {\n pre: function ngModelPreLink(scope, element, attr, ctrls) {\n var modelCtrl = ctrls[0],\n formCtrl = ctrls[1] || modelCtrl.$$parentForm,\n optionsCtrl = ctrls[2];\n\n if (optionsCtrl) {\n modelCtrl.$options = optionsCtrl.$options;\n }\n\n modelCtrl.$$initGetterSetters();\n\n // notify others, especially parent forms\n formCtrl.$addControl(modelCtrl);\n\n attr.$observe('name', function(newValue) {\n if (modelCtrl.$name !== newValue) {\n modelCtrl.$$parentForm.$$renameControl(modelCtrl, newValue);\n }\n });\n\n scope.$on('$destroy', function() {\n modelCtrl.$$parentForm.$removeControl(modelCtrl);\n });\n },\n post: function ngModelPostLink(scope, element, attr, ctrls) {\n var modelCtrl = ctrls[0];\n modelCtrl.$$setUpdateOnEvents();\n\n function setTouched() {\n modelCtrl.$setTouched();\n }\n\n element.on('blur', function() {\n if (modelCtrl.$touched) return;\n\n if ($rootScope.$$phase) {\n scope.$evalAsync(setTouched);\n } else {\n scope.$apply(setTouched);\n }\n });\n }\n };\n }\n };\n}];\n" }, { "path": "src/ng/directive/ngModelOptions.js", "content": "'use strict';\n\n/* exported defaultModelOptions */\nvar defaultModelOptions;\nvar DEFAULT_REGEXP = /(\\s+|^)default(\\s+|$)/;\n\n/**\n * @ngdoc type\n * @name ModelOptions\n * @description\n * A container for the options set by the {@link ngModelOptions} directive\n */\nfunction ModelOptions(options) {\n this.$$options = options;\n}\n\nModelOptions.prototype = {\n\n /**\n * @ngdoc method\n * @name ModelOptions#getOption\n * @param {string} name the name of the option to retrieve\n * @returns {*} the value of the option\n * @description\n * Returns the value of the given option\n */\n getOption: function(name) {\n return this.$$options[name];\n },\n\n /**\n * @ngdoc method\n * @name ModelOptions#createChild\n * @param {Object} options a hash of options for the new child that will override the parent's options\n * @return {ModelOptions} a new `ModelOptions` object initialized with the given options.\n */\n createChild: function(options) {\n var inheritAll = false;\n\n // make a shallow copy\n options = extend({}, options);\n\n // Inherit options from the parent if specified by the value `\"$inherit\"`\n forEach(options, /** @this */ function(option, key) {\n if (option === '$inherit') {\n if (key === '*') {\n inheritAll = true;\n } else {\n options[key] = this.$$options[key];\n // `updateOn` is special so we must also inherit the `updateOnDefault` option\n if (key === 'updateOn') {\n options.updateOnDefault = this.$$options.updateOnDefault;\n }\n }\n } else {\n if (key === 'updateOn') {\n // If the `updateOn` property contains the `default` event then we have to remove\n // it from the event list and set the `updateOnDefault` flag.\n options.updateOnDefault = false;\n options[key] = trim(option.replace(DEFAULT_REGEXP, function() {\n options.updateOnDefault = true;\n return ' ';\n }));\n }\n }\n }, this);\n\n if (inheritAll) {\n // We have a property of the form: `\"*\": \"$inherit\"`\n delete options['*'];\n defaults(options, this.$$options);\n }\n\n // Finally add in any missing defaults\n defaults(options, defaultModelOptions.$$options);\n\n return new ModelOptions(options);\n }\n};\n\n\ndefaultModelOptions = new ModelOptions({\n updateOn: '',\n updateOnDefault: true,\n debounce: 0,\n getterSetter: false,\n allowInvalid: false,\n timezone: null\n});\n\n\n/**\n * @ngdoc directive\n * @name ngModelOptions\n * @restrict A\n * @priority 10\n *\n * @description\n * This directive allows you to modify the behaviour of {@link ngModel} directives within your\n * application. You can specify an `ngModelOptions` directive on any element. All {@link ngModel}\n * directives will use the options of their nearest `ngModelOptions` ancestor.\n *\n * The `ngModelOptions` settings are found by evaluating the value of the attribute directive as\n * an AngularJS expression. This expression should evaluate to an object, whose properties contain\n * the settings. For example: `
    \n *
    \n * \n * \n *
    \n * ```\n *\n * the `input` element will have the following settings\n *\n * ```js\n * { allowInvalid: true, updateOn: 'default', debounce: 0 }\n * ```\n *\n * Notice that the `debounce` setting was not inherited and used the default value instead.\n *\n * You can specify that all undefined settings are automatically inherited from an ancestor by\n * including a property with key of `\"*\"` and value of `\"$inherit\"`.\n *\n * For example given the following fragment of HTML\n *\n *\n * ```html\n *
    \n *
    \n * \n * \n *
    \n * ```\n *\n * the `input` element will have the following settings\n *\n * ```js\n * { allowInvalid: true, updateOn: 'default', debounce: 200 }\n * ```\n *\n * Notice that the `debounce` setting now inherits the value from the outer `
    ` element.\n *\n * If you are creating a reusable component then you should be careful when using `\"*\": \"$inherit\"`\n * since you may inadvertently inherit a setting in the future that changes the behavior of your component.\n *\n *\n * ## Triggering and debouncing model updates\n *\n * The `updateOn` and `debounce` properties allow you to specify a custom list of events that will\n * trigger a model update and/or a debouncing delay so that the actual update only takes place when\n * a timer expires; this timer will be reset after another change takes place.\n *\n * Given the nature of `ngModelOptions`, the value displayed inside input fields in the view might\n * be different from the value in the actual model. This means that if you update the model you\n * should also invoke {@link ngModel.NgModelController#$rollbackViewValue} on the relevant input field in\n * order to make sure it is synchronized with the model and that any debounced action is canceled.\n *\n * The easiest way to reference the control's {@link ngModel.NgModelController#$rollbackViewValue}\n * method is by making sure the input is placed inside a form that has a `name` attribute. This is\n * important because `form` controllers are published to the related scope under the name in their\n * `name` attribute.\n *\n * Any pending changes will take place immediately when an enclosing form is submitted via the\n * `submit` event. Note that `ngClick` events will occur before the model is updated. Use `ngSubmit`\n * to have access to the updated model.\n *\n * ### Overriding immediate updates\n *\n * The following example shows how to override immediate updates. Changes on the inputs within the\n * form will update the model only when the control loses focus (blur event). If `escape` key is\n * pressed while the input field is focused, the value is reset to the value in the current model.\n *\n * \n * \n *
    \n *
    \n *
    \n *
    \n * \n * 
    user.name =
    \n *
    \n *     \n * \n * angular.module('optionsExample', [])\n * .controller('ExampleController', ['$scope', function($scope) {\n * $scope.user = { name: 'say', data: '' };\n *\n * $scope.cancel = function(e) {\n * if (e.keyCode === 27) {\n * $scope.userForm.userName.$rollbackViewValue();\n * }\n * };\n * }]);\n * \n * \n * var model = element(by.binding('user.name'));\n * var input = element(by.model('user.name'));\n * var other = element(by.model('user.data'));\n *\n * it('should allow custom events', function() {\n * input.sendKeys(' hello');\n * input.click();\n * expect(model.getText()).toEqual('say');\n * other.click();\n * expect(model.getText()).toEqual('say hello');\n * });\n *\n * it('should $rollbackViewValue when model changes', function() {\n * input.sendKeys(' hello');\n * expect(input.getAttribute('value')).toEqual('say hello');\n * input.sendKeys(protractor.Key.ESCAPE);\n * expect(input.getAttribute('value')).toEqual('say');\n * other.click();\n * expect(model.getText()).toEqual('say');\n * });\n * \n *     \n *\n * ### Debouncing updates\n *\n * The next example shows how to debounce model changes. Model will be updated only 1 sec after last change.\n * If the `Clear` button is pressed, any debounced action is canceled and the value becomes empty.\n *\n * \n * \n *
    \n *
    \n * Name:\n * \n *
    \n * \n * 
    user.name =
    \n *
    \n *     \n * \n * angular.module('optionsExample', [])\n * .controller('ExampleController', ['$scope', function($scope) {\n * $scope.user = { name: 'say' };\n * }]);\n * \n *     \n *\n * ### Default events, extra triggers, and catch-all debounce values\n *\n * This example shows the relationship between \"default\" update events and\n * additional `updateOn` triggers.\n *\n * `default` events are those that are bound to the control, and when fired, update the `$viewValue`\n * via {@link ngModel.NgModelController#$setViewValue $setViewValue}. Every event that is not listed\n * in `updateOn` is considered a \"default\" event, since different control types have different\n * default events.\n *\n * The control in this example updates by \"default\", \"click\", and \"blur\", with different `debounce`\n * values. You can see that \"click\" doesn't have an individual `debounce` value -\n * therefore it uses the `*` debounce value.\n *\n * There is also a button that calls {@link ngModel.NgModelController#$setViewValue $setViewValue}\n * directly with a \"custom\" event. Since \"custom\" is not defined in the `updateOn` list,\n * it is considered a \"default\" event and will update the\n * control if \"default\" is defined in `updateOn`, and will receive the \"default\" debounce value.\n * Note that this is just to illustrate how custom controls would possibly call `$setViewValue`.\n *\n * You can change the `updateOn` and `debounce` configuration to test different scenarios. This\n * is done with {@link ngModel.NgModelController#$overrideModelOptions $overrideModelOptions}.\n *\n \n \n \n \n \n angular.module('optionsExample', [])\n .component('modelUpdateDemo', {\n templateUrl: 'template.html',\n controller: function() {\n this.name = 'Chinua';\n\n this.options = {\n updateOn: 'default blur click',\n debounce: {\n default: 2000,\n blur: 0,\n '*': 1000\n }\n };\n\n this.updateEvents = function() {\n var eventList = this.options.updateOn.split(' ');\n eventList.push('*');\n var events = {};\n\n for (var i = 0; i < eventList.length; i++) {\n events[eventList[i]] = this.options.debounce[eventList[i]];\n }\n\n this.events = events;\n };\n\n this.updateOptions = function() {\n var options = angular.extend(this.options, {\n updateOn: Object.keys(this.events).join(' ').replace('*', ''),\n debounce: this.events\n });\n\n this.form.input.$overrideModelOptions(options);\n };\n\n // Initialize the event form\n this.updateEvents();\n }\n });\n \n \n
    \n Input: \n \n Model: {{$ctrl.name}}\n
    \n \n\n
    \n
    \n updateOn
    \n \n\n
    \n \n \n \n \n \n \n \n \n
    OptionDebounce value
    {{key}}
    \n\n
    \n \n \n \n \n *\n *\n * ## Model updates and validation\n *\n * The default behaviour in `ngModel` is that the model value is set to `undefined` when the\n * validation determines that the value is invalid. By setting the `allowInvalid` property to true,\n * the model will still be updated even if the value is invalid.\n *\n *\n * ## Connecting to the scope\n *\n * By setting the `getterSetter` property to true you are telling ngModel that the `ngModel` expression\n * on the scope refers to a \"getter/setter\" function rather than the value itself.\n *\n * The following example shows how to bind to getter/setters:\n *\n * \n * \n *
    \n *
    \n * \n *
    \n * 
    user.name =
    \n *
    \n *     \n * \n * angular.module('getterSetterExample', [])\n * .controller('ExampleController', ['$scope', function($scope) {\n * var _name = 'Brian';\n * $scope.user = {\n * name: function(newName) {\n * return angular.isDefined(newName) ? (_name = newName) : _name;\n * }\n * };\n * }]);\n * \n *     \n *\n *\n * ## Programmatically changing options\n *\n * The `ngModelOptions` expression is only evaluated once when the directive is linked; it is not\n * watched for changes. However, it is possible to override the options on a single\n * {@link ngModel.NgModelController} instance with\n * {@link ngModel.NgModelController#$overrideModelOptions `NgModelController#$overrideModelOptions()`}.\n * See also the example for\n * {@link ngModelOptions#default-events-extra-triggers-and-catch-all-debounce-values\n * Default events, extra triggers, and catch-all debounce values}.\n *\n *\n * ## Specifying timezones\n *\n * You can specify the timezone that date/time input directives expect by providing its name in the\n * `timezone` property.\n *\n *\n * ## Formatting the value of `time` and `datetime-local`\n *\n * With the options `timeSecondsFormat` and `timeStripZeroSeconds` it is possible to adjust the value\n * that is displayed in the control. Note that browsers may apply their own formatting\n * in the user interface.\n *\n \n \n \n \n \n angular.module('timeExample', [])\n .component('timeExample', {\n templateUrl: 'timeExample.html',\n controller: function() {\n this.time = new Date(1970, 0, 1, 14, 57, 0);\n\n this.options = {\n timeSecondsFormat: 'ss',\n timeStripZeroSeconds: true\n };\n\n this.optionChange = function() {\n this.timeForm.timeFormatted.$overrideModelOptions(this.options);\n this.time = new Date(this.time);\n };\n }\n });\n \n \n
    \n Default:\n
    \n With options:\n \n
    \n\n Options:
    \n timeSecondsFormat:\n \n
    \n timeStripZeroSeconds:\n \n \n
    \n *     \n *\n * @param {Object} ngModelOptions options to apply to {@link ngModel} directives on this element and\n * and its descendents.\n *\n * **General options**:\n *\n * - `updateOn`: string specifying which event should the input be bound to. You can set several\n * events using an space delimited list. There is a special event called `default` that\n * matches the default events belonging to the control. These are the events that are bound to\n * the control, and when fired, update the `$viewValue` via `$setViewValue`.\n *\n * `ngModelOptions` considers every event that is not listed in `updateOn` a \"default\" event,\n * since different control types use different default events.\n *\n * See also the section {@link ngModelOptions#triggering-and-debouncing-model-updates\n * Triggering and debouncing model updates}.\n *\n * - `debounce`: integer value which contains the debounce model update value in milliseconds. A\n * value of 0 triggers an immediate update. If an object is supplied instead, you can specify a\n * custom value for each event. For example:\n * ```\n * ng-model-options=\"{\n * updateOn: 'default blur',\n * debounce: { 'default': 500, 'blur': 0 }\n * }\"\n * ```\n * You can use the `*` key to specify a debounce value that applies to all events that are not\n * specifically listed. In the following example, `mouseup` would have a debounce delay of 1000:\n * ```\n * ng-model-options=\"{\n * updateOn: 'default blur mouseup',\n * debounce: { 'default': 500, 'blur': 0, '*': 1000 }\n * }\"\n * ```\n * - `allowInvalid`: boolean value which indicates that the model can be set with values that did\n * not validate correctly instead of the default behavior of setting the model to undefined.\n * - `getterSetter`: boolean value which determines whether or not to treat functions bound to\n * `ngModel` as getters/setters.\n *\n *\n * **Input-type specific options**:\n *\n * - `timezone`: Defines the timezone to be used to read/write the `Date` instance in the model for\n * ``, ``, ... . It understands UTC/GMT and the\n * continental US time zone abbreviations, but for general use, use a time zone offset, for\n * example, `'+0430'` (4 hours, 30 minutes east of the Greenwich meridian)\n * If not specified, the timezone of the browser will be used.\n * Note that changing the timezone will have no effect on the current date, and is only applied after\n * the next input / model change.\n *\n * - `timeSecondsFormat`: Defines if the `time` and `datetime-local` types should show seconds and\n * milliseconds. The option follows the format string of {@link date date filter}.\n * By default, the options is `undefined` which is equal to `'ss.sss'` (seconds and milliseconds).\n * The other options are `'ss'` (strips milliseconds), and `''` (empty string), which strips both\n * seconds and milliseconds.\n * Note that browsers that support `time` and `datetime-local` require the hour and minutes\n * part of the time string, and may show the value differently in the user interface.\n * {@link ngModelOptions#formatting-the-value-of-time-and-datetime-local- See the example}.\n *\n * - `timeStripZeroSeconds`: Defines if the `time` and `datetime-local` types should strip the\n * seconds and milliseconds from the formatted value if they are zero. This option is applied\n * after `timeSecondsFormat`.\n * This option can be used to make the formatting consistent over different browsers, as some\n * browsers with support for `time` will natively hide the milliseconds and\n * seconds if they are zero, but others won't, and browsers that don't implement these input\n * types will always show the full string.\n * {@link ngModelOptions#formatting-the-value-of-time-and-datetime-local- See the example}.\n *\n */\nvar ngModelOptionsDirective = function() {\n NgModelOptionsController.$inject = ['$attrs', '$scope'];\n function NgModelOptionsController($attrs, $scope) {\n this.$$attrs = $attrs;\n this.$$scope = $scope;\n }\n NgModelOptionsController.prototype = {\n $onInit: function() {\n var parentOptions = this.parentCtrl ? this.parentCtrl.$options : defaultModelOptions;\n var modelOptionsDefinition = this.$$scope.$eval(this.$$attrs.ngModelOptions);\n\n this.$options = parentOptions.createChild(modelOptionsDefinition);\n }\n };\n\n return {\n restrict: 'A',\n // ngModelOptions needs to run before ngModel and input directives\n priority: 10,\n require: {parentCtrl: '?^^ngModelOptions'},\n bindToController: true,\n controller: NgModelOptionsController\n };\n};\n\n\n// shallow copy over values from `src` that are not already specified on `dst`\nfunction defaults(dst, src) {\n forEach(src, function(value, key) {\n if (!isDefined(dst[key])) {\n dst[key] = value;\n }\n });\n}\n" }, { "path": "src/ng/directive/ngNonBindable.js", "content": "'use strict';\n\n/**\n * @ngdoc directive\n * @name ngNonBindable\n * @restrict AC\n * @priority 1000\n * @element ANY\n *\n * @description\n * The `ngNonBindable` directive tells AngularJS not to compile or bind the contents of the current\n * DOM element, including directives on the element itself that have a lower priority than\n * `ngNonBindable`. This is useful if the element contains what appears to be AngularJS directives\n * and bindings but which should be ignored by AngularJS. This could be the case if you have a site\n * that displays snippets of code, for instance.\n *\n * @example\n * In this example there are two locations where a simple interpolation binding (`{{}}`) is present,\n * but the one wrapped in `ngNonBindable` is left alone.\n *\n \n \n
    Normal: {{1 + 2}}
    \n
    Ignored: {{1 + 2}}
    \n     \n \n it('should check ng-non-bindable', function() {\n expect(element(by.binding('1 + 2')).getText()).toContain('3');\n expect(element.all(by.css('div')).last().getText()).toMatch(/1 \\+ 2/);\n });\n \n     \n */\nvar ngNonBindableDirective = ngDirective({ terminal: true, priority: 1000 });\n" }, { "path": "src/ng/directive/ngOptions.js", "content": "'use strict';\n\n/* exported ngOptionsDirective */\n\n/* global jqLiteRemove */\n\nvar ngOptionsMinErr = minErr('ngOptions');\n\n/**\n * @ngdoc directive\n * @name ngOptions\n * @restrict A\n *\n * @description\n *\n * The `ngOptions` attribute can be used to dynamically generate a list of ``\n * DOM element.\n * * `disable`: The result of this expression will be used to disable the rendered `