Angular指令渗透式理解

通过一段时间对angular指令的使用，理解了angular指令的意义，下面逐一介绍一下。

ng-app：定义一个angualr模块，表示angular作用的范围，如下代码：

ng-app在html标签上使用时，表示angular作用于整个html页面，而在body上使用时表示作用于整个body

 <!DOCTYPE html>

 <html lang="en" ng-app="app"> <!-- 定义在html中的 ng-app -->

 <head>

     <meta charset="UTF-8">

     <title>test</title>

 </head>

 <body>

 <script src="angular.js"></script>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

 </head>

 <body ng-app="app">      <!-- 定义在body中的 ng-app -->

 <script src="angular.js"></script>

 </body>

 </html>

ng-controller: 定义angular控制器，控制器是view与model之间数据传递的纽带

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="app">

    <div ng-controller="myCtr">
    </div>

<script src="angular.js"></script>

</body>

</html>

数据绑定有三种格式：

表达式形式{{}}、ng-bind='XXX'、ng-model='XXX'

表达式{{}}多用于绑定的数据较多时使用,指令形式为后两种，ng-model用于表单数据绑定，指令绑定数据不会出现闪屏问题（网速慢时，出现{{}}问题）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

 </head>

 <body ng-app="app">

     <div ng-controller="myCtr">

         {{msg}}                  <!-- 表达式的形式 -->

         <p ng-bind="msg"></p>    <!-- ng-bind指令的形式 -->

         <input type="text" ng-model="msg"> <!-- ng-model指令形式，用于表单数据绑定 -->

     </div>

 <script src="angular.js"></script>

 <script>

       var app = angular.module('app', []);

       app.controller('myCtr',['$scope', function($scope){

       }

 </script>

 </body>

 </html>

为了解决上述表达式{{}}绑定数据时的闪屏问题，我们引入ng-cloak指令，其用法如下：

由于网速过慢，angular还未能很快加载进来，所以页面会出现{{}}，闪屏问题

class="ng-cloak":将控制器内容隐藏，用户便不会看到{{}}闪屏

等到angular.js加载进来后，会通过ng-cloak指令将隐藏的内容显示出来，提升了用户体验效果，也解决了表达式{{}}闪屏问题，可以放心大胆的去使用表达式了

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     .ng-cloak {

      display:none;   <!-- 默认将控制器中内容隐藏 -->

     }

 </head>

 <body ng-app="app">

     <div ng-controller="myCtr" ng-cloak class="ng-cloak"> <!-- 当我们刷新页面时,控制器内的内容是隐藏的,angular加载进来后通过ng-cloak指令将其内容显示出来 -->

        {{}}

     </div>

 <script src="angular.js"></script>

 <script>

 var app = angular.module('app', []);

 app.controller('myCtr',['$scope', function($scope){

 }

 </script>

 </body>

 </html>

ng-value,用于表单中数据绑定的表达式（计算等），由此看来指令就像游戏中的装备，在什么样的情况下要使用什么样的指令（装备），这样才能标签语义化

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     <style>

     .ng-cloak {

      display:none;

     }

     </style>

 </head>

 <body ng-app="app">

     <div ng-controller="myCtr" ng-cloak class="ng-cloak">

         <form>

             <input type="text" name="title" ng-model="goods.data.name">

             <input type="text" name="price" ng-model="goods.data.price">

             <input type="text" name="num" ng-model="goods.data.num">

             <input type="text" name="allPrice" ng-value="goods.data.price*goods.data.num" ng-readonly="true" >

             <input type="submit">

         </form>

     </div>

     <script src="angular.js"></script>

     <script>

         var app = angular.module('app', []);

         app.controller('myCtr',['$scope', function($scope){
             $scope.goods = {                            data:{'name':'apple', 'price':300, 'num':0}

                }

         }]);

     </script>

 </body>

 </html>

下面实现一个购物车功能，点击按钮增加货物数量，并增加总价，相反也可点击按钮减少货物数量，减少总价

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     <style>

     .ng-cloak {

      display:none;

     }

     </style>

 </head>

 <body ng-app="app">

     <div ng-controller="myCtr" ng-cloak class="ng-cloak">

         <p>商品名称：{{goods.data.name}}</p>

         <p>商品价格：{{goods.data.price}}</p>

         <p>商品数量：{{goods.data.num}}</p>

         <p>商品总价：{{goods.data.price*goods.data.num}}</p>

         <p ng-bind="goods.data.price"></p>

         <button ng-click="goods.add()">add</button>   //增加货物数量按钮

         <button ng-click="goods.reduce()">reduce</button> //减少货物数量按钮

     </div>

     <script src="angular.js"></script>

     <script>

         var app = angular.module('app', []);

         app.controller('myCtr',['$scope', function($scope){                          
               $scope.goods = {

                data:{'name':'apple', 'price':300, 'num':0},

                add : function(){

                    $scope.goods.data.num = Math.min(++$scope.goods.data.num, 6);  //通过取最小值，来保证,货物数量最大不能超过6

                 },

                 reduce: function(){

                    $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);  //通过取最大值，来保证,货物数量最小不为0

                 }

             }

         }]);

     </script>

 </body>

 </html>

Math.min(++$scope.goods.data.num, 6); 货物数量自加，然后与6比较取最小值，这样即可保证货物数量最大为6

Math.max(--$scope.goods.data.num, 0); 货物数量自减，然后与0比较取最大值，这样即可保证货物数量最小为0

在上述代码中加入下面代码片段，当我们点击关闭网站后status=0,status==0返回true，即ng-show="true",所以显示“网站正在维护”。

相反不显示，默认状态下，$scope.status = 1;也不会显示提示语。

<input type="radio" ng-model="status" ng-value="1">开启网站

<input type="radio" ng-model="status" ng-value="0">关闭网站

<div ng-show="status==0">

   <textarea>网站正在维护</textarea>

</div>
......
$scope.status = 1;
......

复选框使用，注意要加 ng-true-value;ng-false-value;表示复选框被选中时其ng-model的值为1（0），言外之意就是其值想为什么就为什么，我们控制

<input type="checkbox" ng-model="kl.name1" ng-true-value="1" ng-false-value="0">游戏

<input type="checkbox" ng-model="kl.name2" ng-true-value="1" ng-false-value="0">电影

<div ng-show="kl.name1==1">游戏</div>

<div ng-show="kl.name2==1">电影</div>

.......

$scope.kl = {"name1":"电影","name2":"游戏"};

.......

下拉框使用，其原理是通过 v.value as v.name for v in data 遍历数组，然后将其渲染成option标签, ng-model的值即为select的值（哪个option被选中值就是对应的

option标签的值）

<select ng-options="v.value as v.name for v in data" ng-model="city">

   <option value=''>请选择城市</option> <!-- 默认显示,记得加value='' -->

</select>

...

$scope.data = [{name:'北京',value:'01'},{name:'广东', value:'02'}];

...

追加方法，会在原有obj后面添加后面的obj,注意属性名不能一样，不然会覆盖（红色标注）

...

{{scales}}   <!-- view中显示出来，方便查看其结果 -->

...

$scope.scales = {'name':'lol', 'value':'德玛西亚'};

angular.extend($scope.scales, {'web':'dota','url':'moba'});

遍历方法，forEach(),可以遍历数组，亦可遍历对象，回调中的参数 v表是被便利的元素，k表示索引（下标）

...
{{lol}}  <!-- view中查看结果 -->
...
$scope.lol = [{'大区':'艾欧尼亚','hero':'剑姬'},{'大区':'守望之海', 'hero':'熔岩巨兽'}];

            angular.forEach($scope.lol,function (v, k) {

                console.log(v);            //控制台输出v, 查看后发现 v 表示被遍历数组中的元素

                v.hero = '德玛西亚'+v.hero; //添加前缀

            })

dota = {'大区':'艾欧尼亚','hero':'剑姬'};

        angular.forEach(dota, function(v, k){

            console.log(v); //v表示元素值（艾欧尼亚..）, k表示元素名称（大区...）

        })

ng-model-options

...

<input type="text" ng-model="msg" ng-model-options="{updateOn: 'default blur', debounce:{default:2000, blur:0}}">{{msg}}

...

angular.module("app", [])

    .controller("myCtr", function($scope){

    })

上述代码中，后面表达式显示内容是依据前面用户输入的内容现实的

updateOn 设置input事件，根据事件触发后面表达式的显示

debounce 设置时间（毫秒），根据时间设置后面表达式的显示

ng-class

...

.gray {

 background-color: gray;

}

...

<p  ng-class="{gray:true}"></p>

<p  ng-class-odd="{gray:true}"></p>

<p  ng-class-even="{gray:true}"></p>

ng-style

<p  ng-style="{color:gray}"></p>

ng-click, ng-dblclick, ng-keydown, ng-keyup, ng-mousedown, ng-mouseup, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-focus, ng-blur

巴特西

Angular指令渗透式理解

ng-model-options

ng-class

ng-style

最新文章

热门文章