AngularJS学习之路——表达式（2）

插值字符串

插值字符串就是拥有插值标记的字符串

举个栗子

let str = ' hello , {{ expr }} ';

这里的 {{ expr }} 就是插值标记，str 就是拥有插值标记的字符串。

如何在字符串中做插值操作？

想要在字符串中做插值操作，就需要在对象的中注入$interpolate服务。$interpolate服务是一个可以接受三个参数的函数，其中一个是必需的。三个参数分别是text、mustHaveExpression、trustedContext。

text

一个包含字符插值标记的字符串。

mustHaveExpression

如果将这个参数设为true，当传入的字符串中不含有表达式时会返回null。

trustedContext

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

假设一个场景：
我们希望在电子邮件的正文中进行实时编辑，当文本发生变化时进行字符串插值操作，并且将结果输出出来。

HTML代码：

<div ng-app="app" ng-controller="con">
    <input type="text" ng-model="to">
    <textarea ng-model="emailBody" name="name"></textarea>
    <pre>{{ previewText }}</pre>
</div>

JS代码：

angular.module('app',[])
.controller('con',($scope,$interpolate) => {
  $scope.$watch('emailBody',body => {
    if( body ){
      let template = $interpolate(body);
      $scope.previewText = template({to:$scope.to});
    }
  });
 })

修改插值标识符

如果需要修改插值的标识符，可以在$interpolateProvider中配置。

使用startSymbol()和endSymbol()函数来修改开始标识符和结束标识符，两个函数接受的都是字符串类型的参数。

举个栗子

angular.module('emailParser',[])
.config(['$interpolateProvider', $interpolateProvider => {
  /* 修改为 __expression__ */
  $interpolateProvider.startSymbol('__');
  $interpolateProvider.endSymbol('__');
}])
.factory('EmailParser',[$interpolate,$interpolate => {
  return {
    parse : (text,context) => {
      let template = $interpolate(text);
      return template(context);
    }
  }
}])

/* 依赖emailParser模块 */
angular.module('app',['emailParser'])
.controller('con',['$scope','EmailParser',($scope,EmailParser) => {
    $scope.$watch('emailBody',body => {
      if(body){
        $scope.previewText = EmailParser.parse(body,{to:$scope.to});
      }
    });
}]);

总结

• 什么是插值字符串；
• 如何在字符串中做插值操作；
• 修改插值标识符。