首頁 > 開發者 > 網站開發

AngularJS入門筆記02

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：angular   建立   res   ict   命名   comm   cti   att   attr   

<body ng-app="myApp"><runoob-directive></runoob-directive><script>    var app = angular.module("myApp",[]);    app.directive("runoobDirective",function () {        return {            template :"<h1>自訂指令!</h1>"        }    });    /**     * 除了 AngularJS 內建的指令外，我們還可以建立自訂指令。     * 你可以使用 .directive 函數來添加自訂的指令。     * 要調用自訂指令，HTML 元素上需要添加自訂指令名。     * 使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:     * */</script></body>

<body ng-app="myApp"><div runoob-directive></div><script>    var app = angular.module("myApp",[]);    app.directive("runoobDirective",function () {        return {            template :"<h1>自訂指令!</h1>"        }    });</script></body>
<body ng-app="myApp"><div class="runoob-directive"></div><script>    var app = angular.module("myApp",[]);    app.directive("runoobDirective",function () {        return {            restrict : "C",            template :"<h1>自訂指令!</h1>"        }    });
/** * 注意： 你必須設定 restrict 的值為 "C" 才能通過類名來調用指令。 * * */ 
</script> </body>

 

<body ng-app="myApp"><!-- directive:runoob-directive --><script>    var app = angular.module("myApp",[]);    app.directive("runoobDirective",function () {        return {            restrict : "M",            replace : true,            template :"<h1>自訂指令!</h1>"        }    });    /**     * 注意： 我們需要在該執行個體添加 replace 屬性， 否則評論是不可見的。     * 注意： 你必須設定 restrict 的值為 "M" 才能通過注釋來調用指令。     *     * 注釋的內容前後必須要有空格     *     * */</script></body>

 

restrict 值可以是以下幾種:

  • E 作為元素名使用
  • A 作為屬性使用
  • C 作為類名使用
  • M 作為注釋使用
restrict 預設值為 EA, 即可以通過元素名和屬性名稱來調用指令。
<body ng-app="myApp"><runoob-directive></runoob-directive><div runoob-directive style="color: red"></div><div class="runoob-directive"></div><script>    var app = angular.module("myApp",[]);    app.directive("runoobDirective",function () {        return {            restrict :"A", // E = Element, A = Attribute, C = Class, M = Comment            template :"<h1>自訂指令!</h1>"        }    });    /**     * 注意： 通過設定 restrict 屬性值為 "A" 來設定指令只能通過 HTML 元素的屬性來調用。     *     * 除了 AngularJS 內建的指令外，我們還可以建立自訂指令。     * 你可以使用 .directive 函數來添加自訂的指令。     * 要調用自訂指令，HTML 元素上需要添加自訂指令名。     * 使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:     * */</script></body>

 

AngularJS入門筆記02

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More