AngularJS入门知识

1，解析AngularJS表达式

     * 尽管angularjs会在运行$digest循环的过程中自动解析表达式，但是有时手动解析表达式非常有用的；
     * angularjs通过$parse这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。
     * 这个过程允许我们访问定义在$scope的原始js数据和函数；
     * $parse服务注入到控制器中，然后调用它就可以实现手动解析表达式
     * 如下：页面中有一个输入框绑定到了expr变量上；

html:

      <div ng-controller="MyController">
        <input type="tex" ng-model="expr" placeholder="my expression">
        <h2>{{parsedValue}}</h2>
    </div>

js:

        var app = angular.module('myApp',[]);
        app.controller('MyController',function($scope,$parse){
            $scope.$watch('expr',function(newVal,oldVal,scope){
                if(newVal !== oldVal){
                    // 用该表达式设置parseFun
                    var parseFun = $parse('expr');
                    // 获取经过解析后表达式的值
                    $scope.parsedValue = parseFun(scope);
                }
            })
        })

2, 插值字符串

        /***
         * $interpolate服务是一个可以接受三个参数的函数
         * text(字符串)：一个包含字符串插值标记的字符串。
         * mustHaveExpression(布尔型)，如果这个参数为true，当传入的字符串中不包含有表达式时会返回null
         * trustedContext(字符串)：Angularjs会对已经进行的过的字符串插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义；
         * $interpolate服务返回一个函数，用来在特定的上下文中运算表达式；
         *  */  
        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})
                }
            })
        })

3,{{}}–修改angular的绑定标记

/***
         * 如果需要再文本中使用不同于{{}}的符号来标识表达式的开始和结束，
         * 可以在$interpolateProvider中配置。
         * 用startSymbol()方法可以修改标识符的开始符号。这个方法接受一个参数：
         * value（字符型）：开始符号的值
         * 用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数；
         * value（字符型）：结束符号的值
         * 如果要修改这两个符号的设置，需要在创建新模板时将$interpolateProvider注入进去
         */
        angular.module('emailParser',[])
            .config(['$interpolateProvider',function($interpolateProvider){
                $interpolateProvider.startSymbol('__');
                $interpolateProvider.endSymbol('__');
            }])
            .factory('EmailParser',['$interpolate',function($interpolate){
                //  处理解析的服务
                return {
                    parse:function(text,context){
                        var template = $interpolate(text);
                        return template(context);
                    }
                }
            }])
        /**
         * 以上，我们创建了一个模板，可以将它注入到应用中，并在邮件正文的文本中运行这个邮件解析器
         */
        angular.module('myApp',['emailParser'])
            .controller('MyController',['$scope','EmailParser',function($scope,EmailParser){
                //  设置监听
                $scope.$watch('emailBody',function(body){
                    if(body){
                        $scope.previewText = EmailParser.parse(body,{
                            to:$scope.to
                        })
                    }
                })
            }])

html:

    <div ng-controller="MyController">
        <input type="email" ng-model="to" placeholder="anyway">
        <textarea name="" id="" cols="30" rows="10" ng-model="emailBody"></textarea>
        <pre>__previewText__</pre>
    </div>