angularJs ng-bind,ng-init,ng-bind-html,ng-bind-template区别

最新推荐文章于 2021-06-21 19:28:13 发布

世态炎凉！！

最新推荐文章于 2021-06-21 19:28:13 发布

阅读量643

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ws9029/article/details/108545859

AngularJs 专栏收录该内容

17 篇文章

订阅专栏

本文深入讲解AngularJS中关键指令的功能及使用场景，包括ng-bind、ng-init、ng-bind-html和ng-bind-template的区别与应用，帮助开发者更好地掌握AngularJS的动态数据绑定技术。

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

用了angularJs的对这几个指令应该并不陌生，它们之前就什么区别，可能有些人对此用法比较模糊，下面我们来一一讲解下：

1.ng-bind

作用：告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容，并在该表达式的值更改时更新文本内容

注意： ng-bind不能解析html元素，它只能解析普通字符串

<body ng-controller='MyCtrl'>
    <div ng-bind="html"></div>
    <div ng-bind="str"></div>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('MyCtrl',['$scope',function ($scope) {
            $scope.html = '<span>我是html元素</span>';
            $scope.str="我是字符串";
        }])
    </script>
</body>

看下面执行结果：
在这里插入图片描述
当然，你I不用ng-bind你也可以直接用{{ }}表达式来写，但是这样会有个问题，angularJS还未编译时候，浏览器会将它未编译时的状态显示出来，那么你要用到ngCloak指令（它的原理是给元素加上了一个class让元素不显示，当angularJs解析到ngCloak指令时候会去掉class让元素显示）

<body ng-controller='MyCtrl'>
<div ng-cloak>
    <div>{{html}}</div>
    <div>{{str}}</div>
</div>

<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('MyCtrl', ['$scope', function ($scope) {
        $scope.html = '<span>我是html元素</span>';
        $scope.str = "我是字符串";
    }])
</script>
</body>

这样写也可以，但是建议还用ng-bind来进行绑定

2.ng-init

作用：这个指令可以在模板中直接赋值,用于初始化数据，说得直白一点就是开始时赋值

注意：当需要多个变量定义时，必须用分号隔开，而不是用逗号，ngInit的唯一适当用法是为ngRepeat的特殊属性使用别名。除了这种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。

<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="angular.js"></script>
</head>
<body ng-controller='MyCtrl'>
    <div ng-repeat='item in init' ng-init='itemIndex=$index'>
        <div ng-repeat='value in item' ng-init='valueIndex=$index'>
            <span>{{itemIndex}},{{valueIndex}}</span>
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('MyCtrl', ['$scope', function ($scope) {
            $scope.init = [
                [1, 2, 3],
                [4, 5, 6]
            ];
        }])
    </script>
</body>
</html>

我的嵌套ng-repeat循环需要第二个$ index。我应该在哪里放？这时候可以使用ngInit为这些属性创建别名！下图是我为输出的两个$ index的值
在这里插入图片描述

3.ng-bind-html

作用：计算表达式并将生成的HTML以安全的方式插入到元素中

注意：与ng-bind的不用之处是可以插入html元素，并且要与安全的方式插入，安全插入的方式有两种，一种是$ sanitize服务，另外一种是$sce服务

一.$ sanitize服务（前提是引入angular-sanitize.js）

<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="angular.js"></script>
    <!-- <script src="angular-sanitize.js"></script> -->
</head>

<body ng-controller='MyCtrl'>
    <div ng-bind-html="html"></div>
    <div ng-bind="str"></div>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('MyCtrl',['$scope',function ($scope) {
            $scope.html = '<span>我是html元素</span>';
            $scope.str="字符串";
        }])
    </script>
</body>
</html>

在这里插入图片描述

我把angular-sanitize.js注释了，所以会报错！如果你把angular-sanitize.js引进来，使用ngSanitize 模块依赖，默认情况下将使用$ sanitize服务对生成的HTML内容进行处理

<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="angular.js"></script>
    <script src="angular-sanitize.js"></script>
</head>

<body ng-controller='MyCtrl'>
    <div ng-bind-html="html"></div>
    <div ng-bind="str"></div>
    <script type="text/javascript">
        var app = angular.module('app',['ngSanitize']);
        app.controller('MyCtrl',['$scope',function ($scope) {
            $scope.html = '<span>我是html元素</span>';
            $scope.str="字符串";
        }])
    </script>
</body>
</html>

在这里插入图片描述

二.$ sce服务

<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="angular.js"></script>
</head>

<body ng-controller='MyCtrl'>
    <div ng-bind-html="html"></div>
    <div ng-bind="str"></div>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('MyCtrl',['$scope','$sce',function ($scope,$sce) {
            $scope.html = $sce.trustAsHtml('<span>我是html元素</span>');
            $scope.str='字符串';
        }])
    </script>
</body>
</html>

直接通过$sce.trustAsHtml绑定到显式信任的值！

4.ng-bind-template

作用：为指定元素文本内容替换为ngBindTemplate属性中模板的值

注意：它的作用和ng-bind的类似，也不能解析html元素，但是它可以解析多个表达式，写法上要表达式用{{ }}的形式

<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="angular.js"></script>
</head>

<body ng-controller='MyCtrl'>
    <div ng-bind-html="html"></div>
    <div ng-bind="str"></div>
    <div ng-bind-template='{{html}}{{str}}'>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('MyCtrl',['$scope','$sce',function ($scope,$sce) {
            $scope.html = $sce.trustAsHtml('<span>我是html元素</span>');
            $scope.str='字符串';
        }])
    </script>
</body>
</html>