AngularJS 绑定

作者: what__ | 来源:发表于2017-07-24 19:27 被阅读0次

Ionic ng-model 数据双向绑定
AngularJS —— 表达式及指令
2、Expression of AngularJS
AngularJS 绑定
AngularJS的数据双向绑定是怎么实现的？
AngularJS 的变化检测
AngularJS入门案例
angular/json
Angular（一）
AngularJS表达式-基础

简单的事件绑定

下面的html文件是举例说明给模块依赖绑定另一个模块来净化标签上的属性
主要是体现模块依赖绑定

<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./angular.min.js"> </script>
        <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js">
            
        </script>
    </head>
    <body ng-controller="myController">

        {{htmlStr}}
        <hr>
        <h1 ng-bind="htmlStr"></h1>
        <h1 ng-bind-html="htmlStr"></h1>
        <div ng-bind-html="s">
            
        </div>
    </body>
    <script>
        //sanitize 模块  过滤净化html字符串
        //会将标签上的属性全部移除, 只保留一个干净的标签
        //使用方法: 引入 angular-sanitize 脚本 在模块中依赖 ngSanitize 就可以直接使用ng-bind-html 

        //内置$sce 服务, 用来新人某html字符串
        //在控制器中依赖此服务 调用$sce.trustAsHtml(htnlStr)方法,信任传入的html返回被信任的html,可使用ng-bind-html
        //使用#sce信任html,请确保html是安全的(风险自行承担)
        angular.module("myApp",["ngSanitize"])
        .controller("myController",["$scope","$sce",function($scope,$sce){
            $scope.htmlStr =`
                <div>
                    <p diy="自定义属性">p 内容</p>//
                    <span onclick="console.log(1)">span 内容</span>
                </div>
            `;
            $scope.s = $sce.trustAsHtml($scope.htmlStr);
        }])
    </script>
</html>```