AngularJS入门基础——表达式

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

 

表达式和eval非常相似，但是由于表达式由AngularJS来处理，它们有已下显著不同的特性：

第一：所有的表达式都在其属的作用域北部执行，并有访问本地$scope的权限；

第二：如果表达式发生了TypeError和ReferenceError并不会抛出异常；

第三：不允许使用任何流程控制功能（条件控制，例如If/esle）;

第四： 可以接受过滤器和过滤器链；

 

关于解析表达式：AngularJS通过$parse[解析]这个内部服务来进行表达式的解析，这个服务能够访问当前所处的作用域。

这个过程允许我们访问定义在$scope上的原始JavaScript数据和函数。

 

// HTML

<div ng-controller="MyController">

    <input ng-model="expr"

            type="text"

            placeholder="Enter an expression" />

    <div>{{ parsedExpr }}</div>

  </div>

 

// SCRIPT

angular.module('myApp', [])

    .controller('MyController',

    ['$scope', '$parse', function($scope, $parse) {

 

      $scope.person = {

        name: "Ari Lerner"

      };

 

      $scope.$watch('expr', function(newVal, oldVal, scope) {

        if (newVal !== oldVal) {

          // 让我们建立parseFun表达式

          var parseFun = $parse(newVal);

          // 获取记过解析后的表达式的值，放在scope里，output出来

          scope.parsedExpr = parseFun(scope);

        }

      });

    }]);

 

插入字符串：

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

要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。

angular.module('myApp', [])

    .controller('Mycontroller', function($scope, $interpolate) {

        //我们同事拥有了两个内置服务的权限

    });

 

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

 

//HTML

<div ng-controller="TestController">

  <input ng-model="to" type="email" placeholder="Recipient">

  <textarea ng-model="emailBody"></textarea>

  <pre>{{ previewText }}</pre>

</div>

 

//其实这里面我测试后我有一点不是很理解，为何插值没有实现previewText 还是会有更新，看脚本表面的意思应该只是把插值放进来才对的哦！

 

//SCRIPT

angular.module('myApp', [])

  .controller('TestController', function($scope, $interpolate) {

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

      if (body) {

        var template = $interpolate(body);

        $scope.previewText = template({to: $scope.to});

      }

    });

  });