[java学习11]angularJS之$parse服务练习

缺乏、安全感 2022-07-15 04:40 132阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app="MyApp">
    <head>
        <meta charset="UTF-8">
        <title>练习Parsed</title>
        <script src="frameWork/angular.js"></script>
    </head>
    <body>
    <div ng-controller="MyController">
        <h3>简单应用：</h3>{
       {nameAndAge1}}<br>
        <h3>传递参数：</h3>{
       {nameAndAge2}}<br>
        <h3>使用函数：</h3>{
       {nameAndAge3}}<br>
        <h3>计算器</h3>
        <input type="text" ng-model="expression"/>
        <h3>结果：{
       {ParsedValue}}</h3>
    </div>
    </body>
    <script>
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope, $parse) {
            var contextName = {
                name: "灵眼儿上方",
                age: 32,
                contextFun:function(name){return "hello:" + name;}
            };
            var data = {name: "徐良", age: 26};
            var expName = "'姓名： ' + name + '；年龄：' + age";
            var expNamewithFun = "'姓名： ' + contextFun(name) + '；年龄：' + age";
            var parseFun = $parse(expName);
            var parseWithFun = $parse(expNamewithFun);
            $scope.nameAndAge1 = parseFun(contextName);
            $scope.nameAndAge2 = parseFun(contextName, data);
            $scope.nameAndAge3 = parseWithFun(contextName, data);
    
            $scope.$watch("expression", function (newValue, oldValue, context) {
                if (newValue !== oldValue) {
                    var parseFunc = $parse(newValue);
                    $scope.ParsedValue = newValue + "=" + parseFunc(context);
                }
            });
        });
    </script>
    </html>