angularjs——插值字符串

最新推荐文章于 2024-05-09 21:52:56 发布

aed97713

最新推荐文章于 2024-05-09 21:52:56 发布

阅读量181

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/JamKong/p/5948052.html

版权

一、何为插值字符串？

其实插值字符串的意思就是：拥有字符插值标记的字符串。
如： hello,{{ to }}....
字符插值标记：相当于我们平时在字符串替换中使用到的占位符。
上面的例子中的{{to}}其实就是类似于一个占位符，我们可以通过$interpolate服务将上面的例子中的字符串进行处理，返回一个模板对象，由于$interpolate服务默认是将{{、}}分别当做是占位符的前缀和后缀，所以，上面的例子中的{{to}}将会被当做一个占位符，并且把to当做该占位符的命名，可以给模板对象传入一个对象如：{to:'xxxx'}，直接替换掉{{to}}占位符。

二、来个栗子！

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
  <div ng-controller="MyController">
    <input ng-model="to" 
          type="email" 
          placeholder="Recipient" />
    <textarea ng-model="emailBody"></textarea>
    <pre>{{ previewText }}</pre>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  </div>
</body>
</html>

angular.module('myApp',[])
  .controller('MyController',function($scope,$interpolate){
   $scope.emailBody = "hello,{{to}}";
   $scope.to = 'ari@fullstack.io';
   var template = $interpolate($scope.emailBody);
   $scope.$watch('to',function(to){
     console.log(to);
     $scope.previewText = template({'to':$scope.to});  
   });
});

代码片段：JS Bin on jsbin.com

三、$interpolate服务

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

text（字符串）：一个包含字符插值标记的字符串。
mustHaveExpression（布尔型）：如果将这个参数设为true，当传入的字符串中不含有表
达式时会返回null。
trustedContext（字符串）： AngularJS会对已经进行过字符插值操作的字符串通过
$sec.getTrusted()方法进行严格的上下文转义。

$interpolate服务返回一个函数，用来在特定的上下文中运算表达式。

四、如何改变占位符的前、后缀？

上面的第一点就讲到了$interpolate默认的占位符是以{{、}}为前后缀的。
那这个占位符的前后缀能否改成我们自己想要的样子呢？
答案是肯定的，当然可以改~~
我们只需要在$interpolateProvider服务进行配置。

$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');

注意：使用$interpolateProvider进行设置这个占位符的前后缀的时候，需要注意你的上下文，如果你是直接在某个模块下进行配置，那么该模块的angularjs数据绑定对象的{{xxx}}格式也会被影响。
如：

angular.module('myApp',[])
  .config(['$interpolateProvider',function($interpolateProvider){
      $interpolateProvider.startSymbol('__');
      $interpolateProvider.endSymbol('__');
  }])
  .controller('MyController',function($scope,$interpolate){
   $scope.emailBody = "hello,__to__";
   $scope.to = 'ari@fullstack.io';
   $scope.previewText ="";
   var template = $interpolate($scope.emailBody);
   $scope.$watch('to',function(to){
     console.log(to);
     $scope.previewText = template({'to':$scope.to});
     console.log($scope.previewText);
   });
});

那么html页面中{{previewText}}就也要改成__previewText__的格式.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
  <div ng-controller="MyController">
    <input ng-model="to" 
          type="email" 
          placeholder="Recipient" />
    <br/>
    <textarea ng-model="emailBody"></textarea>
    <br/>
    <pre>__previewText__</pre>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  </div>
</body>
</html>