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>

随机文章

百度搜索真坏啊
百度搜索真坏啊

为网站添加google +1按钮
为网站添加google +1按钮

让网站快速提醒用户升级IE6,letskillie6
让网站快速提醒用户升级IE6,letskillie6

第二十一讲:网络编程(一)
第二十一讲:网络编程(一)

中兴V880刷机图文教程
中兴V880刷机图文教程

相关文章

wordpress插入代码插件
wordpress插入代码插件

财猫省钱浏览器使用心得
财猫省钱浏览器使用心得

(转载)java编写俄罗斯方块时旋转的方法
(转载)java编写俄罗斯方块时旋转的方法

腾讯啥时候发起了搜搜发薪计划
腾讯啥时候发起了搜搜发薪计划

内容分享:道招
本文链接:浅析AngularJS中的$interpolate
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!