AngularJs自定義指令詳解(1) - restrict


AngularJs自定義指令時,要求返回一個指令定義對象(Directive Definition Object),該對象可以聲明若干屬性和方法。下面例子的restrict、template就是其中之一。

restrict是一個可選的參數,若不聲明,則取默認值EA。

可選值包括:E(元素)A(屬性)C(類名)

混合使用:如:EA,表示既可以作為E也可以作用A。

例子:

復制代碼
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <script src=""></script>
    <title></title>
    <script language="JavaScript">
        angular.module('app',[])
                .directive('myDirective',function(){
                    return{
                        restrict:'EAC',
                        template:'Hello World!'

                    };
                });
    </script>
</head>
<body ng-app="app">
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
</body>
</html>
復制代碼

在Google Chrome查看:

點擊右鍵-審查元素(或快捷鍵ctl+shift+i),可以看到:

注意‘Hello World!’字符串的插入位置。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM