秒味课堂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

posted @ 2016-11-27 20:08 若鱼灬阅读(306) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

公告