关于angularJS的插值字符串

来源：互联网发布：mac os x 10.7镜像下载编辑：程序博客网时间：2024/06/08 07:45

<!DOCTYPE html>

<html>
<head>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
       <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset=utf-8 />
<title>插值字符串</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>
</div>
</body>
<script>
   angular.module('myApp', [])
.controller('MyController',
    function($scope, $interpolate) {
      $scope.to = 'ari@fullstack.io对对对';
      $scope.emailBody = 'Hello {{ to }},My name is Ari too!';
      // Set up a watch

$scope.$watch('emailBody', function(q) {

//书中的参数名是body，传入带有插值的字符串 'Hello {{ to }},My name is Ari too!'

        if (q) {
          var template = $interpolate(q);
          $scope.previewText =
            template({to: $scope.to});           //在此处说明插值的值，{{to}}为$scope.to
        }
      });
});
</script>

</html>

如果需要在文本中使用不同于{{}}的符号来表示表达式的开始和结束，可以在$interpolateProvider中陪住用startSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。

value（字符型）：开始符号的值。

用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数。

value（字符型）：结束符号的值。

如果要修改这两个符号的设置，需要在创建新模块时将$interpolateProvider注入进去。下面我们来创建一个服务：

angular.module('emailParser',[])

.config(['$interpolateProvider',function($interpolateProvider){

$interpolateProvider.startSymbol('__') ;

.controller('MyController', ['$scope', 'EmailParser',function($scope, EmailParser) {
// 设置监听
$scope.$watch('emailBody', function(body) {
if (body) {
$scope.previewText = EmailParser.parse(body, {
to: $scope.to
});
}
});
}]);

<div id="emailEditor">
<input ng-model="to" type="email" placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
</div>
<div id="emailPreview">
<pre>__ previewText __</pre>
</div>

阅读全文

0 0