6 模板和表达式

妖狐艹你老母 2022-05-26 00:29 124阅读 0赞

# 模板和表达式 #

## 模板(Template) ##

Angular的模板是一个声明式的视图，它指定信息从模型、控制器变成用户在浏览器上可以看见的视图。 它把一个静态的DOM —— 只包含HTML，CSS以及Angular添加的标记和属性，然后引导Angular为其加上一些行为和格式转换器，最终变成一个动态的DOM。

在Angular中有以下元素属性可以直接在模板中使用:

*  指令(Directive) — 一个可扩展已有DOM元素或者代表可重复使用的DOM组件，用扩展属性(或者元素)标记。
 *  表达式(Expressions) — 用双括号 \{ \{ \}\} 给元素绑定表达式。
 *  过滤器(Filter) — 格式化数据显示在界面上。
 *  表单控件(Form Control) — 验证用户输入。

注: 除了在模板中声明元素外, 你也可以在JavaScript代码中访问这些元素。

下面的代码片段展示了一个简单的Angular模板，主要由带有(指令)的HTML标准标签和\{ \{ \}\} 表达式(Expressions)组成:

在一个简单的单页程序中，模板包含HTML，CSS和Angular指令，通常只是一个HTML文件(如 index.html)， 在一个更复杂的程序中，你可以在一个主要的页面用”零件(partials)”展示多个视图，这些 “零件(partials)”都是独立的HTML文件，在主页面可以包含(include) 这些”零件(partials)”页面，通过路由 $route 和 ngView指令结合。

## 表达式(Expressions) ##

“表达式”是一种类似JavaScript的代码片段，通常在视图中以\{ \{ \}\} 的形式使用。表达式由`$parse`服务解析，而解析之后经常会使用过滤器来格式化成一种更加用户友好的形式。

例如，下面这些都是Angular中合法的表达式：

1+2
    user.name

### Angular表达式与JS表达式的区别 ###

可能会有人认为Angular视图表达式就是JavaScript表达式，但这不完全正确，因为Angular并没有使用JavaScript中的`'eval()'`来解析表达式。你可以认为Angular表达式与JavaScript表达式有如下的区别：

*  属性解析： 所有的属性的解析都是相对于作用域(scope)的，而不像JavaScript中的表达式解析那样是相对于全局’window’对象的。
 *  容错性： 表达式的解析对’undefined’和’null’具有容错性，这不像在JavaScript中，试图解析未定义的属性时会抛出ReferenceError或TypeError错误.
 *  禁止控制流语句： 表达式中不允许包括下列语句：条件判断(if)，循环(for/while)，抛出异常(throw)。

另一方面，如果你想执行特定的JavaScript代码，你应该在一个控制器里导出一个方法，然后在模板中调用这个方法。如果你想在JavaScript中解析一个Angular表达式，使用`$eval()`方法。

**总结**

*  AngularJS 表达式写在双大括号内：`{ { expression }}`。
 *  AngularJS 表达式把数据绑定到 HTML，这与 `ng-bind` 指令有异曲同工之妙。
 *  AngularJS 将在表达式书写的位置”输出”数据。
 *  类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
 *  与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
 *  与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
 *  与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

### 解析表达式 ###

AngularJS通过`$parse`这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。这个过程允许我们访问定义在`$scope`上的原始JavaScript数据和函数。

**$parse**

将Angular表达式转换为函数。

使用：`$parse(expression);`

*expression*：被编译的表达式。

`function(context,locals)`表示表达式编译后的函数

*  *context*：对象，含有需要解析的语句中的表达式（通常是一个scope对象）。
 *  *locals*：对象，局部变量的上下文对象，用于重写上下文中的值。

返回函数也包含下面属性：

*  *literal*：boolean，表达式的顶节点是否是一个javascript字面量。
 *  *constant*：boolean, 表达式是否全部是由javascript的常量字面量组成。
 *  *assign*：function(context,locals)，可以用来在给定的上下文中修改表达式的值。

**使用代码**

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
    {
       {ctrl.ParsedValue}}
    </div>

### 插值字符串 ###

**$interpolate**

将一个字符串编译成一个插值函数。HTML编译服务使用这个服务完成数据绑定。

使用：`$interpolate(text,[mustHaveExpression],[trustedContext],[allOrNothing]);`

*  text：需要被编译的字符串。
 *  mustHaveExpression：boolean，如果为true，那么text必须含有嵌入其中的表达式，不然将会返回null，而不是预期的interpolate function，默认为false。
 *  trustedContext：string，如果这个参数被提供，那么在返回相应的函数之前会使用`$sce.getTrusted(interpolatedResult, trustedContext)`对已经进行过字符插值操作的字符串进行严格的上下文转义。
 *  allOrNothing：boolean，如果allOrNothing为true，插值函数将会返回undefined，除非所有嵌入表达式的计算结果不为undefined。

**使用代码**

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
    <input ng-model="ctrl.text" />{
       {ctrl.value}}
    </div>

**$interpolateProvider配置**

如果需要在文本中使用不同于`{ { }}`的符号来标识表达式的开始和结束，可以在  
`$interpolateProvider`中配置。

`$interpolateProvider`方法：

*  startSymbol(value)：修改标识开始的符号。
 *  value（字符型）：开始符号的值。
 *  endSymbol(value)： 修改标识结束的符号。
 *  value（字符型）： 结束符号的值。

如果要修改这两个符号的设置，需要在创建新模块时将`$interpolateProvider`注入进去。

<div id="emailEditor">
    <input ng-model="to" type="email" placeholder="Recipient" />
    <textarea ng-model="emailBody"></textarea>
    </div>
    <div id="emailPreview">
    <pre>__ previewText __</pre>
    </div>

angular.module('emailParser', [])
    .config(['$interpolateProvider', function($interpolateProvider) { 
    $interpolateProvider.startSymbol('__');
    $interpolateProvider.endSymbol('__');
    }])
    .factory('EmailParser', ['$interpolate', function($interpolate) { 
    // 处理解析的服务
    return {
    parse: function(text, context) { 
    var template = $interpolate(text);
    return template(context);
    }
    };
    }])
    .controller('MyController', ['$scope', 'EmailParser',
    function($scope, EmailParser) { 
    // 设置监听
    $scope.$watch('emailBody', function(body) { 
    if (body) {
    $scope.previewText = EmailParser.parse(body, {
    to: $scope.to
    });
    }
    });
    }]);