AngularJs中的directive（一）

angular.module("app",[]).directive("directiveName",function(){  
     return{  
      //经过设置项来定义  
     };  
 })

restrict

类型：（字符串）可选参数

取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；

• E(元素)：<directiveName></directiveName>

• A(属性)：<div directiveName='expression'></div>

• C(类)：<div class='directiveName'></div>

• M(注释)：<-- directive:directiveName expression-->

template

类型：（字符串或者函数）可选参数

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'AEMC',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

HTML代码为：<hello></hello>

angular.module("app",[]).directive("directitle",function(){  
    return{  
      restrict:'EAC',  
     template: function(tElement,tAttrs){  
         var _html = '';  
         _html += '<div>'+tAttrs.title+'</div>';  
         return _html;  
      }  
    };  
 })

HTML代码为：<directitle title="biaoti"></directitle>

templateUrl

类型：（字符串或者函数），可选参数

• 一个表明HTML文件路径的字符串

• 一个函数，可接受两个参数tElement和tAttrs（大体同上）

var myModule = angular.module("MyModule", []);
}])
myModule.directive("hello", function() {
    return {
        restrict: 'AECM',
        templateUrl: 'hello-tpl.html',
        replace: true
    }
});

注意：在本地开发时候，须要运行一个服务器，否则使用templateUrl会报错

templateCache

因为加载html模板是经过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板。

var myModule = angular.module("MyModule", []);

//注射器加载完全部模块时，此方法执行一次
myModule.run(function($templateCache){
    //使用内置的方法缓存起来
    $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");
});

myModule.directive("hello", function($templateCache) {
    return {
        restrict: 'AECM',
        //使用get方法获取
        template: $templateCache.get("hello.html"),
        replace: true
    }
});

replace

类型：（布尔值），默认值为false

若是设置repace:true的话，就会隐藏掉对于指令命名的html标签

相似<hello></hello>若是replace设置为true的话，就会消失不显示。

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict:"AE",
        template:"<div>Hello everyone!</div>",
        //能够嵌套，默认为false 
        replace:true
    } 
});

HTML代码为：<hello></hello>

渲染以后的代码：<div><h3>hello world</h3></div>

对比下没有开启replace时候的渲染出来的HTML。发现<hello></hello>不见了。

transclude

类型：（布尔值或者字符element），默认值为false；

若是设置了transclude为true的话，就会把本来指令标签中用于写的东西放置到ng-transclude 中去。

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict:"AE",
        transclude:true,
        template:"<div>Hello everyone!<div ng-transclude></div></div>"
    } 
});

HTML代码为：

<hello>
    <div>这里是指令内部的内容。</div>
</hello>

注意:在一个指令的模板template上只能申明一个ng-transclude。

若是咱们想把嵌入部分屡次放入咱们的模板中要怎么办？则能够在link 或者controller里面添加一个参数$transclude 。

link:function($scope,$element,$attrs,controller,$transclude){
    // clone 参数就是用户输入进去的内容。
    $transclude(function(clone){
        // 进行其余操做。
    });
}

var app = angular.module('app',[]);
app.directive('myLink',function(){
    return {
        restrict:'EA',
        transclude:true,
        controller:function($scope,$element,$attrs,$transclude){
            $transclude(function(clone){
                var a  = angular.element('<a>');
                a.attr('href',$attrs.value);
                a.attr('target',$attrs.target);
                a.text(clone.text());
                $element.append(a);
            })
        }
    
    }
})

HTML代码为：

<div my-link value=" target="_blank">百度</div>

transclude:'element' 和 transclude:true 的区别

有时候咱们要嵌入指令元素自己，而不单单是他的内容，这种状况下，咱们须要使用transclude:"element",和transclude:true不一样，他讲标记了ng-transclude指令的元素一块儿包含到了指令模板中，使用transclusion， 你的link函数会获取到一个叫transclude的连接函数，这个函数绑定了正确的指令scope，而且传入了另一个拥有被嵌入dom元素拷贝的函数，你能够在这个transclude函数中执行好比修改元素拷贝或者将他添加到dom上等操。

scope

类型：可选参数，（布尔值或者对象）

• 默认值false，表示继承父做用域（儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此）;

• true，表示继承父做用域，并建立本身的做用域（子做用域）（儿子继承父亲的值，改变父亲的值，儿子的值随之变化，可是改变儿子的值，父亲的值不变）;

• {}，表示建立一个全新的隔离做用域（没有继承父亲的值，因此儿子的值为空，改变任何一方的值均不能影响另外一方的值）；

为了让隔离做用域能读取父做用域的属性，产生了绑定策略：

使用@（@attr）来进行单向文本（字符串）绑定

var app = angular.module('myApp',[]);  
app.controller('MainController',function(){});  
app.directive('helloWorld',function(){  
return {  
 scope: {color:'@colorAttr'},  //指明了隔离做用域中的属性color应该绑定到属性colorAttr  
 restrict: 'AE',  
 replace: true,  
 template: '<p style="background-color:{{color}}">Hello World</p>'        
}  
});

HTML代码为：<hello-world color-attr='{{color}}'></hello-world>

这种办法只能单向，经过在运行的指令的那个html标签上设置color-attr属性，而且采用双层花括号绑定某个模型值。

提示：若是绑定的隔离做用域属性名与元素的属性名相同，则能够采起缺省写法。

HTML代码为：

<hello-world color="{{color}}"/></hello-world>

js定义指令的片断：

app.directive('helloWorld',function(){  
 return {  
     scope: {  
         color: '@'  
     },  
     ...  
     //配置的余下部分  
 }  
});

使用=（=attr）进行双向绑定

var app = angular.module('myApp',[]);  
app.controller('MainController',function(){});  
app.directive('helloWorld',function(){  
return {  
 scope:{color:'='},  
 restrict: 'AE',  
 replace: true,  
 template: '<div style="background-color:{{color}}">Hello World<div><input type="text" ng-model="color"></div></div>'        
}  
});

HTML代码为：

<input type="text" ng-model="color" placeholder="Enter a color"/>  
  {{color}}  
<hello-world color='color'></hello-world>

使用&来调用父做用域中的函数

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.sayHello = function(name){
        alert("Hello " + name);
    }
}])
myModule.directive("greeting", function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input type="text" ng-model="userName" /><br/>'+
                 '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
    }
});

HTML代码为：

<greeting greet="sayHello(name)"></greeting>

备注：

• & 父级做用域： 传递进来的参数必须是父级的函数方法， 而后在指令中，经过 test() 获取到 传递进来的函数，这个还不够，还必须再执行一次 test()() 才是真正的执行这个方法。

• @ 本地做用域： 只能传递字符串进来，对于方法或者对象是传递不进来的。

• = 双向属性： 能够传递对象进来，也能够是字符串，可是不能传递方法。 同时能够在指令中修改这个对象，父级里面的这个对象也会跟着修改的。

更多文章请查阅个人博客