AngularJs -- 表达式

表达式在AngularJS应用中被广泛使用,因此深入理解AngularJS如何使用并运算表达式是非常重要的。

前面已经见过使用表达式的示例。用{{ }}符号将一个变量绑定到$scope上的写法本质上就是一个表达式:
{{ expression }}。当用$watch进行监听时,AngularJS会对表达式或函数进行运算。

表达式和eval(javascript)非常相似,但是由于表达式由AngularJS来处理,它们有以下显著不同的特性:

  • 所有的表达式都在其所属的作用域内部执行,并有访问本地$scope的权限;

  • 如果表达式发生了TypeError和ReferecneError并不会抛出异常;(类型错误,引用错误);

  • 不允许使用任何流程控制功能(条件控制,例如if/else);

  • 可以接受过滤器和过滤链接;

对表达式进行的任何操作,都会在其所属的作用域内部执行,因此可以在表达式内部调用那
些限制在此作用域内的变量,并可以对他们进行循环、函数调用、将变量应用到数学表达式中等操作。

解析AngularJS表达式

尽管AngularJS会在运行$digest循环的过程中自动解析表达式,但有时手动解析表达式也是非常有用的。

http://blog.csdn.net/dm_vincent/article/details/38705099

插值字符串

在AngularJS中,我们有手动运行模板编译的能力。例如:
插值允许基于作用域上的某个条件实时更新文本字符串。

如果需要在文本中使用不同于{{ }}的符号来标识表达式的开始和结束,
可以$inter polateProvider中配置。

用startSymbol()【符号】方法可以修改标识开始的符号。这个方法接受一个参数。

  • value(字符型):开始符号的值。

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

  • value(字符型):结束符号的值。

HTML

<div id="emailEditor" ng-controller="MyController">
    <input ng-model="to"
           type="email"
           placeholder="Recipient" />
    <textarea ng-model="emailBody"></textarea>

    <div id="emailPreview">
      <pre>__ previewText __</pre>
    </div>
</div>

JAVASCRIPT

angular.module('myApp', ['emailParser'])
  .controller('MyController',
    ['$scope', 'EmailParser',
      function($scope, EmailParser) {
        $scope.to = 'ari@fullstack.io';
        $scope.emailBody = 'Hello __to__';
        // Set up a watch
        $scope.$watch('emailBody', function(body) {
          if (body) {
            $scope.previewText =
              EmailParser.parse(body, {
                to: $scope.to
              });
          }
        });
}]);

angular.module('emailParser', [])
  .config(['$interpolateProvider',
    function($interpolateProvider) {
      $interpolateProvider.startSymbol('__');
      $interpolateProvider.endSymbol('__');
}])
.factory('EmailParser', ['$interpolate',
  function($interpolate) {
    // a service to handle parsing
    return {
      parse: function(text, context) {
        var template = $interpolate(text);
        return template(context);
      }
    };
}]);

要在字符串模板中做插值操作,需要在你的对象中注入$interpolate[插值]服务
,下面的例子,我们会将它注入到一个控制中。

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

  • text(字符串):一个包含字符插值标记的字符串。

  • mustHaveExpression(布尔值):如果将这个参数设为true,当传入的字符串不含有表达式会返回null.

  • trustedContend(字符串):AngularJS会对已经进行过字符插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义。

$interpolate服务返回一个函数,用来在特定的上下文中运算表达式。
设置好这些参数后,就可以在控制器中进行字符插值了。
如:我们可以在电子邮件的正文中进行实时编辑,当文本发生变化时进行字符插值操作并将结果
展示出来。

HTML

<div ng-controller="MyController">
   <input ng-model="to" type="text" placeholder="test-text" />
   <textarea ng-model="emailBody" id="" cols="30" rows="10"></textarea>
   <pre>{{ previewText }}</pre>
</div>

JAVASCRIPT

var app = angular.module('myApp', [])	
   app.controller('MyController', function($scope, $interpolate) {
	$scope.$watch('emailBody', function(body) {
	   if (body) {
		var template = $interpolate(body);
		$scope.previewText = template({to: $scope.to});
	   }
       });
   });

*如果没有对应的字符串插值,那么就正常显示输入的内容。

通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
原文地址:https://www.cnblogs.com/mcat/p/4466045.html