AngularJS——Interpolate-蒲公英云

AngularJS——Interpolate

桃扇骨 2022-08-08 06:42 98阅读 0赞

Interpolate的作用

Interpoloate的作用简单来说就是用变量值填充模板，实现根据Scope的情况实时更新字符串文本。

Interpolate的用法

html文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Interpolate</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="js/interpolate.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="interpolateController">
    <input ng-model="to"
           placeholder="Recipient" />
    <textarea ng-model="emailBody"></textarea>
    <pre>{
     { previewText }}</pre>
</div>
</body>
</html>

interpolate.js文件：

var myApp=angular.module("myApp",[]);
myApp.controller("interpolateController", function($scope, $interpolate) {
// Set up a watch
        $scope.$watch('emailBody', function (body) {
            if (body) {
                var template = $interpolate(body);
                $scope.previewText =
                    template({to: $scope.to});
            }
        });
    }
    );