angularjs——插值字符串

時間 2019-11-29

原文原文鏈接

1、何爲插值字符串？

其實插值字符串的意思就是：擁有字符插值標記的字符串。
如： hello,{{ to }}....
字符插值標記：至關於咱們平時在字符串替換中使用到的佔位符。
上面的例子中的{{to}}其實就是相似於一個佔位符，咱們能夠經過$interpolate服務將上面的例子中的字符串進行處理，返回一個模板對象，因爲$interpolate服務默認是將{{、}}分別當作是佔位符的前綴和後綴，因此，上面的例子中的{{to}}將會被當作一個佔位符，而且把to當作該佔位符的命名，能夠給模板對象傳入一個對象如：{to:'xxxx'}，直接替換掉{{to}}佔位符。html

2、來個栗子！

<!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.comgit

3、$interpolate服務

$interpolate服務是一個能夠接受三個參數的函數，其中第一個參數是必需的。angularjs

text（字符串）：一個包含字符插值標記的字符串。
mustHaveExpression（布爾型）：若是將這個參數設爲true，當傳入的字符串中不含有表
達式時會返回null。
trustedContext（字符串）： AngularJS會對已經進行過字符插值操做的字符串經過
$sec.getTrusted()方法進行嚴格的上下文轉義。

$interpolate服務返回一個函數，用來在特定的上下文中運算表達式。app

4、如何改變佔位符的前、後綴？

上面的第一點就講到了$interpolate默認的佔位符是以{{、}}爲先後綴的。
那這個佔位符的先後綴可否改爲咱們本身想要的樣子呢？
答案是確定的，固然能夠改~~
咱們只須要在$interpolateProvider服務進行配置。ide

$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__的格式.spa

<!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>