angularJS-指令

angular-directive

在angularJS中，指令起到了非常重要的作用，它可以定义重复调用的HTML模板，大大减少了HTML代码的冗余。

下面是一个简单的directive实例

  JS代码：
  var app = angular.module('myApp',[]);
    app.directive('header',function(){
      return {
        restrict: 'EA',
        replace: true,
        templateUrl:'header.html',
        scope:{
          title:'@'
        }
      }
    });

在该例子中，directive是创建模板的指令，它包含了两个参数，
第一个参数是在HTML中调用该指令的名称，第二个参数是一个函数，该函数返回了一个对象。
restrict属性：该属性可以设置该指令在HTML以何种形式被调用，
该属性的可选值，
E：以元素的方式被调用，例如<header></header>；
A：以属性的形式被调用，该值也是restrict属性的默认值，例如：<div header></div>；
C：以类名的形式被调用，例如<div class=”header”></div>
M:以注释的形式被调用，<!– header –>

templateUrl属性：指定模板所在的路径。

template属性：在属性内写HTML的模板；
例如：template: ‘<span>模板</span>

replace属性：若设置该值会true，则模板HTML会替换掉调用模板的HTML；若为false，则会在调用模板的HTML内嵌入。

scope属性：该属性会创建一个隔离作用域，在该作用域内，外部作用域无法访问到该作用域外的数据。该属性常用值：
‘=’ : 绑定一个常量数据，显示到模板中，如上例子，只需在HTML中已该属性的名字添加到HTML的属性中即可。如<div header title=”abc”></div>
‘@’：绑定一个数据，通常用于绑定在input输入框中，实现双向绑定；
‘&’ ： 绑定一个函数。