秒味课堂Angular js笔记------指令

1.属性指令

angularjs样式相关指令：
- ng-class
- ng-style
- ng-href
- ng-src
- ng-attr-(suffix)
ng-bind
ng-cloak 没解析完之前标签是隐藏的，解析完后标签是显示的，控制css的指令
ng-bind-template 支持多表达式'{{text}},{{text}}'
ng-bind-html 解析字符串中的标签，需要依赖angular-sanitize.min.js
ng-non-bindable 不解析表达式，就原样输出{{text}}
ng-show
ng-hide
ng-if 当表达式为true ，该标签显示。并不是通过css操作，而且dom的添加删除的操作。
ng-switch
- on
- default
- when

<div ng-switch on="bBtn">

        <p ng-switch-default>默认的效果</p>

        <p ng-switch-when = "false">切换的效果</p>

</div>

ng-open 针对details标签，有兼容性，只支持chrome和Safari

<details ng-open="true">    //true显示下面列表，false不显示

    <summary>Copyright 2011.</summary>

    <p>All pages and graphics on this web site are the property of W3School.</p>

</details>

ng-init 建议在循环嵌套中利用此指令定义初始循环变量

<div ng-controller = "Ctr" ng-init = "aIndex = $index ">

    {{aIndex}}

</div>

ng-include 引入模板
ng-model 扩展，可以对数据添加条件，比如光标离开时更新数据。

       <script type="application/javascript">

            var sStyle = angular.module("sStyle",[]);

            sStyle.controller("styleController",["$scope",function($scope){

                $scope.text = "hello";

            }])

       </script>

       <body>

         <div ng-controller = "styleController">

            <input type="input" ng-model="text" ng-model-options="{updateOn : 'blur'}"/>

            <div>{{text}}</div>

         </div>

       </body>

ng-controller
- as 针对面向对象

2.标签指令，用于表单验证中

<a> 在ng-app中会阻止默认行为
<select> <script type="application/javascript"> var sStyle = angular.module("sStyle",[]);

　　　　<script type="application/javascript">
　　　　　　　　var sStyle = angular.module("sStyle",[]);

    　　　　　sStyle.controller("styleController",["$scope",function($scope){

                $scope.colors=[

                  { name : "red"},

                  { name : "yellow"},

                  { name : "blue"}

                ];

            }])

        </script>

        <body>

            <div ng-controller = "styleController">
　　　　　　　　　　<a href ="">{{myColor.name}}</a>

                <select ng-options = "color.name for color in colors" ng-model = "myColor">
　　　　　　　　　 </select>
            </div>

        </body>

<textarea>
<input>
<form>
- novalidate 阻止html5表单自带的样式，比如没有按照type="email"格式输入，鼠标点击其他位置，此时边框会默认变红色。

3.表单验证

$valid 表单验证成功返回true，验证失败返回false
$invalid 相反
$pristine 表单验证的值未修改返回true，修改过返回false
$dirty 相反
$error 验证失败

支持表单验证

type
- email
- number
- url
required

秒客网

秒味课堂Angular js笔记------指令

相关文章