Las expresiones son fragmentos de código tipo JavaScript, generalmente se colocan en el área unida (como {{Expression}}). Las expresiones se analizan y ejecutan a través del servicio $ Parse (http://code.angularjs.org/1.0.2/docs/api/ng.$parse).
Por ejemplo, las siguientes son expresiones válidas en Angular:
1. Expresión angular frente a la expresión JS
Esto es fácil para las personas asociar una expresión de visión angular como una expresión de JavaScript, pero esto no es del todo correcto, porque Angular no evalúa una expresión a través de la evaluación () de JavaScript. Puede pensar en una expresión angular como una expresión de JavaScript con las siguientes diferencias:
Por otro lado, si queremos ejecutar el código JavaScript arbitrario (en una expresión angular), podemos escribir ese código en uno de los métodos del controlador y llamarlo. Si queremos evaluar () una expresión angular en JavaScript, podemos usar el método $ eval ().
<! DocType html> <html lang = "zh-cn" ng-app = "expresionTest"> <head> <meta charset = "utf-8"> <title> expresion-e1 </title> <style type = "text/css"> .ng-cloak {pantalla: ninguno; } </estilo> </head> <cuerpo ng-concontroller = "myctrl"> 1 + 2 = {{1 + 2}} <br/> Expression: <input type = "text" ng-model = "expr"/> <button ng-click = "addEXP (exp)"> evaluar </boton> <ul> <li ng-sepeat = "expr in expr" ng-click = "removeexp ($ index)" href = ""> x </a>] <tt> {{expr}} </tt> => <span ng-bind = "$ parent. $ eval (exp)"> </span> </li> </ul> <script src = "../ angular-1.0.1.js" type = "text/javscript" type = "text/javaScript"> var app = angular.module ("ExpressionTest", []); app.controller ("myctrl", function ($ scope) {var exprs = $ scope.exprs = []; $ scope.expr = "3*10 | moneda"; $ scope.addexp = function (expr) {exprs.push (exp);}; $ scope.removeexp = function (index) {exprs.splice (ox, 1); 1);};};};};};};}; }); </script> </body> </html>2. Evaluación de la propiedad
El contexto del entorno de análisis de la expresión angular es el alcance, mientras que JavaScript es la ventana (debe referirse al modo estricto Evel), y Angular necesita acceder al objeto de ventana global a través de la ventana $. Por ejemplo, si necesitamos llamar a Alert () definido en un objeto de ventana en una expresión, necesitamos usar $ Window.alert (). Esto tiene la intención de evitar acceder accidentalmente al estado global (una fuente común de errores sutiles).
<! DOCTYPE HTML> <html lang = "zh-cn" ng-app = "PropertyEvaluation"> <HEAD> <meta charset = "utf-8"> <title> PropertyEvaluation </title> <style type = "text/css"> .ng-cloak {pantalla: Ninguno; } </style> </head> <body> <div ng-concontroller = "myctrl"> name: <input ng-model = "name" type = "text"/> <button ng-click = "greet ()"> greet </boton> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> <script <script <script <script> <script> type = "text/javaScript"> var app = angular.module ("PropertyEvaluation", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.name = "kitty"; $ scope.greet = function () {$ window.alert ("hello" + $ scope.name);};}); </script> </body> </html>3. Perdón (tolerancia, tolerancia a fallas?)
La evaluación de la expresión es perdonadora indefinida y nula. En JavaScript, cuando A no es un objeto, evalúa ABC, se lanzará una excepción. A veces, esto es razonable para los idiomas comunes, y la evaluación de la expresión se usa principalmente para la unión de datos, y la forma general es la siguiente:
{{abecedario}}
Si A no existe, ninguna pantalla parece ser más razonable que lanzar una excepción (a menos que esperemos que el servidor responda, lo que se definirá en poco tiempo). Si la expresión no es lo suficientemente tolerante cuando se evalúa, entonces escribimos el código de enlace de manera tan confusa:
{{((A || {}). B || {}). C}} // esto ...
Del mismo modo, cuando se refiere a una función abc (), si está indefinida o nula, simplemente devuelve indefinido.
4. Sin declaraciones de flujo de control
No podemos escribir declaraciones de control de procesos en expresiones. La razón detrás de esto es que el sistema central de Angular es que la lógica de la aplicación debe estar en el controlador (alcance), no en la vista. Si necesitamos agregar ramas condicionales, bucles o arrojar excepciones a la expresión de la vista, podemos delegar el método JavaScript (puede llamar al método en alcance).
5. Filtros
Cuando presentamos datos a los usuarios, es posible que necesitemos convertir los datos del formato original a un formato amigable (altamente legible). Por ejemplo, tenemos un objeto de datos que debe formatearse en función de la región antes de mostrarse al usuario. Podemos pasar expresiones a una serie de filtros, como:
nombre | mayúscula
Este evaluador de expresión simplemente puede pasar el valor de nombre al filtro mayúsculas.
Los filtros de cadena usan esta sintaxis:
valor | filtro1 | filtro2
También podemos transferir parámetros divididos por colons a filtros, por ejemplo, mostrando 123 en dos decimales:
123 | Número: 2
6. Prefijo "$"
Podemos encontrarlo extraño, ¿cuál es el significado del prefijo "$"? Es un prefijo simple (evitando conflictos) utilizado por Angular para diferenciar su nombre API de otras API. Si Angular no usa $, entonces la evaluación de A.Length () devolverá indefinida. Porque ni un angular ni angular define esta propiedad.
Teniendo en cuenta que las versiones futuras de Angular pueden optar por aumentar la longitud, esto cambiará el comportamiento de esta expresión. Lo que es peor es que los desarrolladores podríamos crear una propiedad de longitud que luego entrará en conflicto con Angular. Este problema existe porque Angular extiende el objeto existente actualmente al agregar métodos. Al agregar el prefijo "$", Angular retiene un espacio de nombres específico, por lo que los desarrolladores y desarrolladores angulares que usan Angular pueden vivir en armonía.