数据显示优化处理以及插件简介

最新推荐文章于 2021-09-17 15:23:58 发布

原创最新推荐文章于 2021-09-17 15:23:58 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#优化 #用户体验 #html #angular

angularJS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了AngularJS中多种数据绑定方法，包括ng-bind、ng-bind-template和ng-bind-html等，探讨了它们在提高用户体验方面的应用及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据显示优化处理以及插件简介

（上一章节使用ng-value提高了表单的用户体验，那么我们在HTML中写入内容是是否可以提高用户体验呢？情况类似ng-value与value，接下来我们将进行详细的分析）

代码示例：

    <script>
    var m=angular.module('myApp',[]);
    m.controller('Aaa',['$scope',function($scope){
        $scope.text = "hello"; 
    }]);
    </script>

    <div ng-controller="Aaa">
        <div>{{text}}</div>
    </div>
    <script type="text/javascript">
    alert(1);
    </script>

页面结果展示：
这里写图片描述

使用ng-bind，使用方法与ng-value相同

只支持一个表达式，不支持多个表达式

代码示例：

<div ng-bind="text"></div>

页面展示结果：

这里写图片描述

ng-bind-template：既支持一个表达式，也支持多个表达式
代码示例：

<div ng-bind-template="{{text}},{{text}}"></div>

ng-value-html：当我们的数据包含标签，并需要解析标签输出而不是以字符串的形式输出时，我们需要使用ng-value-html。（由于该方法不常用故代码不在angulae.min.js中，我们在使用此类方法时我们需要另外其他的包。可在http://www.bootcdn.dn/angular.js该网址上进行查看，即可以看做一个插件也可看做模块）

页面结果展示：
这里写图片描述

使用ng-value-html后：
代码示例：

    <script src="angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
    <script>
    var m = angular.module('myApp',['ngSanitize']);//引入相应模块
    m.controller('Aaa',['$scope',function($scope){
        $scope.text = "<h1>hello</h1>";    
    }]);
    </script>

    <div ng-controller="Aaa">
        <div ng-bind-html="text"></div>
    </div>