5.表达式

1.概述

用{{ }} 将一个变量绑定到$scope 上的写法本质上就是一个表达式：{{expression}}。当用$watch 监听时，AngularJS 会对表达式或函数进行运算。

AngularJS 的表达式有以下显著特性：

  • 所有表达式又在其所属的作用域内部执行，有访问本地$scope 的权限
  • 表达式发生TypeError 和ReferenceError 不会抛出异常
  • 不能使用任何流程控制语句（条件控制，例如if/else）
  • 可以接受过滤器和过滤器链

对表达式进行的任何操作，都会在其所属的作用域内部执行，所以可以在表达式内部调用那些限制在此作用域内的变量，并进行循环、函数调用、将变量应用到数学表达式中等操作。

2.解析表达式

AngularJS 会在运行$digest 循环的过程中自动解析表达式，但有时候手动解析也是有用的。

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

将$scope 服务注入到控制器中，然后调用它就可以实现手动解析表达式。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="MyController">
            Name:
            <input ng-model="expr"
                   type="text"
                   placeholder="Enter name" />
            <h2>{{ parsedValue }}</h2>
        </div>
    </div>
    <script>
        angular.module("myApp", [])
.controller('MyController',
function ($scope, $parse) {
    //$watch(watchExpression, listener, objectEquality) 是一个scope 函数，用于监听模型变化
    //参数：watchExpression: 监听对象，可以是表达式如'expr', 或函数如function(){return $scope.name}
    //      listener: 回调函数，接收三个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
    //      objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化
    $scope.$watch('expr', function (newVal, oldVal, scope) {
        if (newVal != oldVal) {
            var context = {
                name: newVal
                };
            //注意格式，不小心就要吃没文化的亏
            var expression = "'Hello '+ name";
            //用该表达式设置parseFun
            var parseFun = $parse(expression);
            // 获取经过解析后表达式的值
            $scope.parsedValue = parseFun(context);
        }
    });
});
    </script>
</body>
</html>

　　

 3.插值字符串

要在字符串模板中做插值操作，需要注入$interpolate 服务，如下所示。

angular.module('myApp'[]).controller('myController',function($scope,$interpolate){
    //同时拥有访问$scope 和$interpolate 服务的权限
});

　　$interpolate 服务接收3个参数，第一个必须，后面两个可省略。

text(字符串)：一个包含字符插值的字符串。

mustHaveExpresson(布尔型)：如果将这个参数设为true，当传入的字符串不含有表达式时会返回null。

trustedContext(字符串)：AngularJS 会对已经进行过字符插值操作的字符串通过$sec.getTrusted() 方法进行严格的上下文转义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="MyController">
            Email:
            <input ng-model="to"
                   type="email"
                   placeholder="Recipient" />
            <textarea ng-model="emailBody"></textarea>
            <!--pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
            <pre> 标签的一个常见应用就是用来表示计算机的源代码。-->
<pre>{{previewText}}</pre>
        </div>
    </div>
    <script>
        angular.module("myApp", []).controller('MyController',function ($scope, $interpolate) {
            //设置监听emailBody
            $scope.$watch('emailBody', function (newVal, oldVal, scope) {
                if (newVal) {
                    var template = $interpolate(newVal);
                    //在控件emailBody 中输入"{{tototo}} "就相当于$scope.to 的变量
                    $scope.previewText = template({ tototo: $scope.to });
                }
            });
        });
    </script>
</body>
</html>

　　结果如下：

 

posted on 2017-08-15 16:59  MojoJojo  阅读(146)  评论(0)    收藏  举报

导航