常用指令

一、 指令

1. 定义应用根元素

   <div ng-app="app"></div>
   <script>
   var app = angular.module('app', []);
   </script>
   

2. 控制器:ng-controller

   <div ng-controller="appController"></div>
   <script type="text/javascript">
   app.controller('appController', function($scope) { })
   </script>
   

3. 遍历: ng-repeat

   ng-repeat="key in keys"
   ng-repeat="(key, value) in keys"
   ng-repeat="key in keys | filter:searchText"
   ng-repeat="key in keys | orderBy:'-age'"
   

4. ng-options

   ng-options="color.name for color in colors"
   ng-options="option.id as option.name for option in Options"
   ng-options="option.id group by option.name for option in Options"
   

5. 样式：ng-class/ng-style

   ng-class="{'true':'badge bg-green', 'false':'badge bg-red'}[isActive]"
   ng-style="{ color: i.color=='' || i.color=='Default' ? 'default' : 'red' }"
   

6. 数据绑定： ng-model/ng-bind

   <input type="text" ng-model="userName">
   <div><span ng-bind="name"></span></div><!-- 或双大括号 -->
   

7. 显示：ng-if、ng-hide / ng-show

   <div ng-if="isChecked == true">为true则可显示</div>
   <p ng-hide="true">我是不可见的</p>
   <p ng-show="2+2 == 4">我是可见的</div>  
   

8. 分支语句 ng-switch

   <span ng-switch="person.sex">  
   <span ng-switch-when="boy">boy</span>  
   <span ng-switch-when="girl">girl</span>  
   <span ng-switch-default></span>
   

9. 初始化数据:ng-init

   <div ng-init="name='张三'"></div>  
   

10. ng-selected

       <select>  
       <option>First</option>  
       <option>Second</option>  
       <option ng-selected="true">Third</option>  
       </select>  
       <select>  
       <option ng-repeat="person in persons" ng-select="person.sex == 'boy'"></option>  
       </select>
    

11. ng-disabled/ng-readonly/ng-checked/ng-href/ng-src

       <button ng-disabled="1+1==2">不可点击</button>
       <input type="text" ng-readonly="isReadOnly"/>
       <input type="checkbox" ng-checked="true" />
       <a ng-href="'/user/1'">Link</a>
       <img ng-src="">
    

12. ng-form
    和HTML的<form>标签一样，但可以被<form>标签嵌套

13. 包含 HTML内容 ng-include
    <div ng-include="'userList.html'"></div>

二、事件

1. 点击事件：ng-click
2. 双击事件：ng-dbl-click
3. 按下鼠标按钮：ng-mousedown
4. 鼠标进入元素时：ng-mouseenter
5. 鼠标离开元素时：ng-mouseleave
6. 鼠标指针移动到元素上：ng-mousemove
7. 按下键盘按键时触发：ng-keydown="keydown($event)"
8. 松开键盘按键：ng-keyup="keyup($event)"
9. 敲击键盘按键： ng-keypress="keypress($event)" 事件发生顺序：KeyDown -> KeyPress -> KeyUp
10. model值改变时:ng-change
11. 元素失去焦点:ng-blur
12. 元素获取焦点:ng-focus

三、自定义拓展

 var app = angular.module('myApp', []);
    app.service('serverDemo', function() {
        this.add = function (x,y) {
            return x+y;
        },
        return sub=function(x,y){
            return x-y;
        }
    });
    app.filter('filterDemo',['serverDemo', function(serverDemo) {
        //在过滤器中使用服务
        return function(x,y) {
            return serverDemo.add(x,y);
        };
    }]);
     app.directive('dirDemo', function() {
        return {
            restrict: 'EA',     // 指令是一个元素或属性
            replace: true,      // 使用模板替换原始标记 
            transclude: true,   // 不复制原始HTML内容 
            require: '^?accordion',
            scope: {
                str: '=strDemo'     //双向绑定
                name: "@",          // 单向绑定
                save: "&"           // 方法绑定
            },
            template: '<div> \{\{str\}\}</div>',//替换HTML (使用scope中的变量)
            controller: [ "$scope", function (scope) {}],
            link: function(scope, element, attrs, controller) {

            }
        }
    });
    app.controller('controllerDemo', function($scope,$filter) {
         //在控制器中使用过滤器
        scope.bizScope = filter('filterDemo')(10, 20);
    });

指令及过滤器使用

<div ng-app="myApp">    
    <h1>\{\{10 | filterDemo:20\}\}</h1>
    <dir-demo str-demo="'abc'" name='name'></dir-demo>
</div>

Tags: