[Angular] Directive. 1

時間 2019-11-19

原文原文鏈接

Directive:html

//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';app

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

'M' meaning Comment, it should wirte in a comment spa

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

Keyword:code

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

link: return a function to the browser.blog

In directive, you can just return a fucntion:ip

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:element

restrict: 'A'

1. Angular 下的 directive （part 1）
2. [Angular Directive] Structure directive and
3. Angular--Directive
4. angular directive
5. Angular 2 Directive
6. angular service/directive
7. angular指令 directive
8. angular directive scope
9. Angular 2 Directive Lifecycle
10. angular之directive(二)
更多相關文章...
• ionic 列表操作 - ionic 教程
• ionic 教程 - ionic 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 算法總結-二分查找法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。