當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AngularJs-指令和指令之间的交互（动感超人）

發布時間：2025/3/15 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJs-指令和指令之间的交互（动感超人）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：

　　上節我們學習到了指令和控制器之間的交互，通過給指令添加動作，調用了控制器中的方法。本節我們學習指令和指令之間是如何交互的，我們通過一個小游戲來和大家一起學習，聽大漠老師說這是國外的人寫的demo，我們可以借鑒學習。

1，動感超人

上面的三個按鈕，代表三個超人，在此想問下，哪些想看超人的朋友們是不是有種被騙了的感覺？

當我們的鼠標移動到哪個超人的身上的時候，就會輸入這個超人所擁有的超能力（力量 + 敏捷 + 發光）

<!DOCTYPE html> <html ng-app="MyModule"> <head><meta charset="utf-8"><link rel="stylesheet" href="css/bootstrap.min.css"><title>指令之間的交互</title> </head> <body><div class="row"><div class="col-md-3"><superman strength>動感超人---力量</superman></div><div class="col-md-3"><superman strength speed>動感超人2---力量+敏捷</superman></div><div class="col-md-3"><superman strength speed light>動感超人3---力量+敏捷+發光</superman></div></div> </body> <script src="js/angular-1.3.0.js"></script> <script src="js/directive-directive.js"></script> </html>

ok,我們先創建了四個指令，一個是通過 E 的模式創建的叫做 superman，另外三個是通過 A 模式創建的（strength、speed和light）。

上面的代碼，最主要的就是 superman的這個指令，里面有些我們還沒有認識的元素，我們下面介紹下：

scope:{}這個是創建一個獨立的作用域。
controller，這個和我們angular中的控制器有些不同，這個主要是寫一些指令的對外方法。

好，我們再來介紹下面的三個指令，我們就說一個就好了，其它的都一樣的。

在這三個控制器也有新增的東西：

require:"^superman"，這個是告訴angularJS,當前的指令，依賴于哪個指令。我們現在的 ?strength指令依賴于superman的指令
link方法中的第四個參數，叫做父控制器，只要是指令寫了require參數，就可以使用這個參數了，它可以訪問父級contorller的方法中提供的一些屬性和方法。

2，總結

　　我們從代碼上可以看出，我們的三個超人擁有超能力多少是和擁有的指令多少成正比的。他們都有一個父的指令，父指令提供了超能力的力量（我們可以理解為數據）。子指令控制了是否追加這些功能。

轉載于:https://www.cnblogs.com/zhiyuan-2011/p/4280593.html

總結

以上是生活随笔為你收集整理的AngularJs-指令和指令之间的交互（动感超人）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。