1. 程式人生 > >angularjs指令的學習

angularjs指令的學習

指令是angluarjs的一個標誌,是有別於其他框架的重要特徵,因此學習angularjs,指令是必須認真而系統的學習的。

指令概述

指令是一種執行訊號,釋出了一個指令就要某種行為,在html中各種標籤可以理解為指令,例如a標籤,就是告訴瀏覽器要建立一個超連結。

clipboard.png

就是一個指令的基本格式,指令使用時只需把指令的標籤放在相應的位置就行

clipboard.png

由於本團隊使用了yeoman建立專案,因此建立指令可以使用yeoman的命令:

yo angular:directive <name> 

yoeman還有許多便捷的命令,這裡不再細說

restrict

restrict屬性指出的是指令在html中的使用方法,一共有"E","A","M","C"四種,對應標籤(element),屬性(attribute),類(class),註釋(comment);可以多個同時使用,比如EAC,表示支援多種方式的使用

clipboard.png

replace

這是指令的另一個屬性,暫時沒想到他應該在何種情況下使用,但是書上既然專門介紹了還是寫一寫,加深一下印象。

clipboard.png

clipboard.png

clipboard.png

當設定replace為true時,模板中的內容替換指令為標記,這是書上的說法,我覺得說的不太明白,看圖一下就懂了。

transclude

將檢視模板(Template或TemplateUrl)替換到指定位置的檢視(Restrict),transclude與replace有一些相似之處,因此拿他們對比一下

clipboard.png

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<body>
<hello>
    <br/>
    <span>原始的內容,</span><br/>
    <span>還會在這裡。</span>
</hello>

<br>

<hello1>
    <br/>
    <span>原始的內容1,</span><br/>
    <span>還會在這裡1。</span>
</hello1>
<br>

<script>
    var appModule = angular.module('app', []);
    appModule
        .directive('hello', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there :transclude: true' +
                    '<span ng-transclude></span></div>,',
                transclude: true
                /*把<hello>標籤替換成我們所編寫的HTML模板,
                但是<hello>標籤內部的內容保持不變。*/
            };
        })
        .directive('hello1', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 1 :transclude: false' +
                    '<span ng-transclude></span></div>',
                transclude: false
            };
        })
</script>
</body>
</html>

clipboard.png

簡單明瞭。

link

link就是一個函式

clipboard.pngscope引數表示作用域,element表示指令中的元素,可以通過內建的jqLite呼叫,jqLite是一個壓縮版的jQuery,attrs引數表示指令元素的屬性集合,通過這個可以獲取元素中的各種屬性。

compaile

沒搞太懂,又因為不常用就不細說了。

scope

scope是指令中一個很強大也很常用的屬性scope屬性包含兩種型別,一種是布林值,另一種是json物件。

scope是布林值

scope屬性自定義指令時預設值就是布林型別的,初始值為false,指令中的作用域就是指令元素所在的作用域兩者是相同的。如果scope為true,則表示獨立建立,,當他的內容發生變化時並不會修改父作用域的內容。

scope是物件

如果scope是物件,那麼父作用域與子作用域是完全獨立的,不存在任何關聯。如果要用父作用域的屬性和方法需要在scope屬性對應的json物件中新增繫結策略:@ :把當前屬性作為字串傳遞,你還可以繫結來自外層scope的值,在屬性值中插入雙括號即可,此方法是單項繫結;

= :與父scope中的屬性進行雙向繫結

& :傳遞來自父scope的函式,稍後再呼叫.

requeire和controller

當一個指令需要和父元素指令進行通訊的時候,它們就會用到這兩個屬性。關於這個,看到一篇講解很好的文章:https://my.oschina.net/u/2342...