angularjs——插值字符串

时间：2023-03-08 19:40:24
angularjs——插值字符串

一、何为插值字符串？

其实插值字符串的意思就是：拥有字符插值标记的字符串。
如： 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>

所以，一般情况下$interpolateProvide用在自己创建的服务上面，这样就可以把上下文环境进行隔离。

代码片段：JS Bin on jsbin.com

相关文章