[Angular] Directive. 1

Directive:

//Element directive
app.directive('superman', function(){
    return {
        restrict: "E",
        template: "<div>Here I am to save the world!</div>",
        link: function(){
            alert("Superman!");
        }
    }
});
<superman></superman>

 

app.directive('superman', function(){
    return {
        restrict: "A",
        template: "<div>Here I am to save the world!</div>",
        link: function(){
            alert("Superman!");
        }
    }
});
<div superman></div>

 

Directive also have 'C', 'M';

'C' menaing Class, it should write in a class="superman",

'M' meaning Comment, it should wirte in a comment <!-- superman -->

 

Usually, Attribute directive is more common used than element directive!

Keyword:

template: Accept a html code, can be "<div>...</div>", or a html file

link: return a function to the browser.

 

In directive, you can just return a fucntion:

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

app.directive('leave', function(){
    return function(scope, element){
        element.bind("mouseleave", function(){
            console.log("I am leaving");
        });
    }
});
<!DOCTYPE html>
<html>
    <head>
        <title>Angular Directive</title>
        <script src="angular.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body ng-app="behaviorApp">
        <div superman></div>
        <div enter leave>I'm content!</div>
    </body>
</html>

 

By default, if you don't say restrict, it is:

restrict: 'A'


posted @ 2014-08-12 17:12  Zhentiw  阅读(220)  评论(0)    收藏  举报