AngularJs指令

HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

1、内置指令

• ng-app:指定应用根元素，至少有一个元素指定了此元素；

• ng-controller:指定控制器

• ng-show,ng-hide,指定元素是否可见

    
    





    AngularJs指令,被隐藏了



    AngularJs指令,没有被隐藏

ng-show,ng-hide

• ng-model:把元素值（比如输入域的值）绑定到应用程序。

• ng-init:初始化数据。

    
    




    
价格计算器
    数量： 
    价格： 
    
总价： {{ quantity * price }}

ng-model,ng-init

• ng-repeat:循环遍历数据

    
    



    
    

        
姓名：{{info.name}}，年龄：{{info.age}}
    

ng-repeat循环遍历

2、自定义指令

当我们在开发的时候，AngularJs的指令无法满足我们的需求时，我们就要自定义指令,通过angular全局对象下的directive方法实现

        var App = angular.module('App', []);
        // 通过模块实例对象的directive方法可以自定义指令
        App.directive('tag', function () {
            // 返回一个对象，这个对象就是自定义指令相关的内容
            return {
                // E element,表示元素
                // A attribute，表示属性
                // C class，表示类
                // M mark replace 必须为true
                restrict: 'ECMA',
                template: '
首页
列表
',
                //templateUrl: './list.html',
                // replace: true
            }
        });