首页 > Web开发 > 详细

AngularJS自定义Directive不一定返回对象

时间:2015-12-28 23:26:17      阅读:218      评论:0      收藏:0      [点我收藏+]

 

AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法:

 

angular.module(‘modulename‘)
    .directive(‘myDirective‘, function(){
        return {
            restrict: ‘EA‘, //E表示element, A表示attribute,C表示class,M表示commnent,即注释
            scope:{
                title: ‘@‘ //@读属性值,=双向绑定,&用户函数
            }
            template: ‘<div>{{myVal}}</div>‘,
            templateUrl: ‘app/sample.html‘,
            controller: ‘myController‘,
            link:function($scope, element, attrs){}//DOM操作
        };
    })

 

也可以直接返回函数。实际上返回的是link对应的函数。

 

var app=angular.module(‘superhero‘,[]);


app.directive("enter", function(){
   return function(scope, element){
       element.bind("mouseenter", function(){
           console.log(‘I am inside of you‘);
       })
   }
});

app.directive("leave", function(){
    return function(scope, element){
        element.bind("mouseleave", function(){
            console.log(‘i am leaving on a jet plane‘);
        })
    }
})

 

以上,实际上return没有返回对象,而是返回了一个函数。

在页面中按如下调用:

<div enter leave>I am content</div>

 

另外,link函数还有一个attrs形参用来描述所有的属性,通过"attrs.属性名"来获取属性值。

 

app.directive("enter", function(){
   return function(scope, element, attrs){
       element.bind("mouseenter", function(){
           element.addClass(attrs.enter);
       })
   }
});

app.directive("leave", function(){
    return function(scope, element,attrs){
        element.bind("mouseleave", function(){
            element.removeClass(attrs.enter);
        })
    }
})

 

在页面中按如下调用:

<div enter="panel" leave>I am content</div>

AngularJS自定义Directive不一定返回对象

原文:http://www.cnblogs.com/darrenji/p/5084105.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!