AngularJS——Interpolate

最新推荐文章于 2020-06-22 22:09:29 发布

Paul_Huang_2011

最新推荐文章于 2020-06-22 22:09:29 发布

阅读量1.3k

点赞数

分类专栏： Web前端文章标签： angularjs

本文链接：https://blog.csdn.net/hbr2014/article/details/45641443

版权

Web前端专栏收录该内容

20 篇文章 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});
            }
        });
    }
    );

当你在HTML的emailbody 文本框中输入{{to}}时，会自动被替换成model中的to值。