zoukankan      html  css  js  c++  java
  • angularjs学习第七天笔记(系统指令学习)

      您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令

      系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在

      系统指令在学习了分成两个部分进行学习:基础指令、在指令中使用子作用域

      第一、基础指令

        基础指令由包括bool型和类bool型两类

        bool型指令,就是其值是一bool值(true or false)

        1.1、bool指令包括:

        ng-disabled:主要控制控件是否可操作

        ng-readonly:控制文本输入框为只读

        ng-check:控制选择框是否被选中

        ng-selected:控制下拉框选中项

        1.2、类布尔指令包括:

        ng-href 指令:与html中的href对应,其好处是当为给其赋值时

        ng-src指令:与html中的src对应,表达式生效之前不要加载图像: 

        一个简单的练习:

        

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myContro">
        <div>
            <h1> ng-disabled指令</h1>
            <input type="text" ng-disabled="isDisable" placeholder="3s后我才可操作" />
        </div>
    
        <div>
            <h1> ng-readonly指令</h1>
            <input type="text" ng-model="isReadonly" placeholder="只要我不空下面就不可操作" />
            <input type="text" ng-readonly="isReadonly" placeholder="前面不为空我就不可操作啦" />
        </div>
    
        <div>
            <h1> ng-check指令</h1>
            是否选中王先生<input type="checkbox" ng-model="isSelected" value="是否选中王先生" />
            <select>
                <option>许先生</option>
                <option ng-selected="isSelected">王先生</option>
            </select>
        </div>
    </body>
    </html>
    <script src="Scripts/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myContro", function ($scope, $timeout) {
            $scope.isDisable = true;
            $timeout(function () {
                ///// 3秒后开启控件可操作
                $scope.isDisable = false;
            }, 3000)
        });
    </script>

        

        第二、在指令中使用子作用域 

          指令中使用子作用域,其简单的理解就是,其指令会创建一个隔离的作用子域,基础父作用域。

          1、ng-app:DOM元素将被标记为$rootScope的起始点

             在JavaScript代码中通过run方法来访问$rootScope。 

          2、ng-controller:控制器,创建一个子域

          3、ng-include :其实现功能效果就是,模块化加载外部的模块

           使用注意要点:

            a.ng-include,如果单纯指定地址,必须要加引号

            b.ng-include,加载外部html,script标签中的内容不执行,不能加载,如果需要控制器处理需要在主页中注册

            c.ng-include,加载外部html中含有style标签样式可以识别

            d. ng-inclue,记载外部html中的link标签可以加载

           使用距离:

            <div ng-include="/myTemplateName.html"    

               ng-controller="MyController"    

               ng-init="name = 'World'">    

              Hello {{ name }} </div> 

           4、ng-switch :根据条件选择性的加载

            格式为:ng-switch on="名称"

                ng-switch-default:默认处理

                ng-switch-when='具体的值'

            来一个练习:      

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myContro">
        <div>
            <h1>  ng-switch指令</h1>
            <select ng-model="selectValue">
                <option value="">请选择</option>
                <option value="xu">许先生</option>
                <option value="wang">王先生</option>
            </select>
            <div ng-switch on="selectValue">
                <div ng-switch-default>请先选择</div>
                <div ng-switch-when="xu">你选择的许先生</div>
                <div ng-switch-when="wang">你选择的王先生</div>
            </div>
        </div>
    </body>
    </html>
    <script src="Scripts/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
    </script>

      5、ng-if :根据条件选择性的是否加载

       ng-if和ng-show、ng-hide都能够实现标签的显示隐藏

       但是其有本质的区别,ng-if是直接不加载,而后者是通过css样式控制

       代码实例:

        <div>

          <h1> ng-if指令</h1>
          是否显示<input type="checkbox" ng-model="isShow" />
          <div ng-if="isShow">
            需要显示还是隐藏我,你们自己控制吧!
          </div>
        </div>

      6、ng-repeat:循环遍历一个集合数据,根据模板生成数据列

        几个关键属性值: 

        $index:遍历的进度(0...length-1)
        $first:当元素是遍历的第一个时值为true
        $middle:当元素处于第一个和后元素之间时值为true
        $last:当元素是遍历的后一个时值为true
        $even:当$index值是偶数时值为true
        $odd:当$index值是奇数时值为true

        ng-repeat在数据列表显示中用的比较多,在实际使用中可以根据其关键字进行样式设置展示

        特别说明:集合数据的开始坐标是0,所以在处理奇偶数时要注意

        来一个练习:

        

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myContro">
         <style type="text/css">
            .even {
                background-color: #b6ff00;
            }
    
            .odd {
                background-color: #808080;
            }
        </style>
    
        <div>
            <h1>ng-repeat指令</h1>
            <div ng-repeat="user in uesrList">
                <div style="400px;height:40px;line-height:40px;" ng-class="even:!$even;odd:!odd">您好{{user.name}}</div>
            </div>
            <div>
                姓名:<input type="text" ng-model="addName" placeholder="请输入新增的姓名" /><br />
                <input type="button" ng-disabled="!addName" value="新增" ng-click="addNewName()" />
            </div>
        </div>
    
    </body>
    </html>
    <script src="Scripts/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myContro", function ($scope, $timeout) {
            $scope.addName = "";
            $scope.uesrList = [{ name: "许先生" }, { name: "赵先生" }, { name: "刘先生" },]
            $scope.addNewName = function () {
                $scope.uesrList.push({ name: $scope.addName });
            };
        });
    </script>

      

      7、{{}}与ng-bind指令:两个指令都是实现数据绑定

       区别:由于{{}}绑定数据时,会因为加载后未渲染属性而导致浏览器闪烁,ng-bind不会闪烁

          ng-bind只能执行单个变量绑定

            但是可以借助:ng-bind-template定义一个模板实现多变量绑定

            如:<h1 ng-bind-template ="{{text}} {{text}}" ></h1>

        今天就到此为止,明天继续研究指令的生深入研究学习

  • 相关阅读:
    Codeforces 451A Game With Sticks
    POJ 3624 Charm Bracelet
    POJ 2127 Greatest Common Increasing Subsequence
    POJ 1458 Common Subsequence
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1698
    HDU 1754
    POJ 1724
    POJ 1201
    CSUOJ 1256
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/angularjs_directive_systemDirective.html
Copyright © 2011-2022 走看看