angularjs字符串插值（$interpolate）

时间：2023-12-23 09:02:32
<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>字符串插值</title>

    <link rel="stylesheet" href="../bootstrap.min.js">

</head>

<body ng-controller="myController">

    To: <input type="text" ng-model="to" placeholder="输入联系人">

    <br>

    email:

    <br>

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

    <br>

    <!-- 第二个例子这里需要修改为 ‘_ _’这个符号 -->

    预览: <pre>_previewText_</pre>

    <script src="../angular.min.js"></script>

    <script>

        // 字符串插值 这里演示将$interpolate封装为services的用法

　　　　　　

        // angular.module('app', [])

        // .controller('myController', function($scope, $interpolate) { // 直接使用$interpolate的演示

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

        //         console.log(body)

        //         if(body) {

        //             var template = $interpolate(body);

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

        //         }

        //     })

        // })

        // 修改标识表达式的符号{{ }}为_ _ , 查看这个例子 需要将html中的{{ }} 改为_ _

        angular.module('app', [])

        .config(['$interpolateProvider',

            function($interpolateProvider) {

                $interpolateProvider.startSymbol('_');

                $interpolateProvider.endSymbol('_');

            }

        ])

        .factory('EmailParser', ['$interpolate',

            function($interpolate) { // 也可以将 $interpolate 封装成为一个services

                return {

                    parse: function(text, contact) {

                        var template = $interpolate(text);

                        return template(contact);

                    }

                }

            }

        ])

        .controller('myController', ['$scope', 'EmailParser',

            function($scope, EmailParser) {

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

                    if(body) {

                        $scope.previewText = EmailParser.parse(body, {

                            to: $scope.to

                        })

                    }

                })

            }

        ])

    </script>

</body>

</html>

相关文章