angularjs自定义指令通用属性详解

angularjs是目前市场上仅有的具有自定义指令功能的开发框架。

首先介绍一下对自定义指令属性的理解

1、restrict：指令在html中的应用形式（'A''E''C''M'）,分别指代attribute、element、class、comment,默认值是A

2、scope：指令的作用范围，scope在指令中通过属性标签传递，每一个指令都有自己的作用域，并且比依赖于父级scope作用域。

　　scope对象有name和type变量属性，用法如下：

　　name:"@"(值传递，单向绑定)：@符号表示变量是值传递，指令会检索从父级scope中传递而来的字符串的值，指令可以使用该值但是无法修改，属于只读数据；

　　amount:"="(引用，双向绑定)：=表示变量是引用传递，指令检索主scope引用的值，值可以是任意类型的，包括复合对象和数组。指令可以更改父级scope中的值；

　　save:"&"(表达式)：&表示变量是父级scope中的表达式，允许指令实现比修改值更高的操作

3、template：替代原始模块中标记的字符串，替换功能将替换所有旧元素为新值，template使用scope中定义的变量与replace相关，replace：说明是否替换原始标记中的值或是追加原始标记中的值，默认值是false，这时原始标记将保留；

4、trasclude：说明自定义指令是否复制原始标记中的内容

5、link：次属性非常重要很常用，主要负责操作DOM事件及注册事件监听器等；link方法的参数如下：

　　scope：指令scope的引用，scope在初始化时是不被定义的，link方法会注册监听器监视值变化事件；

　　element：包含指令的DOM元素的引用；一般用jquery方法来操作dom；

　　controller：在嵌套指令的情况下使用，把子指令的引用提供给父指令，指令之间可以交互

注意，当调用link 方法时，通过值传递（"@"）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。

代码示例：

/创建指令模块 (或者检索现有模块) 
var m = angular.module("myApp");

// 创建"my-dir"指令 
myApp.directive("myDir", function() { 
  return { 
    restrict: "E",        // 指令是一个元素 (并非属性) 
    scope: {              // 设置指令对于的scope 
      name: "@",          // name 值传递 （字符串，单向绑定） 
      amount: "=",        // amount 引用传递（双向绑定） 
      save: "&"           // 保存操作 
    }, 
    template:             // 替换HTML (使用scope中的变量) 
      "<div>" + 
      "  {{name}}: <input ng-model='amount' />" + 
      "  <button ng-click='save()'>Save</button>" + 
      "</div>", 
    replace: true,        // 使用模板替换原始标记 
    transclude: false,    // 不复制原始HTML内容 
    controller: [ "$scope", function ($scope) { …  }], 
    link: function (scope, element, attrs, controller) {…} 
  } 
});  


几种方式实例的代码demo：
1.控制器的数据向指令传递

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <title>Document</title>
</head>
<body ng-controller="indexCtrl">
    <div my-directive my-url="{{datas.url}}" my-name="{{datas.name}}"></div>
</body>
<!-- 控制器的数据向指令传递 -->
</html>

2.templateUrl 参数实例

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <title>Document</title>
</head>
<body ng-controller="indexCtrl">
    <div my-directive my-url="{{datas.url}}" my-name="{{datas.name}}"></div>
    <div my-directive1 my-url="{{datas.url}}" my-name="{{datas.name}}"></div>
    <script type="text/ng-template" id="hello.html">
        <p>名称：{{myUrl}}</p>
        <p>路径：{{myName}}</p>
    </script>
</body>
</html>

3.transclude参数实例

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <title>Document</title>
</head>
<body ng-controller="indexCtrl">
    <div my-directive my-url="{{datas.url}}" my-name="{{datas.name}}"></div>
    <div my-directive1 my-url="{{datas.url}}" my-name="{{datas.name}}"></div>
    <script type="text/ng-template" id="hello.html">
        <p>名称：{{myUrl}}</p>
        <p>路径：{{myName}}</p>
    </script>
    <div sidebox title="Links">
        <ul>
            <li>first link</li>
            <li>second link</li>
        </ul>
    </div>
    <div sidebox title="TagCloud">
        <div class="tagcloud">
            <a href="">Graphics</a>
            <a href="">AngularJS</a>
            <a href="">D3</a>
            <a href="">Front-end</a>
            <a href="">Startup</a>
        </div>
    </div>
</body>
</html>

4.controller参数实例

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <title>Document</title>
</head>
<body ng-controller="indexCtrl">
    <div your-aa sex="{{datas.sex}}"></div>
</body>
</html>

公共的js代码如下：

var myapp = angular.module("app",[]);
myapp.controller("indexCtrl",function($scope){
    $scope.datas = {
        url:'http://www.baidu.com',
        name:'点我去百度',
        sex:'女'
    }
})
myapp.directive("myDirective",function(){
    return{
        restrict:'A',
        scope:{
            'myUrl':'@',
            'myName':'@'
        },
        replace:true,
        template:'<a href="{{myUrl}}">{{myName}}</a>',
        link:function(){

        }
    }
})
myapp.directive("myDirective1",function(){
    return{
        restrict:'AE',
        scope:{
            'myUrl':'@',
            'myName':'@'
        },
        replace:false,
        templateUrl:'hello.html',
        link:function(){
            
        }
    }
})
myapp.directive("sidebox",function(){
    return{
        restrict:'AE',
        scope:{
            title:'@'
        },
        transclude:true,
        template:'<div class="sidebox">
            <div class="content">
            <h2 class="header">{{ title }}</h2>
            <span class="content" ng-transclude>
            </span>
            </div>
            </div>'
    }
})
myapp.directive("yourAa",function(){
    return{
        restrict:'A',
        scope:{
            sex:'@'
        },
        controller:'someController'
    }
})
myapp.controller("someController",function($scope,$element,$attrs,$transclude){
    alert($scope.sex);
})