AngularJS1.X上学笔记2-多少绑定

  上同样篇自总体上认识了Angular,从兹开班一发深切的上Angular的特点。本次上的凡数据绑定。应该有着的MVC框架还见面因此到数绑定,比如自己所知道的ThinkPHP、struts等,只有实现了多少绑定才会用模型层和视图层分离,实现MVC。Angular的多寡绑定比较特别,它支持双向数据绑定。

1、ng-bind

 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <h1 ng-controller='dataCtrl' ng-bind='data'>

    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

  ng-bind实现了一个略但为绑定。

2、{{}}

  类似ng-bind,用的比多。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <h1 ng-controller='dataCtrl'>
        {{data}}
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

 

  这种绑定的短是,开始加载时或者会见出现仿佛{{data}}这样的东西。

图片 1

  解决措施是使ng-bind或ng-cloak,ng-cloak应该只是于发多少绑定的地方以,否则处理面临用户以视空白。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding2</title>
</head>
<body ng-cloak>
    <h1 ng-controller='dataCtrl'>
        {{data}}
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

 

   我测试了一下ng-cloak,不了解怎么不行,有人理解的讲话请告知一下。

3、ng-bind-html

  这个令可以用html的法门处理数量,它不会见拿html代码解析成实体。下面对比一下ng-bind和ng-bind-html.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller='dataCtrl' ng-bind='data'>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "<h1 style='color:red;'>你好啊</h1>";
        })
    </script>
</body>
</html>

图片 2

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller='dataCtrl' ng-bind-html='data'>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "<h1 style='color:red;'>你好啊</h1>";
        })
    </script>
</body>
</html>

 

  换成ng-bind-html时起错了

图片 3

  这是以Angular默认是无信任html的,所以一旦如此做。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller='dataCtrl' ng-bind-html='data'>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope,$sce){
            $scope.data = $sce.trustAsHtml("<h1 style='color:red;'>你好啊</h1>");
        })
    </script>
</body>
</html

  这样就算足以了。

图片 4

4、ng-bind-template

  ng-bind只接受单个数据绑定表达式,而ng-bind-template则相对灵活些。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller='dataCtrl' ng-bind-template='{{data1}}爱{{data2}} '>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope,$sce){
            $scope.data1 = "我";
            $scope.data2 = "中国";
        })
    </script>
</body>
</html>
<!-- 我爱中国-->

 

5、ng-non-bindable

  有时我们下了{{}}但是我们并无是如果绑定数据,直接用会拧,所以只要像这样

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <h1 ng-controller='dataCtrl' ng-non-bindable>
        ng中绑定数据的方法是{{data}}
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            //$scope.data = "你好啊!";
        })
    </script>
</body>
</html>

 

6、双向数据绑定ng-model

  双向数据绑定允许元素于用户处于采集数据为改变程序状态。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding5</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <h1>{{data}}</h1>
        <input type="text" name="data" ng-model="data">
    </div>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

 

图片 5

  你见面发觉文本框的情节以及h1中之情节并变化。

7、小结一下

  与数量绑定的系指令如下

  图片 6

  下面开始上模板指令。2017-03-31
20:41:59

相关文章