道招

浅析AngularJS中的$interpolate

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

浅析AngularJS中的$interpolate

interpolate $interpolate服务是一个可以接受三个参数的函数,其中第一个参数是必需的。

使用方法:

|text(字符串)|一个包含字符插值标记的字符串。| |----|----| |mustHaveExpression(布尔型)|如果将这个参数设为true,当传入的字符串中不含有表达式时返回null,而不是我们期望的interpolation function。| |trustedContext(字符串)|AngularJS会对已经进行过字符串插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义。| |返回值(函数)|用来在特定的上下文中运算表达式。| 假设我们在群发邮件的时候,邮件内容一样,只是收件人'to'不同,或者想让不同的发件人'from'也不同,这里我们可以将邮件内容'emailBody'写成模板,将to和from写成“变量”: emailBody = 'Hello {{ to }}, Best wishes from {{from}}' 要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务。在下面的例子中,我们将会将它注入到一个控制器中
var app = angular.module("myApp", []);
app.controller('MyController', function($scope, $interpolate) {
  $scope.to = 'ari@fullstack.io';
  $scope.from = '123456@qq.com';
  $scope.emailBody = 'Hello {{ to }},\nBest wishes from {{from}}';

  //Set up a watch
  $scope.$watch('to', function(body) {
    console.log(body);
    if (body) {
      var template = $interpolate($scope.emailBody, true);
      $scope.previewText = template({
        to: $scope.to,
        from: $scope.from
      });
    }
  });
});
上面的template就是$interpolate服务返回回来的函数,在这个函数里面只能传递一个参数,里面的{to: $scope.to,from:$scope.from}意思很明显,多个需要替换的上下文就用逗号隔开
<div ng-controller="MyController">
    <input ng-model="to" type="email" >
    <textarea ng-model="emailBody"></textarea>
    <pre>{{previewText}}</pre>
</div>
运行结果如下; interpolate 如果需要在文本中使用不同于{{ }}的符号来标识表达式的开始和结束,可以在$inter polateProvider中配置。 用startSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。
value(字符型) :开始符号的值。
用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数。
value(字符型) : 结束符号的值。
如果要修改这两个符号的设置,需要在创建新模块时将$interpolateProvider注入进去。下面我们来创建一个服务:
app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('__');
  $interpolateProvider.endSymbol('__');
}]);
app.factory('EmailParser', ['$interpolate', function($interpolate) {
  //处理解析的服务
  return {
    parse: function(text, context) {
      var template = $interpolate(text);
      return template(context);
    }
  }
}]);



app.controller('MyController', ['$scope', 'EmailParser', function($scope, EmailParser) {
  $scope.to = 'ari@fullstack.io';
  $scope.from = '123456@qq.com';
  $scope.emailBody = 'Hello __ to __,\nBest wishes from __from__';
  // 设置监听
  $scope.$watch('emailBody', function(body) {
    if (body) {
      $scope.previewText = EmailParser.parse(body, {
        to: $scope.to,
        from: $scope.from
      });
    }
  });
}]);
由于我们将表达式开始和结束的符号都设置成了__,因此需要将HTML修改成用这个符号取代{{ }}的版本,效果如图所示。
<div id="emailEditor">
    <input ng-model="to" type="email" />
    <textarea ng-model="emailBody"></textarea>
    </div>
    <div id="emailPreview">
    <pre>__ previewText __</pre>
</div>
更新时间:
上一篇:自用Angularjs开发环境搭建(国内通用)下一篇:浅析angular.forEach

相关文章

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了